Home/ Questions/Q 8319523
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T22:21:13+00:00

This is my code for playing a html5 audio (which doesn’t work) $(‘img.play_media’).bind(‘click’,function(){ src=$(this).attr(id);

  • 0

This is my code for playing a html5 audio (which doesn’t work)

$('img.play_media').bind('click',function(){
src=$(this).attr("id");                     $('audio[id=resource_audio]').children('source').attr("src","testuser/resources/"+src);
var audio= document.getElementById('resource_audio');
audio.play();
return false;
});

<audio id="resource_audio" >
<source src="" type="audio/mp3" />
</audio>

As you can see, I am trying to get the src on img click ,which is set to the image id and in opera I can see the play starting. But, the audio doesn’t play. Any help is appreciated.
Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Please provide the HTML for the img. I’ve cleaned up your code a bit, but probably won’t help with your problem:

    $('img.play_media').click(function(event){
  $("#resource_audio")
    .attr("src","testuser/resources/"+this.id)
    .get(0).play();
});

<audio id="resource_audio">
  Your browser does not support the <code>audio</code> element.
</audio>
    • Note: make sure of two things: a) the audio file is actually at the correct location, b) the web server is configured to serve (respond) with the correct MIME-type.

    You may also want to look at https://developer.mozilla.org/en/HTML/Element/audio.

    <html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <h1>Heading</h1>
    <div id="doc">
        <img class="play_media" id="test.mp3" src="status-on.png" style="width:15px;margin-right:0%;" > 
        <audio id="resource_audio">
          Your browser does not support the <code>audio</code> element.
        </audio>
    </div>
    <script>
    $('img.play_media').click(function(event){
      $("#resource_audio")
        .attr("src",this.id)
        .get(0).play();
    });
    </script>
</body>
</html>
    • 0