CODEWITHSUNDEEP
javascriptjqueryhtmlaudio
delutu69
delutu69

Reputation: 11

Play/Pause Audio Button Using HTML5 And JavaScript

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 :-).

Upvotes: 1

Views: 1147

Answers (2)

Kenny Johnson
Kenny Johnson

Reputation: 784

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>

Upvotes: 0

kudarap
kudarap

Reputation: 781

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.

Upvotes: 1

Related Questions