Javascript 如何基于用户播放特定音频文件'；点击？

我正在开发一个“类似钢琴”的音乐应用程序，用户可以点击某个分区（方框），然后播放一个音符

我知道我可以通过抓取盒子和音频文件的所有ID来做到这一点，但我认为有一种更简单、更灵活的方法

我试着在这些盒子中循环并获取ID，但我似乎无法获得音频文件的名称。我有一个想法，我可以得到ID，看看他们是否匹配的名称属性的音频值，并发挥它那样，但我卡住了

以下是示例代码：

<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);

    });
}

var-box1=document.getElementById（'box1'）；
var box1Note=document.getElementById（'box1_-sound'）；
框1.addEventListener（'mousedown'，function（）{
box1Note.currentTime=0；
box1Note.play（）；
}); 
var-boxName=document.getElementsByClassName（'box'）；
var notes=document.getElementsByName（'notes'）；
对于（var j=0；j

---

任何帮助都会很棒，谢谢大家

在每个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在该函数中播放指定的音频文件？一个JSFIDLE，显示了我的实际示例。

您可以尝试以下方法：

通过每个盒子循环。对于每个循环，获取框的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();
    });    
}

var-box=document.querySelectorAll（'.box'）；
对于（var i=0；i