jQuery Girl
  1. jQuery Girl
  3. comment détecter la fin du fichier audio en utilisant jquery et html5
Intereting Posts
Sélectionnez le contexte du cadre avec javascript La modification d’un espace réservé déclenche un événement d’entrée dans IE 10 HTML, jQuery: Lie la largeur d’un élément à un autre Jquery autocomplete avec iScroll Comment append une zone de texte à une ligne d’un tableau avec jQuery? Concaténer une chaîne avec l’opérateur ternaire en javascript ASP.NET: problème de parameters ‘données’ de jQuery AJAX JSON formatter lib Tirez le script jQuery lorsque la publication a lieu Modification de la visibilité masquée et appel de fadeIn () lorsqu’un événement de clic survient Interface utilisateur JQuery DateTimePicker: nombre total de jours entre deux datetimepickers levant jquery deferred.then () une fois que tous les objects différés ont été résolus obtenir la valeur actuelle de @keyframe en css3 avec javascript Le clavier virtuel Jquery Mobile 1.4.5 de l’appareil masque les entrées de formulaire en bas de la page. Bootstrap Dual Listbox: Comment limiter l’option sélectionnée

comment détecter la fin du fichier audio en utilisant jquery et html5

J’ai ce code jquery et html au travail pour un site de formation en anglais 

$(document).ready(function() { $("p").hover( function() { $(this).css({"color": "purple", "font-weight" : "bolder"}); }, function() { $(this).css({"color": "black", "font-weight" : ""}); } ); $("p").click(function (event) { var element = $(this); var elementID = event.target.id; var oggVar = (elementID +".ogg"); var audioElement = document.createElement('audio'); audioElement.setAtsortingbute('src', oggVar); audioElement.load(); audioElement.addEventListener("load", function() { audioElement.play(); }, true); audioElement.play(); }); }); 
 
 this is the first paragraph
 .... 
 this is the fourth paragraph
 ....

le problème est que si un texte est cliqué pendant la lecture (ou le double-clic) d’un fichier audio, le deuxième fichier (ou le même fichier) commence à être lu. Je me retrouve donc avec deux fichiers en cours de lecture simultanément. J’ai besoin d’empêcher cela. Je pense que l’événement ‘terminé’ est pertinent mais, malgré quelques exemples, je ne vois pas trop comment détecter si un fichier est en cours de lecture et attendre jusqu’à la fin avant de permettre à un second fichier de démarrer (voire même d’empêcher sa lecture). du tout). Toute aide serait très appréciée 🙂

Vous pouvez append des écouteurs d’événements pour les événements terminés et en cours de lecture . Aussi, pourquoi créer une balise audio via javascript? Je voudrais juste créer une balise audio cachée vide:

Vous avez deux options:

  • désactiver / activer le bouton / lien lorsque l’audio est en lecture / arrêté (préféré à mon humble avis)
  • ignorer les clics lorsque vous jouez déjà

Ajoutez ensuite deux eventlisteners: 

 var playing = false; $('#myAudio').on('playing', function() { playing = true; // disable button/link }); $('#myAudio').on('ended', function() { playing = false; // enable button/link }); $("p").click(function (event) { if(!playing) { var element = $(this); var elementID = event.target.id; var oggVar = (elementID +".ogg"); var audioElement = $('#myAudio')[0]; audioElement.setAtsortingbute('src', oggVar); audioElement.play(); } }); 
  ***var audioElement = null;*** $("p").click(function (event) { ***if (audioElement) { audioElement.pause(); }*** var element = $(this); var elementID = event.target.id; var oggVar = (elementID +".ogg"); audioElement = document.createElement('audio'); audioElement.setAtsortingbute('src', oggVar); audioElement.load(); audioElement.addEventListener("load", function() { audioElement.play(); }, true); audioElement.play(); });