web-dev-qa-db-fra.com

HTML5 audio en boucle

Je joue avec l'audio HTML5 récemment, et bien que je puisse obtenir le son qu'il ne jouera qu'une fois. Peu importe ce que j'essaie (paramétrer les propriétés, les gestionnaires d'événements, etc.), je n'arrive pas à le faire boucler.

Voici le code de base que j'utilise:

//myAudio is declared at a global scope, so it doesn't get garbage collected.
myAudio = new Audio('someSound.ogg');
myAudio.loop = true;
myAudio.play();

Je teste avec Chrome (6.0.466.0 dev) et Firefox (4 bêta 1)), qui semblent tous deux heureux d’ignorer mes demandes de bouclage. Des idées?

[~ # ~] update [~ # ~] : la propriété de la boucle est maintenant prise en charge dans tous les principaux navigateurs.

javascripthtml5html5-audio
73
Toji

Bien que loop soit spécifié, il n’est pas implémenté dans n'importe quel navigateur que je connaisse Firefox [merci Anurag pour l'avoir signalé]. Voici un autre moyen de bouclage qui devrait fonctionner dans les navigateurs compatibles HTML5:

myAudio = new Audio('someSound.ogg'); 
myAudio.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
}, false);
myAudio.play();
107
kingjeffrey

Pour ajouter d'autres conseils combinant les suggestions de @kingjeffrey et de @CMS: Vous pouvez utiliser loop là où il est disponible et avoir recours au gestionnaire d'événements de kingjeffrey lorsqu'il ne l'est pas. Il y a une bonne raison pour laquelle vous voulez utiliser loop et ne pas écrire votre propre gestionnaire d'événements: comme indiqué dans le rapport de bogue de Mozilla , alors que loop ne fait actuellement pas de boucle de manière transparente (sans interruption) dans tous les navigateurs que je connaisse, il est certainement possible et susceptible de devenir la norme dans le futur. Votre propre gestionnaire d'événements ne sera jamais transparent dans aucun navigateur (puisqu'il doit parcourir la boucle d'événements JavaScript). Par conséquent, il est préférable d'utiliser loop lorsque cela est possible au lieu d'écrire votre propre événement. Comme CMS l'a souligné dans un commentaire sur la réponse d'Anurag, vous pouvez détecter le support de loop en interrogeant la variable loop. Si elle est prise en charge, ce sera un booléen (false), sinon être indéfini, comme c'est actuellement le cas dans Firefox.

Mettre ensemble ces:

myAudio = new Audio('someSound.ogg'); 
if (typeof myAudio.loop == 'boolean')
{
    myAudio.loop = true;
}
else
{
    myAudio.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);
}
myAudio.play();
61
mgiuca

Votre code fonctionne pour moi sur Chrome (5.0.375) et Safari (5.0). Ne fait pas de boucle sur Firefox (3.6).

Voir exemple.

var song = new Audio("file");
song.loop = true;
document.body.appendChild(song);​
17
Anurag
var audio = new Audio("http://rho.nu/pub/Game%20Of%20Thrones%20-%20Main%20Theme%20-%20Soundtrack.mp3");

audio.addEventListener('canplaythrough', function() {
    this.currentTime = this.duration - 10;
    this.loop = true;
    this.play();
});

Il suffit de définir loop = true dans canplaythrough eventlistener.

http://jsbin.com/ciforiwano/1/edit?html,css,js,output

3
JazzCat

Essayez d’utiliser jQuery pour l’écouteur d’événements, cela fonctionnera ensuite dans Firefox.

myAudio = new Audio('someSound.ogg');

$(myAudio).bind('ended', function()  {
    myAudio.currentTime = 0;
    myAudio.play();
});

myAudio.play();

Quelque chose comme ca.

2
Matt

Je l'ai fait de cette façon

<audio controls="controls" loop="loop">
<source src="someSound.ogg" type="audio/ogg" />
</audio>

et ça ressemble à ça

enter image description here

1
Tomarinator

Le moyen le plus simple est:

bgSound = new Audio("sounds/background.mp3");
bgSound.loop = true;
bgSound.play();
1
jai3232

Vous pouvez essayer un setInterval, si vous connaissez la longueur exacte du son. Vous pouvez demander à setInterval de reproduire le son toutes les x secondes. X serait la longueur de votre son.

0
Zack

Cela fonctionne et il est beaucoup plus facile de basculer que les méthodes ci-dessus:

utilisez inline: onended="if($(this).attr('data-loop')){ this.currentTime = 0; this.play(); }"

Activer le bouclage par $(audio_element).attr('data-loop','1'); Désactiver le bouclage par $(audio_element).removeAttr('data-loop');

0
WebsterDevelopine