2

I am working on an interactive website about the languages of the world. Part of the plan is to have a world map which reacts with sound when different countries are hovered. The emphasis is on the sound of a language.

I would like to embed web radio streams from each country. As soon as one hovers over a country, the stream is played. It stops when the cursor leaves the country contour.

Codewise the way to go would be to listen to mouse events, e.g. with jQuery and assign the streams to functions.

I managed to embed mp3 files which lay into a separate directory on my server. How to do this with m3u? As far as I know html5 is not able to handle m3u streams.

I am grateful for any help.

Brad
  • 159,648
  • 54
  • 349
  • 530
ifthisthenthat
  • 95
  • 1
  • 2
  • 10

1 Answers1

0

M3U isn't a stream, it's a playlist. If you open up an M3U file in your text editor, you will see that it's just a list of URLs. 

#EXTM3U
http://example.com/stream
http://example.com/stream2

For your purposes, throw out any line that starts with a pound sign #, and then use the URLs in the file as your source for your HTML5 audio.

Also note that there is another standard that uses M3U8 (same thing, just UTF-8 encoded) HTTP Live Streaming (HLS) but there isn't wide browser support at this time. For now, if you stumble across an M3U file it's safe to say you're looking at an HTTP progressive stream, typically served from SHOUTcast or Icecast. That will likely change in the future though.

Brad
  • 159,648
  • 54
  • 349
  • 530
  • I did exactly what you said, and indeed the – ifthisthenthat Sep 13 '14 at 17:34
  • @YuliyanIlev Yes, simply delete the ` – Brad Sep 13 '14 at 17:35
  • I used the .remove function of jQuery. Weird stuff is happening now. The first time it works. The stream stops, when the cursor leaves the area. The second time it continues playing. There are two or more instances playing. It does not stop even on page reload. – ifthisthenthat Sep 13 '14 at 17:45
  • I would call stop on it before removing it then. It should work without this though... it sounds like you have something else going on. If you could narrow your code down to a reproducible example, I recommend posting a new question for that, and then leave a link here and I'll check it out. – Brad Sep 13 '14 at 17:46
  • Thank you for your fast replies. This helped me a lot! I found the answer to the problem here: [link](http://stackoverflow.com/questions/14834520/html5-audio-stop-function) Interestingly enough there is no stream in the resources list. Does it mean that there is only buffering when audio is streamed? Could this work with, let´s say 150 radio streams on one page? – ifthisthenthat Sep 13 '14 at 18:26
  • You shouldn't create the audio elements until you're ready to play the stream. Otherwise, you will indeed attempt connections to all the stations simultaneously. – Brad Sep 13 '14 at 19:32
  • In this case I should see data containers with the streams when I load the page, right? The resources list looks like this on startup: [SCREENSHOT](http://imgur.com/x6pGp0R). After a few seconds the files appear. They have the names of the Ip-adresses and no ending. Also they don´t seem tohave a size and a very short loading time. Look: [SCREENSHOT](http://imgur.com/IcUbMDH). I am working on Safari by the way. – ifthisthenthat Sep 13 '14 at 19:41
  • Same thing: They seem to be sizeless and their loading makes up a few bits of a second. [SCREENSHOT](http://imgur.com/R6OSii5). The heaviest thing here is my SVG map. The streams don´t seem to buffer in the background. – ifthisthenthat Sep 13 '14 at 19:47
  • If that's the case, then you're likely in good shape. Do test in other browsers though, as each browser has different implementation. – Brad Sep 13 '14 at 19:51
  • Streaming on hover works in Safari and Chrome but not in Firefox. Also Chrome renders my SVG horribly. Close shapes with edge contours and space inbetween cause ugly rendering. I will post a new question about that tomorrow. – ifthisthenthat Sep 13 '14 at 21:49