<audio> jquery problème avec l'event ended

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : <audio> jquery problème avec l'event ended

niko59480

O_o'

Bonjour à tous,

Je rencontre actuellement un problème pour intercepter l'évennement de fin de lecture de ma balise <audio> avec jQuery.
J'ai vu quelques solutions du genre :

Code :

document.getElementById('player').addEventListener('ended', function(){}, false);

mais le addEventListener me génère une erreur JS...

existe-t-il un équivalent fonctionnel avec jQuery?
j'ai essayé :

Code :

$('#player').bind('ended', function(){});

Code :

$('#player').live('ended', function(){});

mais en vain...

Merci d'avance

niko

Publicité

niko59480

O_o'

un petit up!

j'apporte plus de précision à mon problème au passage :

j'ajoute dorénavant des sources à ma balise audio afin que l'enchainement se fasse tout seul... sauf qu'il ne se fait pas... et le problème lié à cette solution, c'est que dès que l'on ajoute un morceau en lecture, ça recharge la balise et donc le morceau en cours de lecture...

le code du player :

Code :

<div id="lecteur_audio">
<audio controls autoplay id="player">
<source src="" />
</audio>
</div>

ma fonction pour lire un morceau (JS) :

Code :

$('.play').click(function(){
var path=this.nextElementSibling.nextElementSibling.nextElementSibling.innerHTML;
if(path.substr(0,6)!='../../'){path='../'+path;}
// on distingue le nom du path
var _nom=path.substr(path.lastIndexOf('/')+1);
var _path=path.substr(0, path.lastIndexOf(_nom));
//
// création du modèle json, ne sert qu'à l'affichage de la playlist
var _media='{"playlist":[{"n":"'+_nom+'", "p":"'+_path+'"}]}';
$('#stockage').text(_media);
//
// rechargement de la playlist pour l'actualiser
$('#playlist').load('views/playlist.php');
// remise en forme des chemins (gestion d'un problème lié aux espaces)
while(_nom.indexOf("___" )>-1){_nom=_nom.replace("___", " " );}
while(_path.indexOf("___" )>-1){_path=_path.replace("___", " " );}
//
// création du player avec chemin vers le média
/* ancienne solution
var audio = document.createElement('audio');
audio.id="player";
audio.loop=true;
audio.controls=true;
audio.autoplay=true;
var source=document.createElement('source');
console.log(_path+_nom);
source.src=_path+_nom;
audio.appendChild(source);
$('#lecteur_audio').append(audio);
*/
$('#lecteur_audio').html('<audio id="player" controls autoplay><source src="'+_path+_nom+'"></audio>');
});

et ma fonction pour ajouter un morceau à ma playlist :

Code :

$('.add').click(function(){
var path=this.nextElementSibling.nextElementSibling.innerHTML;
if(path.substr(0,6)!='../../'){path='../'+path;}
var _nom=path.substr(path.lastIndexOf('/')+1);
var _path=path.substr(0, path.lastIndexOf(_nom));
// ajouter à l'objet json :
// on récupère l'objet actuel si il y en a un
var json=$('#stockage').text();
var _objet=jQuery.parseJSON(json);
if(_objet!=null){
var _media='{"playlist":[';
var _i=0;
while(_i<_objet.playlist.length){
_media+='{"n":"'+_objet.playlist[_i].n+'", "p":"'+_objet.playlist[_i].p+'"},';
_i++;
}
_media+='{"n":"'+_nom+'", "p":"'+_path+'"}]}';
}
//var _media='{"n":"'+_nom+'", "p":"'+path+'"}';
$('#stockage').text(_media);
$('#playlist').load('views/playlist.php');
// ajout du source pour ce titre au lecteur
//var _source=document.createElement('source');
// remise en forme des chemins
while(_nom.indexOf("___" )>-1){_nom=_nom.replace("___", " " );}
while(_path.indexOf("___" )>-1){_path=_path.replace("___", " " );}
//_source.src=_path+_nom;
//$('#player').children().add(_source);
$('#player').html($('#player').html()+'<source src="'+_path+_nom+'">');
});

je n'ai pas d'autres idées en tête pour palier à mon problème donc j'ai vraiment besoin d'un coup de main (sans mauvais jeu de mots) la dessus svp.

gueuledange

Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c

Quelque chose comme ça:

http://neutroncreations.com/blog/b [...] th-jquery/

?

niko59480

O_o'

Salut gueuledange et merci pour ta réponse.

j'ai donc réessayé avec ton lien

bizarrement, ça fonctionne alors que je n'ai rien changé entre mon premier post et aujourd'hui...
le

Code :

$('#player').bind('ended', function(){});

fonctionne correctement...

merci à toi!

gueuledange

Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c

C'est ton navigateur qui avait garder le vieux code en cache ^^
A+

---------------
No fate but what we make

niko59480

O_o'

je pensais qu'un ctrl+f5 réglait le problème mais apparemment non...

niko59480

O_o'

j'ai toujours un problème sur l'évènement 'ended' de mon player audio...
j'arrive bien à capter l'évènement mais lorsque j'ai plus de 2 chansons dans ma playlist, ça passe de la première à la dernière chanson...
mon code :

Code :

$('#player').bind('ended', function(){
console.log('ended event');
// ça rentre dedans en fin de lecture, il n'y a plus qu'un seul source donc il faut recharger le player avec les infos pour la chanson d'après
// on récupère le morceau qui vient de se finir
var currentSong=$('#player').children()[0].src;
currentSong='../..'+currentSong.substr(currentSong.indexOf('/musique/'));
while(currentSong.indexOf("%20" )>-1){
currentSong=currentSong.replace("%20", "___" );
}
// on ressort la playlist en json
var json=$('#stockage').text();
var _objet=jQuery.parseJSON(json);
if(_objet!=null){
if(_objet.playlist.length>0){
console.log('sup 0');
var _i=0;
var _found='false';
while(_i<_objet.playlist.length){
console.log('loop');
var _song=_objet.playlist[_i].p+_objet.playlist[_i].n;
if(_found=='true'){
console.log('chanson suivante');
while(_song.indexOf("___" )>-1){
_song=_song.replace("___", " " );
}
$('#lecteur_audio').html('
<audio id="player" controls autoplay>
<source src="'+_song+'">
</audio>'
);
//$('#player').children()[0].src=_song; identique à la ligne précédente sauf que la lecture ne se lance pas
return;
}
if(_song==currentSong){
console.log('found');
_found='true';
}
_i++;
}
}
}
});

forme de mon json :

Code :

{"playlist":[
{
"n":"chanson1",
"p":"pathchanson1"
},
{
"n":"chanson2",
"p":"pathchanson2"
},
{
"n":"chanson3",
"p":"pathchanson3"
},
{
"n":"chanson4",
"p":"pathchanson4"
}
]}

et ce qui remonte dans ma console :

Code :

ended event
sup 0
loop
found
loop
chanson suivante
ended event
sup 0
loop
loop
found
loop
chanson suivante
ended event
sup 0
loop
loop
loop
found
loop
chanson suivante
ended event
sup 0
loop
loop
loop
loop
found

donc en gros, c'est comme s'il y avait une boucle autour de ma fonction qui s'arrêterait au dernier élément de ma playlist... et la je sèche complètement...

FORUM HardWare.fr

Programmation

HTML/CSS

<audio> jquery problème avec l'event ended

Sujets relatifs
Probleme de Compilation (switch)	Problème de CSS
probleme aspell : anglais mis de force meme avec set_option(...)	Problème de démarrage de Apache Mysql
[resolu] comment récupérer le contenu d'un json avec jquery	[RESOLU][c++] probleme de syntaxe dans un héritage
Probleme Java + Telnet + Active Directory	Python + Qt + OpenCV = problème :/
Création d'un livre d'or en PHP : problème de débutant...
Plus de sujets relatifs à : <audio> jquery problème avec l'event ended

Page générée en 0.111 secondes