Проигрыватель по словам (субтитры) в html и javascript - небольшие интервалы не отображаются - PullRequest
Новая
       24

Проигрыватель по словам (субтитры) в html и javascript - небольшие интервалы не отображаются

0 голосов
/ 14 декабря 2018

Я сделал какое-то "караоке", синхронизирую слова во время воспроизведения звука.Код довольно короткий и простой: 

var timing = [
        [0, 1, 50, 890],
        [1, 2, 970, 1050],
        [2, 3, 1060, 3560],
        [3, 4, 3660, 4300] ]
        
var words = [ "word0", "word1", "word2", "word3" ]        

var audio = document.querySelector("audio");
      currentTimeDisplay = document.getElementById("currentTimeDisplay");
      currentWordDisplay = document.getElementById("currentWordDisplay");
      currentWordTextDisplay = document.getElementById("currentWordTextDisplay");

      var currentWord = 0;
      var showWord = false; 

      audio.ontimeupdate = () => {
        var ct = audio.currentTime;
        currentTimeDisplay.innerText = ct;

        if (ct > timing[currentWord][2] / 1000) {
          showWord = true;
        }
        if (ct > timing[currentWord][3] / 1000) {
          showWord = false;
          currentWord++;
        }
        currentWordDisplay.innerText = showWord ? currentWord : "";
        currentWordTextDisplay.innerText = showWord ? words[currentWord] : "";
      };
    <audio
      src="http://somedomain.com/someAudio.mp3"
      controls=""
      preload="auto"
    ></audio>
    current time:
    <div id="currentTimeDisplay"></div>
    current word:
    <div id="currentWordDisplay"></div>
    <div id="currentWordTextDisplay"></div>

Проблема в том, что когда слово короче 300 миллисекунд, оно не появляется на экране.

Есть ли способ это исправить?

...