Hi im trying to have a song play when i click and pause when i click it again however it only seems to be playing this is the code below:

Javascript

 function StartOrStop(audioFile)
  {
    var audie = document.getElementById("myAudio");
    if(!audie.src) 
       audie.src = audioFile;
    if(audie.paused == false)
     {
        audie.pause();
     }
     else
     {
       audie.play();
     }
  }

HTML5

<img src="images/play.png" alt="Play Button width="57" height="50" onclick="StartOrStop('RWY.mp3')" >

Any suggestion on how i can fix it ?

Hi im trying to have a song play when i click and pause when i click it again however it only seems to be playing this is the code below:

Javascript

 function StartOrStop(audioFile)
  {
    var audie = document.getElementById("myAudio");
    if(!audie.src) 
       audie.src = audioFile;
    if(audie.paused == false)
     {
        audie.pause();
     }
     else
     {
       audie.play();
     }
  }

HTML5

<img src="images/play.png" alt="Play Button width="57" height="50" onclick="StartOrStop('RWY.mp3')" >

Any suggestion on how i can fix it ?

• javascript
• html
• css
• dom

1 Answer 1

When ever you click the image, it calls the StartOrStop function, this will cause the src of video set again thus cause paused to be true so you can't pause the video but just play it again.

This version should work:

HTML:

<img src="images/play.png" alt="Play Button" width="57" height="50" onclick="StartOrStop('RWY.mp3')">

<audio id="myAudio"></audio>

Javascript:

function StartOrStop(audioFile) {
    var audie = document.getElementById("myAudio");
    if (!audie.src || audie.src !== audioFile) audie.src = audioFile; // check if there's a src already and if the current src is not the same with the new one, change it. Or don't do anything.
    if (audie.paused == false)
        audie.pause();
    else
        audie.play();
}

Fiddle: http://jsfiddle/QCGYP/4/