Safari con la etiqueta de audio no funciona

Question

estoy trabajando con etiquetas de audio HTML5 con este simple código:

HTML

<audio id="audioFrenata"> 
<source src="sounds/frenata.ogg"> 
<source src="sounds/frenata.mp3"></audio> 

JS

$('#audioFrenata').on('ended', function() { 
     manageImageObjectsLevel(); 
    }).get(0).play(); 

con Chrome esto funciona como se espera, con Safari 5.1.7 en Windows y Safari en iPad 3 Recibo esto:

'undefined' is not a function (evaluating '$('#audioFrenata').on('ended', function() { 
manageImageObjectsLevel(); 
}).get(0).play()') 

¿Alguien tiene una idea de por qué?

Answer 1

Compruebe si la funcionalidad HTML5 que desea es compatible con los navegadores que mencionó. Puede verificarlo here. Espero que esto te ayudará.

Answer 2

ID parece estar equivocado.

$('#audioLevel').on('ended', function() { 
    manageImageObjectsLevel(); 
}).get(0).play(); 

Se supone que debe ser

$('#audioFrenata').on('ended', function() { 
    manageImageObjectsLevel(); 
}).get(0).play(); 

Uso continuación HTML

<audio id="audioFrenata" controls="controls"> 
    <source src="sounds/frenata.ogg" type="audio/ogg"> 
    <source src="sounds/frenata.mp3" type="audio/mpeg"> 
</audio>​ 

Consulte LIVE DEMO

Answer 3

he tenido el mismo problema, y ​​me encontré con que es debido a la siguiente restricción en Safari:

en Safari en iOS (para todos los dispositivos, incluyendo iPad), donde el usuario puede ser en una red celular y se cargará por unidad de datos, precarga y de reproducción automática están desactivados. No se cargan datos hasta que el usuario lo inicia. Esto significa que los métodos JavaScript play() y load() también están inactivos hasta que el usuario inicia la reproducción, a menos que el método play() o load() se desencadene por acción del usuario. En otras palabras, un botón Play iniciado por el usuario funciona, pero un evento onLoad = "play()" no funciona.

Referencia: http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

Una forma de resolverlo, es silenciar el audio por defecto, y cuando el usuario "no-mudos" puede crear la instancia de un objeto HTML 5 audio y almacenar que en una variabel "estático"/"global" y usar eso para una mayor reproducción.

- ACTUALIZACIÓN

que aquí hay una entrada de blog que describe el problema y cómo tratar con él: http://blog.gopherwoodstudios.com/2012/07/enabling-html5-audio-playback-on-ios.html

Aquí es una pregunta StackOverflow similares discutiendo lo mismo: Autoplay audio files on an iPad with HTML5

Y aquí sigue una "Módulo" de JavaScript que he escrito para usar para manejar la reproducción de audio en HTML5:

NS.modules.html5.audio = (function() { 

    var _snd = false; 

    function playAudio(src) { 
     if (!_snd) 
      _snd = new Audio(); 
     else 
      $(_snd).empty(); 

     for (var i = 0; i < src.length; i++) { 
      var source = document.createElement('source'); 
      source.type = src[i].type; 
      source.src = src[i].src; 
      _snd.appendChild(source); 
     } 

     _snd.load(); // Needed on safari/idevice 
     _snd.play(); 
    }; 

    var playAudio = function() { 
     var src = [ 
      { src: "/path/to/audio.wav", type: "audio/vnd.wave" }, 
      { src: "/path/to/audio.ogg", type: "application/ogg; codecs=vorbis" }, 
      { src: "/path/to/audio.mp3", type: "audio/mpeg" } 
     ]; 
     playAudio(src); 
    }; 

    return { 
     playAudio: playAudio, 
     // more play functions here 
    }; 
})(); 

Answer 4

En mi caso, el problema fue causado por el formato HTML, cambié al siguiente formato y funcionó. Espero que esto ayude a alguien:

<audio id="audioFrenata" src="sounds/frenata.ogg"></audio> 

nota la falta de <source> elemento en el diseño anterior.