Play an Audio File with the HTML Audio Tag


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. $( '#translate' ).bind( 'touchstart', function( e ) {
  2. var phrases = [
  3. '1-great-presentation.mp3',
  4. '2-really-liked.mp3',
  5. '3-really-amazing.mp3',
  6. '4-dirty-thoughts.mp3',
  7. '5-have-baby.mp3'
  8. ];
  9.  
  10. $( '#response' ).empty();
  11. $( '<source>' )
  12. .attr( 'src', 'phrases/' + phrases[phrase] )
  13. .appendTo( '#response' );
  14. loaded = 0;
  15. document.getElementById( 'response' ).load();
  16.  
  17. if( phrase == 4 )
  18. {
  19. phrase = 0;
  20. } else {
  21. phrase = phrase + 1;
  22. }
  23. } );
  24.  
  25. $( '#response' ).bind( 'progress', function( e ) {
  26. var audio = document.getElementById( 'response' );
  27. var duration = audio.duration;
  28. var end = audio.buffered.end( 0 );
  29.  
  30. // Progress gets fired twice
  31. // Only want to play once
  32. if( loaded < 100 )
  33. {
  34. loaded = parseInt( ( ( end / duration ) * 100 ) )
  35. // console.log( loaded );
  36.  
  37. if( loaded == 100 )
  38. {
  39. document.getElementById( 'response' ).play();
  40. }
  41. }
  42. } );

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.