音樂播放器播放全部使用相同的編號

我試圖製作一個音樂播放器，當用戶點擊按鈕時，覆蓋的圖像會將圖像更改爲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音樂播放器其他音樂播放器不工作。有人能幫我嗎？

來源

2016-05-15 typicalnoob

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更多地瞭解事件處理。

來源

2016-05-15 16:53:53

音樂播放器播放全部使用相同的編號

回答

相關問題