PDA

View Full Version : Audio tag



qbert65536
21 Sep 2010, 12:31 PM
Is there a way to tell when the audio stops playing ? I'm trying to build a mp3 player and need to load the next song when the current one is finished.

evant
21 Sep 2010, 3:52 PM
https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox#Media_events

qbert65536
4 Oct 2010, 12:23 PM
And how would I attach listeners for those ? Nothing I try seems to work.

evant
4 Oct 2010, 3:53 PM
The underlying element of the component is the audio tag, so:



new Ext.Audio({
listeners: {
afterrender: function(c){
c.el.on('.....');
}
}
});

qbert65536
4 Oct 2010, 4:53 PM
Hmm, yes this is what I was trying, but using the above code I'm still not able to catch any events:


new Ext.Audio({
url: 'crash.mp3',
listeners: {
afterrender: function(c) {
alert('rendered');
c.el.on('pause', function () { alert('paused') } );
}
}
})

The rendered alert get's displayed, but the paused never happens . Is there a difference for listening for DOM events and Component events ? I'm using Chrome Beta 7.0.517.24 beta, is there another browser I should try it with ?

I'm also not getting any errors or warnings, just nothing happening.

evant
4 Oct 2010, 5:11 PM
Ah, wrong property:



Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
new Ext.Audio({
url: 'crash.mp3',
loop: true,
showControls: true,
listeners: {
afterrender: function(c){
c.media.on('play', function(){
alert('play');
});
}
}
}).show();

}
});

qbert65536
4 Oct 2010, 5:46 PM
Works thanks :).

This is twice this has happened actually, attaching listeners to the wrong class. How do I know which class to attach listeners to ?

william-wang
16 Dec 2011, 12:18 AM
What wrong property? What makes this work but previous code doesn't?

Any change if we were to use the sencha touch 2 api?


Ah, wrong property:



Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
new Ext.Audio({
url: 'crash.mp3',
loop: true,
showControls: true,
listeners: {
afterrender: function(c){
c.media.on('play', function(){
alert('play');
});
}
}
}).show();

}
});