HTML 5 Audio en Boucle

Question

J'ai joué avec HTML5 audio récemment, et si je peux l'obtenir pour jouer le son il ne pourra jamais jouer une fois. Peu importe ce que j'essaie (en définissant les propriétés, les gestionnaires d'événements, etc) je n'arrive pas à obtenir de la boucle.

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 suis en essais à l'aide de Chrome (6.0.466.0 dev) et Firefox (4 beta 1), qui semblent heureux d'ignorer mes demandes pour la lecture en boucle. Des idées?

Answer 1

Alors qu' loop est spécifié, il n'est pas mis en œuvre dans n'importe quel navigateur, je suis conscient de Firefox [merci Anurag de souligner ce point]. Voici une autre façon de boucle qui doit travailler en HTML5 navigateurs:

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

Answer 2

Pour ajouter un peu plus de conseils combinant les suggestions de @kingjeffrey et @CMS: Vous pouvez utiliser loop où il est disponible, et de se replier sur kingjeffrey du gestionnaire d'événement quand elle n'est pas. Il y a une bonne raison pour laquelle vous souhaitez utiliser loop et ne pas écrire votre propre gestionnaire d'événement: Comme indiqué dans l' Mozilla rapport de bogue, tout en loop actuellement ne tourne pas en boucle de façon transparente (sans bpa) dans n'importe quel navigateur je connais, il est bien sûr possible et susceptible de devenir un standard dans l'avenir. Votre propre gestionnaire d'événement ne sera jamais homogène quel que soit le navigateur (car c'est de la pompe à travers la boucle d'événement JavaScript). Par conséquent, il est préférable d'utiliser des loop , si possible, au lieu d'écrire votre propre événement. En tant que CMS a souligné dans un commentaire sur Anurag réponse, vous pouvez détecter la prise en charge pour loop en interrogeant l' loop variable-si elle est prise en charge, il sera un booléen (false), sinon il ne sera pas défini, comme c'est le cas actuellement dans Firefox.

Mettre ces ensemble:

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();

Answer 3

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

Voir un exemple.

var song = new Audio("file");
song.loop = true;
document.body.appendChild(song);​

Answer 4

Essayez d'utiliser jQuery pour l'écouteur d'événement, il va alors travailler dans Firefox.

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

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

myAudio.play();

Quelque chose comme ça.

Answer 5

J'ai fait de cette façon,

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

et il ressemble à ceci