Best Practices

The following "best practices" help ensure success when implementing this SDK.

Bind Your JS Code to TD SDK Events

On Mobile devices where the listener may be on a cellular network and charged per data unit, HTML5 audio streaming requires a user initiated action (onmousedown, onmouseup, onclick, or ontouchstart) to start playing. No data is loaded until the user initiates it.

Moreover, no HTTP calls can be made between the user action and the audio playback. You have to take this limitation into account. If not, an error message will be displayed in the Web console.

For example, if multiple synchronous XHR* requests (analytics, trackers, others) are sent between a user gesture and the stream playback, this error will be displayed in the Web console:

"Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture"

How to Avoid This Error

Attach handlers to TD SDK events. By attaching handlers to TD SDK events, you avoid that your specific XHR requests interfere with the user gesture requirement on mobile (iOS, Android).

Example:

/** Attach handlers to TD Player SDK events **/
 player.addEventListener( 'stream-start', onStreamStart );
 player.addEventListener( 'stream-fail', onStreamFail );
 player.addEventListener( 'stream-error', onStreamError );
  
 function onStreamStart( event )
 {
    //YOUR XHR REQUEST SENT HERE
 }
 
 function onStreamFail( event )
 {
    //YOUR XHR REQUEST SENT HERE
 }
 
 function onStreamError( event )
 {
    //YOUR XHR REQUEST SENT HERE
 }

* XMLHttpRequest : https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest