Question

我试图制作一个音乐播放器，当用户点击按钮时，覆盖的图像会将图像更改为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个音乐播放器时，其他音乐播放器无效。有人能帮助我吗？

Answer 1

ID必须是唯一的。如果要重用您的函数，则无法对其中的ID进行硬编码。由于您使用内联事件处理程序，因此您已经可以访问图像元素。将该信息以及相应<audio>元素的ID传递给您的函数：

function plaYer(image, audioID) {
  var x = document.getElementById(audioID);
  // rest of your code ...
}

// HTML

<img id="myImage" onclick="plaYer(this, 'myAudio')" ... />

我建议您阅读excellent articles on quirksmode.org以了解有关事件处理的更多信息。

音乐播放器播放所有相同的ID

1 个答案: