A Symphony Of Sound, Gone Mobile

  • Working With Sound On Mobile
  • Synchronizing Sounds Across Devices

<audio>

  if ( typeof window.Audio !== 'undefined' ) {
    // create new Audio Node
    var canHasSound = new Audio();
    
    // set source file, then load
    canHasSound.src = "My_Amazing_Tunes.mp3";
    canHasSound.load();

//...

    // PLAY!!!!
    canHasSound.play();
  }
      

Y NO PLAY?

<audio>

Dependning On Device / OS
  • Loading Sound Requires User Input / Action
  • Playing Sound Requires User Input / Action

SOLUTION?

<audio>

    
...
    // set source file, then load
    canHasSound.src = "My_Amazing_Tunes.mp3";
    
    
    canHasSound.autobuffer = true;
    canHasSound.preload = 'auto';
    
    
    canHasSound.load();

    
    window.addEventListener( 'touchstart' , _initialPlay , false );
    window.addEventListener( 'play' , _focePause , false );
    
...
      

Web Audio API FTW... ?

Web Audio API

Current Support

Description

Web Audio API

var context = new AudioContext();

function playSound( buffer ) {
  // creates a sound source
  var source = context.createBufferSource();
  // tell the source which sound to play
  source.buffer = buffer;
  // connect the source to the context's destination (the speakers)
  source.connect(context.destination);    
  // play the source now   
  source.start(0);                           
}
        

Web Audio API

IOS and Android ( Chrome ) requires User Input / Action

  
    
    window.addEventListener( 'touchstart' , _initialPlay , false );
    window.addEventListener( 'play' , _focePause , false );
    
      

Synchronizing Sounds

Latency

Latency is a measure of time delay experienced in a system.
- Wikipedia

Synchronizing Sounds

Calculate Latency



      // request sent to server with timestamp and returned
      // with original time and server timestamp

      responseReceived = new Date.getTime();

      serverTime = objTimes.server;
      original = objTimes.original;

      // check time taken for entire request
      latency = Math.round( ( responseReceived - original ) * 0.5 );

      responseReceived -= latency;

    

Latecy is constantly changing

Use the Mean latency

Latency

Apply the Latency


To Cater for the various devices and the latency on each, using WebSockets we push the time required and factor in latency

      
        // add the latency to the start time for the given track
        _startTime = data.startTime + getMean( arrLateny )
      
      

Audio responsiveness differs

Recap

  • User needs to initiate load and playback with <audio>
  • use preload attribute with <audio>
  • User needs to initiate playback using Web Audio API
  • Latency Is Always changing
  • Use UCT Time stamps to cater for different time zones
  • Use mean latency
  • Factor latency in when scheduling start time for audio
  • Some sounds allow for minor difference in timing

Links And Resources

<Thank You!>

Questions