サイトで曲再生の時、音ズレをなくしたいです

Question

曲のテンポと同時に英単語を切り替えていきたいのですが、音ズレがあったらダメなので、音ズレを防ぐ方法を教えてください
曲と単語、ボタンを押して再生です。

Answer 1

AudioオブジェクトのcurrentTimeプロパティを利用してはどうですか？
単語の区切りがテンポに合っているのであれば、
setIntervalなどでcurrentTimeを取得して、
そのタイミングに合う単語に切り替えるといった方法です。

var audio = new Audio('sound.mp3');
var tempo = 60000 / 120;
var words = ['this', 'is', 'a', 'pen'];

setInterval(
  function(){
    var frame = Math.floor(audio.currentTime / tempo); //再生位置を小節に変換する
    var current_word = words[frame]; //現在の単語を取得

    console.log(frame, current_word); //ここで単語を使った処理をする

  },
  tempo
);

audio.play();

音声の再生開始時にsetIntervalを開始しても、
バッファされるまでは再生が開始されないので、
ブラウザや環境によっては再生開始のタイミングが遅れる場合があります。
なので、音声と処理を同期させるには、
音声の再生位置を取得してそれに合わせる方法がベターかと思います。

ただし、音声がバッファされないうちはにcurrentTimeが正常に取得できない場合もあるので、
Audioオブジェクトのbufferedプロパティやseekableプロパティをチェックして、
再生が開始されたタイミングでsetIntervalを起動するのがより確実です。

Answer 2

質問の意味がよくわかりませんが、曲の再生と同時にsetIntervel()とか使ってみたらどうですか？
曲のテンポ(BPM)を調べて、BPM120だったら1分間に120拍=1秒に2拍=1拍が500ミリ秒ですから、

BPM = 120;
w = 60000 / BPM;
haku = 0;
shousetu = 0;
voice1 = new Audio("voice1.mp3");
voice2 = new Audio("voice2.mp3");

setInterval(function(){
    if(shousetu == 4 && haku == 0) voice1.play();
    else if(shousetu == 8 && haku == 4) voice2.play();

    haku ++;
    if(haku == 5){
        haku = 0;
        shousetu ++;
    }
}, w);

とか。

Comments

[taishi1999]

それでやってもsafariで再生したときに音ズレがありません?

[waritocomatta]

http://qiita.com/isseium/items/12b215b6eab26acd2afe
こちらの記事はどうでしょうか？
私は、ゲームを作るときによく使う短いSEはこれで再生しています。
mp3などの音源をbase64の文字データに変換して使います。
また、音ズレはこの方法ではほとんどないと思いますが...
重い端末では、べつにJavaScriptではなくても音ズレはつきものです。
それと、古いSafariでは一度に扱えるmp3ファイルは一つまでで、この方法なら
複数の音を再生できるかもしれません