Play/Pause Audio Button Using HTML5 And JavaScript

Question

I am facing a problem for a couple of hours. I have some Radio Channels into a HTML document. Every channel has an image (it's logo). I can't figure out how to make the "click to Play/Pause" working.

Here's the JSFiddle document : http://jsfiddle.net/s35vk80m/1/ 123

If you click on the first image, it will play/pause the channel. The second button act like the first one.

How can I make it work, so that both of them would work independently and if I click on the second one while the first one is running, it would stop the first channel and start the second one?

I am sorry, I am a begginer :-).

score 1 · Answer 1 · edited May 23 '17 at 11:57

1

Based on w3schools html5 audio, m3 and pls audio types are not supported.

Maybe streaming will do (never tried), something like this is-it-possible-to-play-shoutcast-internet-radio-streams-with-html5.

edited May 23 '17 at 11:57

Community

1
1

answered Feb 04 '15 at 03:31

kudarap

631
3
6
16

They say it's not working but it does work though. If you have OS X or iPhone try this: http://jsfiddle.net/hmr88v6m/ It works but only for a single button. It's weird. – delutu69 Feb 04 '15 at 03:40

Kenny Johnson · Answer 2 · 2015-02-04T04:06:03.803

function aud_play_pause() is defined in your code twice. You need to give the second function a different name or just use one function to do both things. I would do something like this:

function aud_play_pause(channel) {
  var Radio21 = document.getElementById("Radio21");
  var RadioZU = document.getElementById("RadioZU");  
  if(channel == 'radio21'){ 
    RadioZU.pause();
    if (Radio21.paused) {
        Radio21.play();
        } else {
          Radio21.pause();
        }
    }
  if(channel == 'radioZU'){
     Radio21.pause();
     if (RadioZU.paused) {
         RadioZU.play();
         } else {
           RadioZU.pause();
         }  
    }    
}
</script>

Someone more knowledgeable than I could probably provide a more elegant solution but this should work.

Also, I couldn't get your JSFiddle to work in my browser and I couldn't get my JSFiddle to work so I haven't been able to test the function. Firefox didn't like the ContentTypes you are using: "HTTP "Content-Type" of "audio/x-mpegurl" is not supported. Load of media resource http://www.radio21.ro/Radio21Live.m3u failed."

EDIT: I thought about this a little more and basically you need a toggle. I can't get your example to work in Firefox so I'm going to create a toggle example that doesn't solve your problem but should illustrate how to fix it.

function example(string) {
  var first_div = document.getElementById("one");
  var second_div = document.getElementById("two");  
  if(string == 'one'){ 
    second_div.innerHTML = "OFF";
    if (first_div.innerHTML == "OFF") {
        first_div.innerHTML = "ON";
        } else {
          first_div.innerHTML = "OFF";
        }
    }
  if(string == 'two'){
    first_div.innerHTML = "OFF";
    if (second_div.innerHTML == "OFF") {
        second_div.innerHTML = "ON";
        } else {
          second_div.innerHTML = "OFF";
        }
    }  
}

<div id="one" onclick="example('one')">OFF</div>
<div id="two" onclick="example('two')">OFF</div>

@delutu69 Take a look at my edit. I added an example of how I would make the function look if it were my code. — Kenny Johnson, Feb 04 '15 at 03:31
.m3u8, .pls and .m3 are only supported on iPhone and OS X. (I am using Safari on my macbook and it works). Unfortunately, this method doesn't seem to play any of the two audio streams :-(. — delutu69, Feb 04 '15 at 03:37
Did you add "radio21" and "radioZU" to the respective onclick attributes? — Kenny Johnson, Feb 04 '15 at 03:53
@delutu69 I added another example which may give you the clues you need to solve your problem. It doesn't use audio but should be similar... Can you figure out how to adapt this to your project? — Kenny Johnson, Feb 04 '15 at 04:07
Kenny your example is perfect! It is exatcly the thing that I want but I have no idea how to adapt it with my audio streams.. — delutu69, Feb 04 '15 at 04:18

Play/Pause Audio Button Using HTML5 And JavaScript

2 Answers2