html - HTML5 トラック キューが空です

Question

<track>次のようなwebvtt 要素を使用して、オーディオ録音の字幕を表示しようとしています。

<audio controls="controls">
      <source src="TheBrigands.mp3" />
      <source src="TheBrigands.ogg" />
      <track default="" kind="subtitles" srclang="en" label="English text" src="TheBrigands.vtt" />
</audio>
<div id="display">
      It was a cold and stormy night,
</div>

div次のスクリプトを使用してディスプレイに入力します。

<script>
  function main() {
     var recording = document.querySelector("audio");
     var track = recording.textTracks[0];
     var display = document.getElementById("display");

  track.mode = "hidden";

     track.oncuechange = function () {
        var cue = this.activeCues[0];

        display.innerHTML = cue.text;
     }
  }

  window.onload = main;
</script>

それでも、firefox でトラックを調べると、キュー オブジェクトがありますが、空です。

document.querySelector('track').track.cues
TextTrackCueList { length: 0 }

確認mime-typeしたところ、サーバーで正しく構成されています。読み込まれない原因は何ですか?