javascript - 如何使用 Javascript 根据图片的位置选择和播放声音文件？

Question

我正在使用 HTML 和 Javascript 进行拖放活动；将图片拖到目标上。

在我的示例中，我有两张图片，“马”和“牛”，以及一个目标。我有两个声音文件，“Neigh”和“Moo”。

如果我将“Horse”拖到我想要“Neigh”播放的目标上。如果我将“Cow”拖到我想要“Moo”播放的目标上。播放应该由按钮点击触发。

我有拖放代码，但无法播放声音。

编辑：我知道如何播放声音文件；我不知道如何根据关联图片的位置播放特定文件。代码如下： 播放按钮的功能只是播放给定的声音文件，它在任何意义上都是不可控制的。这是我需要改变的。

谢谢你的帮助 ：-）

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

/* this is the DROP function*/

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

/* plays the snippets when they are clicked clicked*/

function playAudio(url) {
  new Audio(url).play();
}

/*Funcn for play button */

function play_music() {
  document.getElementById("music1").play();
}

#empties {
  width: 410px;
  height: 700px;
  margin-left: 10px;
  margin-top: 0px;
  position: absolute;
  top: 10px;
  left: 0px;
  border: 1px solid blue;
}

.box001 {
  width: 410px;
  height: 41px;
  margin: 0px;
  padding: 0px;
  border: 1px solid blue;
}


/* snippets  */

#music {
  width: 410px;
  height: 700px;
  margin-left: 00px;
  margin-top: 0px;
  position: absolute;
  top: 10px;
  left: 450px;
  border: 1px solid red;
}

.box002 {
  width: 410px;
  height: 41px;
  margin: 0px;
  padding: 0px;
  border: 1px solid red;
}


/* play button */

#my_button {
  margin-left: 00px;
  margin-top: 0px;
  /*padding:10px;*/
  /*border:1px solid black;*/
  position: absolute;
  top: 10px;
  left: 880px;
  border: 1px solid red;
}

<!-- music is dropped into these empty boxes -->

<div id="empties">
  <div class="box001" ondrop="drop(event)" ondragover="allowDrop(event)" id="place001"></div>
</div>

<!-- these are the snippets to be dragged and dropped -->

<div id="music">
  <div class="box002" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img onclick="playAudio('neigh.mp3')" ondragstart="drag(event)" draggable="true" id="target001" src="horse.JPG" alt="" border="0" />
  </div>
  <div class="box002" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img onclick="playAudio('moo.mp3')" ondragstart="drag(event)" draggable="true" id="target002" src="cow.JPG" alt="" border="0" />
  </div>
</div>

<!-- Audio for button-->

<audio id="music1" src="neigh.mp3" preload="auto"></audio>

<!-- Button -->

<div id="my_button">
  <button onclick="play_music()" ;>Play</button>
</div>

标签： javascripthtmlaudiodrag-and-drophtml5-audio