Home/ Questions/Q 8919421
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T06:01:17+00:00

Friends, I’m basically trying to build a simple audio player that grabs the id

  • 0

Friends,

I’m basically trying to build a simple audio player that grabs the id of the image clicked and plays the corresponding audio file. Here’s where I’m at… with no luck.

I have been trying to find an elegant way to do this for hours and would be most grateful for some help!

Thanks!

<script type="text/javascript"> 
$(function() {
    $(".playback").click(function(){
        var selectedAudio = $(this).attr("id");
        var myAudio = document.getElementById(selectedAudio);
        myAudio.play();
});
</script>


<body>
    <audio id="boardroom" preload="auto"><source src="boardroom.mp3" type="audio/mpeg" /></audio>
    <audio id="bathroom" preload="auto"><source src="bathroom.mp3" type="audio/mpeg" /></audio>
    <audio id="livingroom" preload="auto"><source src="livingroom.mp3" type="audio/mpeg" /></audio>

    <img class="playback" id="boardroom" src="images/audio.png">


</body
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    2 things.

    1. Never, ever, use the same id on more than one element in your document. They are supposed to be unique, and bad stuff can happen when they are not unique. In your case, your image and your audio element share the same id, this is BAD. How will document.getElementById know which element to find if more than one share an ID? You need to make them different, though you can still use one to find the other. <img id="somename"> and <audio id="somename-audio">, for instance.

    2. The audio source in your fiddle didn’t point to an audio file. It pointed to a webpage about the audio file. I fixed the link to point to the actual audio file.

    Working version: http://jsfiddle.net/Pzsax/2/

    Html:

    <audio id="cello-audio" preload="auto">
    <source src="http://upload.wikimedia.org/wikipedia/commons/4/43/JOHN_MICHEL_CELLO-J_S_BACH_CELLO_SUITE_1_in_G_Prelude.ogg" type="audio/mpeg" />
</audio>

<img class="playback" id="cello" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Sound-icon.svg/50px-Sound-icon.svg.png">​

    JS:

    $(".playback").click(function() {
    var selectedAudio = $(this).attr("id");
    var myAudio = document.getElementById(selectedAudio + "-audio");
    myAudio.play();
});​

    Or since you seem to be using jQuery, that could simply be:

    $(".playback").click(function() {
    var selectedAudio = $(this).attr("id");
    var myAudio = $('#' + selectedAudio + "-audio");
    myAudio.play();
});​

    Lastly, rather than relying on id’s to pass arund meaningful data, perhaps data attributes might be a cleaner approach, allowing you to encode bits of data, like names of sounds, in the buttons that play them.

    • 0