使用Javascript創建多個按鈕，點擊時會播放聲音

好吧，所以我瞭解基本的JavaScript，我試圖製作一個音板類型的應用程序。我有頁面上的按鈕，但第二個按鈕是拉動第一個按鈕的音頻文件。我試着把按鈕放在不同的段落，div和其他一些東西上，但是當不同的音頻文件被鏈接時，兩個按鈕都播放完全相同的聲音。請幫忙！使用Javascript創建多個按鈕，點擊時會播放聲音

<!DOCTYPE HTML> 
<html> 
<head> 
<title>Audio</title> 
</head> 
<body> 

<script> 
    function play() { 
     var audio = document.getElementById("audio"); 
     audio.play(); 
    } 
</script> 

<input type="button" value="PLAY" onclick="play()"> 
<audio id="audio" src="audio/semipro.MP3" ></audio> 

<input type="button" value="PLAY 2" onclick="play()"> 
<audio id="audio" src="audio/hit.MP3" ></audio> 


</body> 
</html>

來源

2015-05-27 Aaron Altscher

你不應該有兩個具有相同ID的元素，它們應該始終是唯一的。

建議：你play方法可以採取id參數，它應該是相同的id作爲一個在audio標籤，按鈕應發揮。

可能的解決方案：

<!DOCTYPE HTML> 
<html> 
<head> 
<title>Audio</title> 
</head> 
<body> 

<script> 
function play(element){ 
    var audio = document.getElementById(element); 
    audio.play(); 
      } 
</script> 

<input type="button" value="PLAY" onclick="play('audio1')"> 
<audio id="audio1" src="audio/semipro.MP3" ></audio> 

<input type="button" value="PLAY 2" onclick="play('audio2')"> 
<audio id="audio2" src="audio/hit.MP3" ></audio> 



</body> 
</html>

來源

2015-05-27 21:41:30

不要使用重複的ID。您只需要一個音頻元素即可在點擊功能中更改src屬性。還輸入元件只應形式中，可使用按鈕元素代替：

<!--HTML--> 
<audio id="audio"></audio> 
<button onclick="play('file1.mp3')">Play Sound 1</button> 

<button onclick="play('file2.mp3')">Play Sound 2</button>

//JS 
function play(sound){ 
    var audio = document.getElementById("audio"); 
    audio.setAttribute('src', sound); 
    audio.play(); 
}

工作實施例：http://jsfiddle.net/Nillervision/et2tb7e0/

來源

2015-05-28 00:11:51 Nillervision

使用Javascript創建多個按鈕，點擊時會播放聲音

回答

相關問題