如何根據用戶的點擊播放某個音頻文件？

Question

我正在構建一個「鋼琴般」的音樂應用程序，用戶可以點擊某個div（盒子）並播放音符。

我知道我可以通過抓住盒子和音頻文件的所有ID來做到這一點，但我認爲這有一個更簡單和更靈活的方法。

我試着循環遍歷盒子並抓住Ids，但我似乎無法獲取音頻文件的名稱。我有一個想法，我可以得到Id並查看它們是否與音頻的name屬性值匹配並以此方式播放，但我被卡住了。

這裏的示例代碼：

<div id="main"> 
     <div id="box1" class="box"></div> 
     <div id="box2" class="box"></div> 
     <div id="box3" class="box"></div> 
     <div id="box4" class="box"></div> 
     <div id="box5" class="box"></div> 
     <div id="box6" class="box"></div> 
     <div id="box7" class="box"></div> 
    </div> 

<audio id="box1_sound" name="notes"> 
     <source src="audio/d_note.mp3" type="audio/mp3"></source> 
    </audio> 

的JavaScript：

var box1 = document.getElementById('box1'); 
var box1Note = document.getElementById('box1_sound'); 

box1.addEventListener('mousedown', function(){ 
    box1Note.currentTime = 0; 
    box1Note.play(); 
}); 

var boxName = document.getElementsByClassName('box'); 
var notes = document.getElementsByName('notes'); 

for (var j = 0; j < notes.length; j++) { 
    var notesVal = notes[j].name; 
    console.log(notesVal); 
} 

for (var i = 0; i < boxName.length; i++) { 
    boxName[i].addEventListener('mousedown', function(){ 
     var boxId = this.id; 
     console.log(boxId); 

    }); 
} 

任何幫助將是真棒，謝謝你們！

Answer 1

你可以嘗試這個工作：

循環通過每個盒子。對於每個循環，抓住框的id並連接以形成音頻元素的id名稱。

例如：

var boxes = document.querySelectorAll('.box'); 

for (var i=0 ; i < boxes.length; i++) { 
    boxes[i].addEventListener('click',function(){ 
     sound = document.getElementById(this.id+'_sound');  
     sound.currentTime = 0; 
     sound.play(); 
    });  
} 

FIDDLE DEMO

Answer 2

如何在每個div上放置一個onclick處理程序？這樣的事情：

<span onclick="playMusic('a.mp3')" class="white"> </span> 
<span onclick="playMusic('b.mp3')" class="black"> </span> 
<span onclick="playMusic('c.mp3')" class="white"> </span> 
<span onclick="playMusic('d.mp3')" class="black"> </span> 
<span onclick="playMusic('e.mp3')" class="white"> </span> 
<span onclick="playMusic('d.mp3')" class="black"> </span> 

然後只是有一些JavaScript，播放該功能指定的音頻文件？ Here's一個jsfiddle，顯示我的例子在行動。