音乐播放器使用相同的id播放所有内容

Music player plays all with the same id

本文关键字：播放 id 播放器 音乐      更新时间：2023-09-26

我正在尝试制作一个音乐播放器，当用户点击按钮时，覆盖的图像将更改为stop.png并播放歌曲。当用户再次点击它时，它会将图像更改为play.png并停止播放歌曲。

<audio id="myAudio">
  <source src="http://www.w3schools.com/jsref/horse.ogg" type="audio/ogg">
  <source src="http://www.w3schools.com/jsref/hors.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
 </audio>
 <script>
function plaYer() {
    var image = document.getElementById('myImage');
    var x = document.getElementById("myAudio"); 
    if (image.src.match("play")) {
        image.src = "stop.png";
         x.play(); 
    } else {
        image.src = "play.png";
        x.pause(); 
    }
}
</script>
<button id="song"  
style="color: white; background-image: url('cover100.jpg'); border: none; outline: none; display:block;
width:100px;
height:100px;">
<img id="myImage" onclick="plaYer()" src="play.png" width="100" height="100">
</button>

我的问题是，当我尝试创建2个音乐播放器时，另一个音乐播放器不起作用。有人能帮我吗？

ID必须是唯一的。如果你想重用你的函数，你不能硬编码其中的ID。由于你使用内联事件处理程序，你已经可以访问image元素了。将该信息加上相应<audio>元素的ID传递给您的函数：

function plaYer(image, audioID) {
  var x = document.getElementById(audioID);
  // rest of your code ...
}
// HTML
<img id="myImage" onclick="plaYer(this, 'myAudio')" ... />

我建议阅读quicksmode.org上的优秀文章，了解更多关于事件处理的信息。

相关文章：