I am using the HTML5 <audio> Player
with a VTT subtitle <track>
The Player and lyrics VTT subtitles work fine with Google Chrome Version 35.
Click Here for: Link to the html page that works in Google Chrome but not FireFox
FireFox Version 35 can play the mp3, but the VTT subtitles do not work properly.
The onCueChange and cueChange events both work in Chrome
Neither onCueChange nor cueChange events work in FireFox
OnCueChange embedded in HTML
<track id="trk" kind="subtitles" onCueChange="cueChange()" srclang="en" src="SeasonsInTheSun.vtt" default />
cueChange Event Listener
track.addEventListener("cuechange", cueChange, false);
How it works
When the VTT time changes the audio.track generates a cueChange Event.
In the below VTT cues (2 of 25) the cueChange Event should fire at 00:00:00.001 and 00:00:04.200
When the event fires, the script then reads the activeCues[0].text
The activeCues.text is displayed in the <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
I have confirmed via Firebug the Following:
- The VTT file loads with out Error.
- The acvtiveCues has correct length and text.
- The 25 cues from the VTT file are loaded and correct
- The textTrack mode is "showing"
Full HTML with 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://ift.tt/1L9Fkgx" type="audio/mpeg">
<track id="trk" kind="subtitles" srclang="en" src="http://ift.tt/1CW2zoc" 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>
Aucun commentaire:
Enregistrer un commentaire