Advanced Search

Play an Audio File with the HTML Audio Tag

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

Expand | Embed | Plain Text

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.