歌曲播放和暂停

JavaScript Song play and pausing

本文关键字：暂停 播放      更新时间：2023-09-26

我已经设法播放和暂停一个mp3文件，只要我点击一个图像，问题是，每次我选择另一个图像(这意味着播放不同的mp3歌曲)它自动恢复相同的歌曲。

我的JavaScript: 

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

和

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

有什么建议可以解决这个问题吗?

你没有在点击时分配一个新的src，你要先检查它是否存在。第二个文件永远不会分配给src，因为src已经存在。

编辑

您应该检查audie.src === audioFile .

这种方法怎么样

<audio id="demo1" src="RWY.mp3"></audio>
<div>
  <button onclick="document.getElementById('demo1').play()">Play the Audio</button>
  <button onclick="document.getElementById('demo1').pause()">Pause the Audio</button>
  <button onclick="document.getElementById('demo1').volume+=0.1">Increase Volume</button>
  <button onclick="document.getElementById('demo1').volume-=0.1">Decrease Volume</button>
</div> 
<audio id="demo2" src="EL.mp3"></audio>
<div>
  <button onclick="document.getElementById('demo2').play()">Play the Audio</button>
  <button onclick="document.getElementById('demo2').pause()">Pause the Audio</button>
  <button onclick="document.getElementById('demo2').volume+=0.1">Increase Volume</button>
  <button onclick="document.getElementById('demo2').volume-=0.1">Decrease Volume</button>
</div>

你可以用image代替button。

相关文章：