Fonction d’arrêt audio HTML5

au lieu de stop() vous pouvez essayer avec:

 sound.pause(); sound.currentTime = 0; 

cela devrait avoir l’effet désiré

vous devez d’abord définir un identifiant pour votre élément audio

dans vos js:

var ply = document.getElementById('player');

var oldSrc = ply.src; // juste pour se souvenir de l’ancienne source

ply.src = ""; // pour arrêter le joueur, vous devez remplacer la source par rien

Voici ma façon de faire la méthode stop ():

Quelque part dans le code:

 audioCh1: document.createElement("audio"); 

et puis en stop ():

 this.audioCh1.pause() this.audioCh1.src = 'data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAVFYAAFRWAAABAAgAZGF0YQAAAAA='; 

De cette façon, nous ne produisons pas de demande supplémentaire, l’ancienne est annulée et notre élément audio est à l’état propre (testé dans Chrome et FF):>

De ma propre fonction javascript pour basculer Play / Pause – puisque je gère un stream radio, je voulais qu’elle efface le tampon afin que l’auditeur ne finisse pas par se désynchroniser avec la station de radio.

 function playStream() { var player = document.getElementById('player'); (player.paused == true) ? toggle(0) : toggle(1); } function toggle(state) { var player = document.getElementById('player'); var link = document.getElementById('radio-link'); var src = "http://192.81.248.91:8159/;"; switch(state) { case 0: player.src = src; player.load(); player.play(); link.innerHTML = 'Pause'; player_state = 1; break; case 1: player.pause(); player.currentTime = 0; player.src = ''; link.innerHTML = 'Play'; player_state = 0; break; } } 

Il s’avère que le simple fait de désactiver le currentTime ne le coupe pas sous Chrome, il faut aussi effacer le source et le recharger. J’espère que cela vous aidera.

Cette méthode fonctionne:

 audio.pause(); audio.currentTime = 0; 

Mais si vous ne voulez pas écrire ces deux lignes de code chaque fois que vous arrêtez un audio, vous pouvez faire l’une des deux choses suivantes. La seconde, je pense, est la plus appropriée et je ne suis pas sûr de savoir pourquoi les “dieux des normes javascript” n’ont pas défini cette norme.

Première méthode: créer une fonction et passer l’audio

 function stopAudio(audio) { audio.pause(); audio.currentTime = 0; } //then using it: stopAudio(audio); 

Deuxième méthode (favorisée): étendre la classe Audio:

 Audio.prototype.stop = function() { this.pause(); this.currentTime = 0; }; 

J’ai ceci dans un fichier javascript que j’ai appelé “AudioPlus.js” que j’inclus dans mon HTML avant tout script qui traitera de l’audio.

Ensuite, vous pouvez appeler la fonction d’arrêt sur les objects audio:

 audio.stop(); 

FINALEMENT CHROME NUMÉRO AVEC “canplaythrough”:

Je n’ai pas testé cela dans tous les navigateurs, mais c’est un problème que j’ai rencontré dans Chrome. Si vous essayez de définir currentTime sur un audio auquel est associé un écouteur d’événement “canplaythrough”, vous déclenchez à nouveau cet événement, ce qui peut entraîner des résultats indésirables.

Ainsi, la solution, similaire à tous les cas où vous avez attaché un écouteur d’événement que vous voulez vraiment que ce ne soit pas à nouveau déclenché, consiste à supprimer l’écouteur d’événement après le premier appel. Quelque chose comme ça:

 //note using jquery to attach the event. You can use plain javascript as well of course. $(audio).on("canplaythrough", function() { $(this).off("canplaythrough"); // rest of the code ... }); 

PRIME:

Notez que vous pouvez append encore plus de méthodes personnalisées à la classe Audio (ou à toute classe javascript native).

Par exemple, si vous voulez une méthode “redémarrer” qui redémarre l’audio, cela peut ressembler à:

 Audio.prototype.restart= function() { this.pause(); this.currentTime = 0; this.play(); }; 

En guise de note et parce que j’utilisais récemment la méthode d’arrêt fournie dans la réponse acceptée, selon ce lien:

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

En définissant currentTime manuellement, on peut déclencher l’événement ‘canplaythrough’ sur l’élément audio. Dans le lien, il mentionne Firefox, mais j’ai rencontré cet événement après avoir défini currentTime manuellement sur Chrome. Donc, si vous avez un comportement lié à cet événement, vous pourriez vous retrouver dans une boucle audio.

shamangeorge a écrit:

En définissant currentTime manuellement, on peut déclencher l’événement ‘canplaythrough’ sur l’élément audio.

C’est en effet ce qui va se passer et la pause déclenchera également l’événement de pause , ce qui rend cette technique impropre à l’utilisation comme méthode “d’arrêt”. De plus, si vous configurez src comme suggéré par zaki, le lecteur essaiera de charger l’URL de la page en cours en tant que fichier multimédia (et échouera) si la autoplay est activée – la définition de src sur null n’est pas autorisée. il sera toujours traité comme une URL. En dehors de la destruction de l’object du lecteur, il ne semble pas y avoir de moyen de fournir une méthode «stop», alors je suggère de laisser tomber le bouton d’arrêt dédié et de fournir une pause et de revenir sur les boutons. .

J’avais le même problème. Un arrêt devrait arrêter le stream et commencer à vivre si c’est une radio. Toutes les solutions que j’ai vues avaient un inconvénient :

• player.currentTime = 0 continue à télécharger le stream.
• player.src = '' error événement d’ error

Ma solution:

 var player = document.getElementById('radio'); player.pause(); player.src = player.src; 

Et le HTML

Cette approche est la “force brute”, mais cela fonctionne en supposant que l’utilisation de jQuery est “autorisée”. Entourez vos balises “lecteur” avec un div (ici avec un identifiant “plHolder”).

Ensuite, ce javascript devrait fonctionner:

 function stopAudio() { var savePlayer = $('#plHolder').html(); // Save player code $('#player').remove(); // Remove player from DOM $('#FlHolder').html(savePlayer); // Restore it } 

Je crois qu’il serait bon de vérifier si le son est actif et de réinitialiser la propriété currentTime.

 if (sound.currentTime !== 0 && (sound.currentTime > 0 && sound.currentTime < sound.duration) { sound.currentTime = 0; } sound.play(); 

pour moi ce code fonctionne bien. (IE10 +)

 var Wmp = document.getElementById("MediaPlayer"); Wmp.controls.stop();  

J’espère que cette aide

Ce que j’aime faire, c’est supprimer complètement le contrôle en utilisant Angular2, puis il est rechargé lorsque le morceau suivant a un chemin audio:

Alors quand je veux le décharger dans le code je fais ceci:

 this.song = Object.assign({},this.song,{audio_path: null}); 

Lorsque la chanson suivante est assignée, le contrôle est complètement recréé à partir de zéro:

 this.song = this.songOnDeck; 

Le moyen le plus simple de contourner cette erreur est de détecter l’erreur.

audioElement.play () renvoie une promesse, donc le code suivant avec un .catch () devrait suffire à gérer ce problème:

 function playSound(sound) { sfx.pause(); sfx.currentTime = 0; sfx.src = sound; sfx.play().catch(e => e); }