Menu
This issue no longer existing FireFox, cuechange now works. Embedded base64 images also render.
The original code is a simple implementation of am MP3 player with captioning using HTML5 <AUDIO> and a few lines of JavaScript.
The example Audio Player HTML has a .VTT subtitle file with embedded images using Base64.
I am using the HTML5 <audio> Player
with a VTT subtitle <track>
The Player and lyrics VTT subtitles (with images) work fine with Google Chrome Version 35.
Click Here for: Link to the html page that works in
Google Chrome but not FireFox
Now the above link works in Firefox with workaround below.
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
Click Here for Link to full .vtt
This .vtt in addition to the lyrics has embedded base64 images
NOTE: VTT must be served with an HTTP header MIME Type of Content-Type:text/vtt
I have confirmed via Firebug the Following:
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://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>
Still not working in FireFox 45 (Jan 26, 2016)
UPDATE: cueChange NOW WORKING IN FIREFOX
THIS FIX NO LONGER NEEDED FOR FIREFOX
The text captions work in MS Edge, but does not render the Base64 Images**
Code does not work in IE 11
I never tried to get it running in IE as I would never use a MS product unless absolutely necessary and this project is only for myself. I may in the future work on IE or maybe someone else posted a solution for IE.
UPDATE: Not going to check if fit works with MS crap.
I added a JS Timer to call cueChange() every 500 milliseconds
var nIntervId=window.setInterval(function(){cueChange()},500);
I removed this which worked in Chrome:
track.addEventListener("cuechange", cueChange, false);
<!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>
672
Firefox still (!) doesn't support oncuechange (as of v38.0, May 2015). However, you can usually use video.ontimeupdate to achieve almost exactly the same thing, e.g.:
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() { ... });
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
