选择图像并通过使用html和javascript单击按钮来播放音频

Question

<audio id="audio1" src="a.wav"></audio>
<audio id="audio2" src="b.wav"></audio>

<img id="img1" src="a.png" alt=""  onselect="select()"  />
 <img id="img2" src="a.png" alt=""  onselect="select()"  />  

<input type="button"  onclick="play()">

我在代码a中有多个图像，并且每个图像都有其各自的音频，我要选择的是图像，然后单击按钮，我要针对该特定图像播放音频。 javascript和html。 所以有人可以帮助我javascript部分吗？

Answer 1

只需添加它，它应该可以工作：

<img id="img1" src="a.png" alt=""  onclick="select(this.id)"  />
 <img id="img2" src="a.png" alt=""  onclick="select(this.id)"  />  

<script>
  function select(num){
       var x = num.match('/\d+/');
       var audio = document.getElementById("audio"+x);
       audio.play();
                 }
</script>

Answer 2

您可以使用数据属性执行以下操作： http : //jsfiddle.net/bostdgvp/

JS：

var selectedImage;

function select(image) {
    var images = document.querySelectorAll('img');
    var index = 0, length = images.length;
    for (; index < length; index++) {
        images[index].classList.remove('selected');
    }
    selectedImage = image.id;
    image.classList.add('selected');
}

function playAudio() {
    if (!selectedImage) {
        alert('no image selected')
    }
    var image = document.getElementById(selectedImage);
    var audioId = image.getAttribute('data-audio')
    var audioElement = document.getElementById(audioId);
    audioElement.play();
}

HTML：

<audio id="audio1" src="@Url.Content(item.Letter_Record)"></audio>
<audio id="audio2" src="@Url.Content(item.Letter_Record)"></audio>
<img id="img1" data-audio="audio1" src="http://placehold.it/350x150" alt="" onclick="select(this)" />
<img id="img2" data-audio="audio2" src="http://placehold.it/200x100" alt="" onclick="select(this)" />
<input type="button" value="play" onclick="playAudio()">

CSS：

.selected {
    border: 1px solid red;
}

Answer 3

这是一个jsfiddle，它可以帮助您朝正确的方向发展：

http://jsfiddle.net/knopch/31oasnee/

<img id="img1" src="a.png" alt=""  onclick="select(this.id)"  />
<img id="img2" src="a.png" alt=""  onclick="select(this.id)"  />  

<script>
    function select(id){
      console.log(id);
      //play(id);
    }
</script>

这使您可以单击图像，并且其ID将被打印在控制台中（在chrome + mac上为option + cmd + j）。 因此，如果您具有要单击（或选中）的对象的ID，则select（）函数实际上只需要将此ID传递给处理播放的函数。 如果您有一个音频文件映射到每个图像，则可以根据图像ID选择要播放的音频文件。