HTML5 Les événements audio ne se déclenchent pas sur Chrome

Question

J'essaie d'avoir une barre de progression de charge dans mon jeu, et j'ai une fonction assignée à l'attribut onloadeddata sur mon audio, mais elle ne se déclenche pas dans Chrome. Cela fonctionne dans d'autres navigateurs. J'ai également essayé de nombreux autres événements tels que oncanplay, oncanplaythrough, onloadedmetadata, etc. Aucun d'eux ne se déclenche.

Je pense que cela pourrait avoir à voir avec la mise en cache. J'ai essayé de regarder autour et il y avait quelques rapports de cela il y a 2-3 ans mais rien de récent.

Existe-t-il un autre moyen de détecter si l'audio est chargé ou de faire fonctionner ces événements?

EDIT: Voici un exemple rapide: http://jsfiddle.net/3vxCu/1/ Fonctionne dans Opera et Firefox, mais pas dans Chrome. Il devrait donner une alerte quand le son est fini si le chargement est terminé.

Answer 1

Il semble que la propriété onloadeddata ne fonctionne pas pour une raison quelconque. Mais la fixation d'un gestionnaire d'événements addEventListener (ou via jQuery) fonctionne: http://jsfiddle.net/3vxCu/4/

bgSound = new Audio(); 
bgSound.src = "http://www.ehsankia.com/hawkthorne/audio/level.ogg"; 
bgSound.preload = "auto"; 
// Standard browsers (not IE before version 9): 
// bgSound.addEventListener("loadeddata", testFunction, false); 

// jQuery: 
$(bgSound).on("loadeddata", testFunction); 

function testFunction() { 
    alert("Data loaded"); 
} 

Answer 2

Si le jsfiddle joint est la façon dont vous avez implémenté votre code, alors je pense que je sais ce qui ne va pas.

Votre jsFiddle montre:

bgSound = document.createElement('audio'); 
bgSound.src = "http://www.ehsankia.com/hawkthorne/audio/level.ogg"; 
bgSound.onloadeddata = testFunction; 

function testFunction(){ 
    alert("Data loaded"); 
} 

Il devrait ressembler à ceci:

bgSound = document.createElement('audio'); 
bgSound.onloadeddata = testFunction; // Event listener is attached _before_ loading the resource 
bgSound.src = "http://www.ehsankia.com/hawkthorne/audio/level.ogg"; 

function testFunction(){ 
    alert("Data loaded"); 
} 

Fondamentalement, vous joignons l'écouteur d'événement après le src est spécifié. Spécifier la source devrait être la dernière chose que vous faites, car il met tout en mouvement. Chrome est probablement déjà passé le point d'appel des auditeurs pour cet événement au moment où il est joint à votre code.