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

<audio> jquery problème avec l'event ended - HTML/CSS - Programmation

Marsh Posté le 03-11-2011 à 11:09:47    

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 :
  1. 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 :
  1. $('#player').bind('ended', function(){});


et

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


mais en vain...
 
Merci d'avance
 
niko

Reply

Marsh Posté le 03-11-2011 à 11:09:47   

Reply

Marsh Posté le 07-11-2011 à 11:39:48    

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 :
  1. <div id="lecteur_audio">
  2.             <audio controls autoplay id="player">
  3.                 <source src="" />
  4.             </audio>
  5. </div>


 
ma fonction pour lire un morceau (JS) :  

Code :
  1. $('.play').click(function(){
  2.                     var path=this.nextElementSibling.nextElementSibling.nextElementSibling.innerHTML;
  3.                     if(path.substr(0,6)!='../../'){path='../'+path;}
  4.                     // on distingue le nom du path
  5.                     var _nom=path.substr(path.lastIndexOf('/')+1);
  6.                     var _path=path.substr(0, path.lastIndexOf(_nom));
  7.                     //
  8.                     // création du modèle json, ne sert qu'à l'affichage de la playlist
  9.                     var _media='{"playlist":[{"n":"'+_nom+'", "p":"'+_path+'"}]}';
  10.                     $('#stockage').text(_media);
  11.                     //
  12.                     // rechargement de la playlist pour l'actualiser
  13.                     $('#playlist').load('views/playlist.php');
  14.                     // remise en forme des chemins (gestion d'un problème lié aux espaces)
  15.                     while(_nom.indexOf("___" )>-1){_nom=_nom.replace("___", " " );}
  16.                     while(_path.indexOf("___" )>-1){_path=_path.replace("___", " " );}
  17.                     //
  18.                     // création du player avec chemin vers le média
  19.                     /* ancienne solution
  20.                     var audio = document.createElement('audio');
  21.                     audio.id="player";
  22.                     audio.loop=true;
  23.                     audio.controls=true;
  24.                     audio.autoplay=true;
  25.                     var source=document.createElement('source');
  26.                     console.log(_path+_nom);
  27.                     source.src=_path+_nom;
  28.                     audio.appendChild(source);
  29.                     $('#lecteur_audio').append(audio);
  30.                     */
  31.                     $('#lecteur_audio').html('<audio id="player" controls autoplay><source src="'+_path+_nom+'"></audio>');
  32.                 });


 
et ma fonction pour ajouter un morceau à ma playlist :  

Code :
  1. $('.add').click(function(){
  2.                     var path=this.nextElementSibling.nextElementSibling.innerHTML;
  3.                     if(path.substr(0,6)!='../../'){path='../'+path;}
  4.                     var _nom=path.substr(path.lastIndexOf('/')+1);
  5.                     var _path=path.substr(0, path.lastIndexOf(_nom));
  6.                     // ajouter à l'objet json :
  7.                     // on récupère l'objet actuel si il y en a un
  8.                     var json=$('#stockage').text();
  9.                     var _objet=jQuery.parseJSON(json);
  10.                     if(_objet!=null){
  11.                         var _media='{"playlist":[';
  12.                         var _i=0;
  13.                         while(_i<_objet.playlist.length){
  14.                             _media+='{"n":"'+_objet.playlist[_i].n+'", "p":"'+_objet.playlist[_i].p+'"},';
  15.                             _i++;
  16.                         }
  17.                         _media+='{"n":"'+_nom+'", "p":"'+_path+'"}]}';
  18.                     }
  19.                     //var _media='{"n":"'+_nom+'", "p":"'+path+'"}';
  20.                     $('#stockage').text(_media);
  21.                     $('#playlist').load('views/playlist.php');
  22.                    
  23.                     // ajout du source pour ce titre au lecteur
  24.                     //var _source=document.createElement('source');
  25.                     // remise en forme des chemins
  26.                     while(_nom.indexOf("___" )>-1){_nom=_nom.replace("___", " " );}
  27.                     while(_path.indexOf("___" )>-1){_path=_path.replace("___", " " );}
  28.                     //_source.src=_path+_nom;
  29.                     //$('#player').children().add(_source);
  31.                     $('#player').html($('#player').html()+'<source src="'+_path+_nom+'">');
  32.                 });


 
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.

Reply

Marsh Posté le 08-11-2011 à 22:06:40    

Reply

Marsh Posté le 10-11-2011 à 16:59:42    

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 :
  1. $('#player').bind('ended', function(){});


fonctionne correctement...
 
merci à toi!

Reply

Marsh Posté le 11-11-2011 à 13:21:18    

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


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

Marsh Posté le 14-11-2011 à 10:47:54    

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

Reply

Marsh Posté le 14-11-2011 à 12:03:57    

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 :
  1. $('#player').bind('ended', function(){
  2.    console.log('ended event');
  3.    // ç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
  4.    // on récupère le morceau qui vient de se finir
  5.    var currentSong=$('#player').children()[0].src;
  6.    currentSong='../..'+currentSong.substr(currentSong.indexOf('/musique/'));
  7.    while(currentSong.indexOf("%20" )>-1){
  8.       currentSong=currentSong.replace("%20", "___" );
  9.    }
  10.    // on ressort la playlist en json
  11.    var json=$('#stockage').text();
  12.    var _objet=jQuery.parseJSON(json);
  13.    if(_objet!=null){
  14.       if(_objet.playlist.length>0){
  15.          console.log('sup 0');
  16.          var _i=0;
  17.          var _found='false';
  18.          while(_i<_objet.playlist.length){
  19.             console.log('loop');
  20.             var _song=_objet.playlist[_i].p+_objet.playlist[_i].n;
  21.             if(_found=='true'){
  22.                console.log('chanson suivante');
  23.                while(_song.indexOf("___" )>-1){
  24.                   _song=_song.replace("___", " " );
  25.                }
  26.                $('#lecteur_audio').html('
  27.                   <audio id="player" controls autoplay>
  28.                      <source src="'+_song+'">
  29.                   </audio>'
  30.                );
  31.                //$('#player').children()[0].src=_song; identique à la ligne précédente sauf que la lecture ne se lance pas
  32.                return;
  33.             }
  34.             if(_song==currentSong){
  35.                console.log('found');
  36.                _found='true';
  37.             }
  38.             _i++;
  39.          }
  40.       }
  41.    }
  42. });


 
forme de mon json :  

Code :
  1. {"playlist":[
  2.    {
  3.       "n":"chanson1",
  4.       "p":"pathchanson1"
  5.    },
  6.    {
  7.       "n":"chanson2",
  8.       "p":"pathchanson2"
  9.    },
  10.    {
  11.       "n":"chanson3",
  12.       "p":"pathchanson3"
  13.    },
  14.    {
  15.       "n":"chanson4",
  16.       "p":"pathchanson4"
  17.    }
  18. ]}


 
et ce qui remonte dans ma console :  

Code :
  1. ended event
  2. sup 0
  3. loop
  4. found
  5. loop
  6. chanson suivante
  7. ended event
  8. sup 0
  9. loop
  10. loop
  11. found
  12. loop
  13. chanson suivante
  14. ended event
  15. sup 0
  16. loop
  17. loop
  18. loop
  19. found
  20. loop
  21. chanson suivante
  22. ended event
  23. sup 0
  24. loop
  25. loop
  26. loop
  27. loop
  28. 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...

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed