HTML5 <audio> textTrack.kind = subtítulos evento cueChange que no funciona en FireFox

ACTUALIZAR:

Este problema ya no es el FireFox existente, el cuechange ahora funciona. Las imágenes base64 incorporadas también se procesan.

El código original es una implementación simple de un reproductor de MP3 con subtítulos usando HTML5 <AUDIO> y algunas líneas de JavaScript.

El ejemplo de Audio Player HTML tiene un file de subtítulos .VTT con imágenes incrustadas usando Base64.

EL CORREO ORIGINAL COMIENZA AQUÍ

Estoy usando el <audio> HTML5 <audio>
con un subtítulo VTT <track>

Los subtítulos VTT del reproductor y las letras (con imágenes) funcionan bien con Google Chrome Versión 35.

Haga clic aquí para: Enlace a la página html que funciona en Google Chrome pero no en Firefox
Ahora el enlace de arriba funciona en Firefox con una solución alternativa a continuación.

FireFox Versión 35 puede reproducir el mp3, pero los subtítulos VTT no funcionan correctamente.

Los events onCueChange y cueChange ambos funcionan en Chrome
Ni los events onCueChange ni cueChange funcionan en Firefox

Nueva actualización agregada a continuación con una solución simple (1/26/16)

OnCueChange embedded en HTML

 <track id="trk" kind="subtitles" onCueChange="cueChange()" srclang="en" src="SeasonsInTheSun.vtt" default /> 

escuchador de events cueChange

 track.addEventListener("cuechange", cueChange, false); 

Cómo funciona
Cuando la hora VTT cambia, audio.track genera un evento CueChange.
En las señales de VTT a continuación (2 de 25), el evento cueChange debería activarse a las 00:00:00.001 y 00:00:04.200
Cuando se activeCues[0].text el evento, el script lee activeCues[0].text
activeCues.text se muestra en <div id="lyrics> innerHTML

WEBVTT

 00:00:00.001 --> 00:00:04.000 Seasons in the Sun Terry Jacks 00:00:04.200 --> 00:00:20.000 Goodbye to you, my trusted friend We've known each other since we were nine or ten Together we climbed hills and trees 

Haga clic aquí para ver el enlace completo de .vtt

Este .vtt además de la letra tiene imágenes base64 incrustadas

NOTA: VTT debe ser servido con un encabezado HTTP MIME Tipo de tipo de Content-Type:text/vtt

He confirmado a través de Firebug lo siguiente:

  • El file VTT carga sin error.
  • El acvtiveCues tiene longitud y text correctos.
  • Las 25 pistas del file VTT están cargadas y son correctas
  • El modo textTrack está "mostrando"

HTML completo con JavaScript

 <!DOCTYPE html> <head><title>Seasons in the Sun</title> <style type="text/css"> html,body{padding:0;margin:0;width:100%;min-height:100%;background-color:#000;color:#f0f;} #lyrics{margin-left:3em;font: 700 2.3em arial,sans-serif;color:#0ff;text-align:center;} </style></head><body> <audio id="audio" preload="auto" controls> <source src="http://islmpeg.s3.amazonaws.com/mp3/TerryJacks-SeasonsInTheSun.mp3" type="audio/mpeg"> <track id="trk" kind="subtitles" srclang="en" src="http://islmpeg.s3.amazonaws.com/mp3/SeasonsInTheSun.vtt" default /> </audio> <br/><div id="lyrics"></div><br/> <script type="text/javascript"> //<![CDATA[ var lyrics = document.getElementById('lyrics'); var audio = document.getElementById('audio'); var track = document.getElementById('trk'); var textTrack = track.track; track.addEventListener("cuechange", cueChange, false); function init(){audio.volume = .3;audio.play();} function cueChange(){ var cues = textTrack.activeCues; if (cues.length > 0){ lyrics.innerHTML = cues[0].text.replace(/\n/g, '<br>');}} window.onload = init; //]]> </script></body></html> 

Actualizar el trabajo
Funciona en FireFox y Chrome

Todavía no funciona en FireFox 45 (26 de enero de 2016)
ACTUALIZACIÓN: cueChange NOW TRABAJANDO EN FIREFOX
ESTE ARREGLO NO ES NECESARIO MÁS PARA FIREFOX

Los títulos de text funcionan en MS Edge, pero no representan las imágenes de Base64 **
El código no funciona en IE 11
Nunca intenté que funcionara en IE, ya que nunca usaría un producto MS a less que fuera absolutamente necesario y este proyecto es solo para mí. Es posible que en el futuro trabaje en IE o tal vez alguien más publique una solución para IE.
ACTUALIZACIÓN: No vamos a verificar si el ajuste funciona con MS basura.

Agregué un timer JS para llamar cueChange () cada 500 milisegundos

 var nIntervId=window.setInterval(function(){cueChange()},500); 

Eliminé esto que funcionó en Chrome:

 track.addEventListener("cuechange", cueChange, false); 

Nuevo código actualizado (ACTUALIZACIÓN: ya no es necesario)

 <!DOCTYPE html> <head><title>Seasons In The Sun</title> <style type="text/css"> html,body{padding:0;margin:0;width:100%;min-height:100%;background-color:#000;color:#f0f;} #lyrics{margin-left:3em;font: 700 2.3em Arial,sans-serif;color:#0ff;text-align:center;} #html5{display:none;} </style></head><body><div><div id="html5"><h2>You Browser Does not support Audio Captions<br/>You will not see the lyrics.</h2></div> <audio id="audio" preload="auto" controls> <source src="http://islmpeg.s3.amazonaws.com/mp3/TerryJacks-SeasonsInTheSun.mp3" type="audio/mpeg"> <track id="trk" kind="subtitles" srclang="en" src="SeasonsInTheSun.vtt" default /> </audio> <br/><div id="lyrics"></div><br/> <script type="text/javascript"> //<![CDATA[ var lyrics = document.getElementById('lyrics'); var audio = document.getElementById('audio'); var track = document.getElementById('trk'); var textTrack = track.track; //track.addEventListener("cuechange", cueChange, false); // oncuechange var nIntervId=window.setInterval(function(){cueChange()},500); function init(){audio.volume = .3;audio.play();cueChange();} function cueChange(){ var cues = textTrack.activeCues; if (cues.length > 0){ lyrics.innerHTML = cues[0].text.replace(/\n/g, '<br>'); } } window.onload = init; //]]> </script><img width="1" height="1" src="pix.php?p=sits" alt="."/></body></html> 

Firefox todavía (!) No es compatible con oncuechange (a partir de v38.0, mayo de 2015). Sin embargo, generalmente puede usar video.ontimeupdate para lograr casi exactamente lo mismo, por ejemplo:

 var videoElement = $("video")[0]; var textTrack = videoElement.textTracks[0]; if (textTrack.oncuechange !== undefined) { $(textTrack).on("cuechange", function() { ... }); } else { // some browsers don't support track.oncuechange, so... $(videoElement).on("timeupdate", function() { ... }); } 

Los parches ahora se han agregado a mozilla-inbound para get estos disparos para elementos multimedia (ahora funciona para video). Ahora corregiré el lado del audio, que simplemente no se dispara porque no hay window de subtítulos.

https://hg.mozilla.org/integration/mozilla-inbound/rev/8935a32269a5 https://hg.mozilla.org/integration/mozilla-inbound/rev/e1d06acdeb7b https://hg.mozilla.org/integration/ mozilla-inbound / rev / 9f4d815bb9af

Todavía no se corrigió a partir de v39, agosto de 2015. Aquí está la desagradable solución que he estado preparando para verificar los cambios en la list de ActiveCues. Está funcionando como una testing de concepto, ahora tengo que volver a escribir mi código para los browseres que sí soportan correctamente el cambio de key para que el repliegue ocurra correctamente.

 var v = document.getElementsByTagName('video')[0]; var t = v.textTracks; var la = []; for(l = 0; l < t.length; l++){ la[l] = ''; }; var onchangeTest = (function isEventSupported(eventName) { var isSupported = ('oncuechange' in t[0]); if (isSupported) { return true; } else { return false; }; })(); v.ontimeupdate = function(){ if(!onchangeTest){ var activeCues =""; var delim =""; for(i = 0; i < t.length; i++){ if(t[i].kind == 'captions' || t[i].kind == 'subtitles'){ delim = "<br />"; } else { delim = "\n"; }; a = v[i].activeCues; if(a){ var tt = ''; for(ii = 0; ii < a.length; ii++){ tt += a[ii].text + delim; if(tt !== la[i]){ la[i] = tt; console.log('tt: ' + tt + ' la[' + i + ']: ' + la[i]); }; }; }; }; }; }; 

Gracias por la respuesta de avaunt ! Creo que hay un error tipográfico en el código inicial. Cuando lo probé tanto en Firefox como en IE, no funcionó.

La línea en cuestión es

 a = v[i].activeCues; 

y debería leer

 a = t[i].activeCues; 

ya que activeCues es una propiedad del object textTracks , no del object de video . ¡Después de este cambio, funciona!

Intenté hacer esta publicación como respuesta a su publicación, pero el sistema no me lo permitió. Entonces agregarlo como una respuesta.