CODEWITHSUNDEEP
html5-audio
Shaoz
Shaoz

Reputation: 10653

Problem with html5 audio and javascript manipulation

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!

Upvotes: 0

Views: 909

Answers (1)

Shaoz
Shaoz

Reputation: 10653

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

Upvotes: 1

Related Questions