选择图像并通过使用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()">

i have multiple images in my code a and every image has its respective audio what i want to do is i want to select the image and on clicking the button i want to play the audio against that particular image .all this i want to do using javascript and html . so can any one help me javascript part?

Answer 1

Just add this and it should work:

<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

You can do something like this using data attributes: 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

Here is a jsfiddle that should put you in the right direction:

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>

This allows you to click the image, and its id will be printed in the console (option+cmd+j on chrome+mac). So if you have the id of the object being clicked (or selected), the select() functions really just need to pass on this id to the function that handles playback. If you have an audio file mapped to each image, you can select the audio file for playback based on the image id.