Problem with html5 audio and javascript manipulation

Question

I'm trying to manipulate an audio file (mp3), using <audio> and javascript but nothing happens when I click the link. The alert() is working but nothing happens with the audio i.e. no pause, no play, nothing..., whether in Safari or Firefox. Is the coding dodgy or what?

Check this out:

jQuery/javascript:

$(document).ready( function(){

  var audioElement = document.getElementById('audio_player');

  $('div.audioControls .play').live('click', function(){
    //alert('play');
    audioElement.play();
  });
  $('div.audioControls .pause').live('click', function(){
    //alert('pause');
    audioElement.pause();
  });
  $('div.audioControls .playatTime').live('click', function(){
    alert('play at time: 30 sec');
    audioElement.currentTime = 30;
    audioElement.play();
    return false;
  });

});

HTML:

<audio id="audio_player" controls="controls" src="aaliyah.mp3">
Your browser does not support the audio element.
</audio>

<div class="audioControls">
<a href="#" class="play buttons" style="border:1px solid #ccc;">play</a>
<a href="#" class="pause buttons" style="border:1px solid #ccc;">pause</a>
<a href="#" class="playatTime buttons" style="border:1px solid #ccc;">play at 35   secondes</a>
</div>

Thanks!

Answer 1

I now know why, it didn't work. To make use of the javascript API, the controls attributes needs to be removed from the html tag itself and it should work.

Thanks