Add Event Listeners to "Play" and Other Media Events Using Sencha Touch

Recently, I was working on a side-project that involved allowing the user to press play and listen to a sample track from a list of tracks on their iPhone. ‘While this functionality works great when the user is on WiFi, the delay between pressing “Play” and hearing the song on a 3G connection makes the application feel sluggish and non-responsive. My first idea was to add an event listener to the play event (or something similar) and show / hide some sort of loading message when the user selects “play”. Unfortunately, the Sencha Touch API doesn’t support any such event. However, there is a way around this.

If you dig within the source code, you’ll notice that, whenever you declare and render a new Audio object, an <audio> tag is applied to the current HTML page. Native HTML objects like

// This would be inside of an 'itemtap' event listener method
...
myAudio = new Ext.Audio({
    id: 'audioPreview',
    hidden: true,
    url: audioURL,
    renderTo: Ext.getBody(),
    listeners: {
        canplay: {
            element: 'media',
            fn: function() {
                audioLoadMask.hide();
            }
        }
    }
});
Envato.AudioJungle.Previewer.audioPreview.play()
audioLoadMask.show();
...

What we’re doing here is pretty straight-forward. The part to pay attention to is line 10, the element property. Much like the how the scope property of other config objects lets us change the this or self reference of a method call, the element property lets us change what element the event listener is paying attention to. In this case, media lets us access the native HTML5 <audio> tag, and listen for the canplay event. Once the event fires, the LoadMask is hidden.

Hopefully, this helps you out as much as it did me. Feel free to post a comment with any questions you might have.