Playing mp3 Audio

Note : recently many browsers stopped/blocked auto play of audio files (to be less annoyiing advert wise) - and this may stop the browser side nodes from working.

I am fine if it plays on the sever or the browser but cannot get any of them to work.

Great! Now you choose one and hopefully the community can help work out why its not working.

Hey Mecky,

For playing sound in the browser, I currently use the following two nodes in my flow:

image

The dashboard's audio-out node plays sound in my dashboard, and the node-red-contrib-play-audio node plays sound in my flow editor. So both nodes play sound in the browser, but for two different applications ...

1 Like

Hi Bart,

can you play a mp3 file with those? If so, could you send me an example of how to set them up?

Thanks,
Mecky

Hmmm, I think it is WAV. Will try this evening MP 3. Now I'm off to my great place to work :lying_face:

Hey Mecky,

Have tested it with following flow, which downloads an mp3 from the web and plays it in the browser:

image

[{"id":"2a8146bc.01fa8a","type":"http request","z":"47b91ceb.38a754","name":"Download m3","method":"GET","ret":"bin","url":"https://www.thesoundarchive.com/email/mp_grail.mp3","tls":"","x":1260,"y":160,"wires":[["b4e7058c.12e0d8"]]},{"id":"7e9367c2.5c3018","type":"inject","z":"47b91ceb.38a754","name":"Start","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":1070,"y":160,"wires":[["2a8146bc.01fa8a"]]},{"id":"b4e7058c.12e0d8","type":"ui_audio","z":"47b91ceb.38a754","name":"","group":"16a1f12d.07c69f","voice":"0","always":true,"x":1460,"y":160,"wires":[]},{"id":"ca47e138.e7016","type":"comment","z":"47b91ceb.38a754","name":"Play mp3 in dashboard","info":"","x":1100,"y":120,"wires":[]},{"id":"fb9523fe.0686d","type":"http request","z":"47b91ceb.38a754","name":"Download m3","method":"GET","ret":"bin","url":"https://www.thesoundarchive.com/email/mp_grail.mp3","tls":"","x":1260,"y":260,"wires":[["4b104bb8.b27cd4"]]},{"id":"9fa09162.6a45b","type":"inject","z":"47b91ceb.38a754","name":"Start","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":1070,"y":260,"wires":[["fb9523fe.0686d"]]},{"id":"f9554a1d.16f3d8","type":"comment","z":"47b91ceb.38a754","name":"Play mp3 in flow editor","info":"","x":1100,"y":220,"wires":[]},{"id":"4b104bb8.b27cd4","type":"play audio","z":"47b91ceb.38a754","name":"","voice":"","x":1470,"y":260,"wires":[]},{"id":"16a1f12d.07c69f","type":"ui_group","z":"","name":"Default","tab":"f136a522.adc2a8","order":1,"disp":true,"width":"6"},{"id":"f136a522.adc2a8","type":"ui_tab","z":"","name":"Home","icon":"home","order":1}]

I run Node-RED on a Raspberry PI 3 model B and did the tests in browsers on Windows 10. It works fine in Chrome/Firefox/Edge both for flow editor and dashboard. So 6 tests in total ...

A couple of remarks:

  • The output of my http-request node is binary buffer. Don't convert audio or video anywhere to strings ...
  • In the audio-out node I have selected the checkbox 'Play audio when window not in focus, because it won't play otherwise when the tab (where you have added your audio-out node) isn't visible at the moment ...

Thanks Bart! Is it possible to grab the mp3 from the local computer too? Instead of a http request, what would I have to use?

I used the http-request node to make sure you have 'exact the same' data as in my tests. If that works in your case (???), then you know at least that the browser isn't your problem...

I think you just need to use the file-in node. But make sure you specify binary output (instead of string or text or whatever)!!!!

@meckyreuss - if by 'local computer' you mean the computer running the browser, the file-in node reads the file only from the machine NR is running on.

If the browser is running on the machine NR is running on, it will work, but it the browser is runnig on 'A' and NR is running on 'B' the file-in node can only read files from 'B'

Works like a charm!!! Is there a possibility to

  1. add a stop, pause and rewind into the flow?
  2. add a timer that triggers events at predefined times?

Thanks!
Mecky

  • We added a stop functionality some time ago via this pull-request (via msg.reset).
  • The rewind is certainly not implemented.
  • When you look at the discussion (related to that pull request), we didn't add pause functionality in that pull-request. Reason is that web audio doesn't support pause/resume out-of-the-box. There are workarounds to get it done, but I don't have the time at the moment to implement that...

Yes you can use the Interval-node, Inject-node, BigTimer-node ... There are plenty examples available when you search in Google or in this forum.

1 Like

You saved my day. Thanks a lot for posting this here

1 Like

Hello Everyone!

I am new to Node-RED, but I feel we will be friends :slight_smile:
I want to play a mp3 file on the dashboard. I used what Bart attached, but it did not want to work. For the start, I am using a boolen inject (true), in the middle it looks like that:

The play audio part is as Bart said, but when I click on the start button, the audio out says error.

Hey, can you please share your flow. I was not aware that youtube offers mp3 files...

I guess than this is the problem. I do not know what to write to the URL window in the htttp request node. How can I insert an MP3 to a htttps link?

I will share my flow as you requested:

Best regards,
Tibor

As @BartButenaers suggested you can't download mp3 from youtube. There is a tool called youtube-dl, which will download from youtube and convert it to mp3. However, if what you actually want to do is to play from youtube on the dashboard I expect you could do that directly in an iframe in the browser, though I have never done that.

2 Likes

Indeed Colin is right:

image

  1. If youtube.com should offer a music file xxx.mp3 then you can download that via the http-request node, and pass it (via an output message) to other nodes to play that sound.
    However I assume youtube offers e.g. yyy.mp4 (which includes video and audio). You could download that mp4 file via the httprequest node, but then the audio nodes in your flow have no clue how to play the audio inside that mp4 file. And so they give you that error...
  2. So you need to convert the yyy.mp4 file to a yyy.mp3 file (e.g. via an online youtube downloader/converter).
  3. But you need to store that yyy.mp3 somewhere, at a location where your http-request node can access it. E.g. on a public server or on your local server, but then you need to make it public available (read for "httpStatic" on this forum...).
1 Like

Edit
just saw @Colin already recommended youtube-dl

Alright, I will check it after work.