UPDATE:
-------

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.   

ORIGINAL POST BEGINS HERE
-------------------------

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](http://islmpeg.s3.amazonaws.com/mp3/SeasonsInTheSun.html)  

**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  

New Update Added Below With Simple Workaround (1/26/16)
-------------------------------------------------------

**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](http://islmpeg.s3.amazonaws.com/mp3/SeasonsInTheSun.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:**  

* 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://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>

```

Update Work AroundWorks in FireFox and Chrome
---------------------------------------------

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); 

```

New Updated Code (UPDATE: no longer needed)
-------------------------------------------

```
<!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>

```