javascript - Javascript 通过单击同一图像来播放和暂停歌曲

Question

嗨，当我单击时我试图播放一首歌，当我再次单击它时暂停，但它似乎只是在播放，这是下面的代码：

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')" >

关于如何修复它的任何建议？

Answer 1

当您单击 时image，它会调用该StartOrStop函数，这将导致src再次设置视频，从而导致您paused无法true暂停视频而只能再次播放。

这个版本应该可以工作：

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();
}

小提琴：http: //jsfiddle.net/QCGYP/4/