Dashboard "audio out" node doesn't play audio wav file on mobile phone

Dashboard
1

I have created a simple flow using node-red dashboard that plays an audio wav file using the dashboard audio out node when clicking on button "beep".

image

[
    {
        "id": "f6f2187d.f17ca8",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": ""
    },
    {
        "id": "ee7b07eb.e994d8",
        "type": "ui_audio",
        "z": "f6f2187d.f17ca8",
        "name": "",
        "group": "ce548e2.4cc5f7",
        "voice": "Fiona",
        "always": "",
        "x": 580,
        "y": 80,
        "wires": []
    },
    {
        "id": "24b39a25.16eb76",
        "type": "inject",
        "z": "f6f2187d.f17ca8",
        "name": "say \"hello world\"",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "hello world",
        "payloadType": "str",
        "x": 140,
        "y": 160,
        "wires": [
            [
                "ee7b07eb.e994d8"
            ]
        ]
    },
    {
        "id": "60ee1d6b.e57ef4",
        "type": "ui_button",
        "z": "f6f2187d.f17ca8",
        "name": "",
        "group": "ce548e2.4cc5f7",
        "order": 1,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "beep",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 130,
        "y": 80,
        "wires": [
            [
                "f45aebd5.111ff8"
            ]
        ]
    },
    {
        "id": "3b866d84.62c7e2",
        "type": "inject",
        "z": "f6f2187d.f17ca8",
        "name": "test_beep",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 140,
        "y": 20,
        "wires": [
            [
                "f45aebd5.111ff8"
            ]
        ]
    },
    {
        "id": "f45aebd5.111ff8",
        "type": "file in",
        "z": "f6f2187d.f17ca8",
        "name": "",
        "filename": "/data/scan_ok.wav",
        "format": "",
        "chunk": false,
        "sendError": false,
        "encoding": "none",
        "x": 350,
        "y": 80,
        "wires": [
            [
                "ee7b07eb.e994d8"
            ]
        ]
    },
    {
        "id": "ce548e2.4cc5f7",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "d259bcb0.160e3",
        "order": 1,
        "disp": true,
        "width": 6
    },
    {
        "id": "d259bcb0.160e3",
        "type": "ui_tab",
        "name": "Tab 1",
        "icon": "dashboard",
        "order": 1
    }
]

This is working when accessing my dashboard in chrome browser on my macbook.

It isn't working when accessing same dashboard in

  • safari browser on my macbook
  • chrome browser on my iphone.

I guess it has something to do with more strict security settings.
Is there a way to get it working in chrome browser (or safari browser) on an iphone and android phone ?

2

Mobile browsers hate autoplay - so workarounds are very hard these days. But yes pease if anyone knows how - do shout.

1 Like
3

1/ I did some code digging. So I think the problem is related to the following code in

image
image1966Ă—1556 274 KB

2/ This code looks very similar to AudioBuffer example which is described on following page:

This example is properly playing noise when I click on "Make white noise" button. I have tested this for following combinations:

  • in chrome on macbook
  • in safari on macbook
  • in chrome on iphone
  • in safari on iphone
4

similar but not the same... the whole point being you are clicking on he button which is your permission to play the sound... the audio node has no button as you just want to push the sound - so no permission = no sound

1 Like
5

  1. I understand that but I couldn't find anything on the internet that is explaining this different behaviour for different browsers (e.g. chrome on iphone versus chrome on macbook).

  2. Consequently I couldn't find any (browser) settings so I could make audio playing work in chrome on iphone like it does for chrome on macbook.

6

Interesting site regarding the autoplay behaviour for different browsers (take care that autoplay is mainly about video but it seems to be applicable as well for audio):

It is a pity that the combination "chrome on IOS" is missing.

The above link makes also reference to following github repository which allows to immediately test your settings by clicking on the Demo page

The outcome of the demo page for different combinations:

  1. chrome on my iphone (ios):

image
image1664Ă—1110 110 KB

  1. safari on my iphone:

image
image1660Ă—1120 141 KB

  1. chrome on my macbook:

image
image1872Ă—708 68 KB

  1. safari on my macbook

image
image2280Ă—710 87.9 KB

  1. firefox on my macbook:

image
image2436Ă—666 123 KB

7

It's important to remember that ALL browsers on iOS are just wrappers/skins round Safari's webview component. Apple will not allow full blown other browsers into the app store.

1 Like
8

It (playing audio) is working now on my iphone.

I can't see what I did to fix this.
I have added the site to my iphone Home Screen and since then it seems to be working but it also works now when I manually reenter the site address in the chrome browser on my iphone.
It even works when using a different public hostname that is resolving to the same IP addres.

9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.