Cette méthode fonctionne:
audio.pause();
audio.currentTime = 0;
Mais si vous ne voulez pas avoir à écrire ces deux lignes de code chaque fois que vous arrêtez un audio, vous pouvez faire l'une des deux choses. Je pense que le second est le plus approprié et je ne sais pas pourquoi les "dieux des standards javascript" n'ont pas fait ce standard.
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 (privilégié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 objets audio:
audio.stop();
ENFIN PROBLÈME CHROME 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 un écouteur d'événement «canplaythrough» est attaché, vous déclencherez à nouveau cet événement, ce qui peut conduire à des résultats indésirables.
Ainsi, la solution, similaire à tous les cas où vous avez attaché un écouteur d'événement dont vous voulez vraiment vous assurer qu'il ne se déclenche pas à nouveau, est de 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 ajouter encore plus de méthodes personnalisées à la classe Audio (ou à toute classe JavaScript native d'ailleurs).
Par exemple, si vous vouliez une méthode de "redémarrage" qui redémarrait l'audio, cela pourrait ressembler à quelque chose comme:
Audio.prototype.restart= function() {
this.pause();
this.currentTime = 0;
this.play();
};