Audio 関連の API を用いた音声文字化の自動再生

ども、@kimihom です。

f:id:cevid_cpp:20200321172319j:plain

Amazon Transcribe や Google Cloud Speech-to-Text などを使って、音声を文字化することがもはや当たり前になってきている。そこで本記事では、文字化したテキストと、再生する audio のタイミングを合わせて、より効果的に音声と文字を確認できる実装をしてみよう。

ここでとりわけ重要になってくるのが、Audio API の利用だ。そこで本記事では Audio API に関して紹介する。

再生に合わせて自動でイベントを発生

まず、今回の API に関しては以下のページによくまとまっている。

www.htmq.com

Audio, Video 要素だけの特別なイベントが多く提供されていることがわかる。

とりわけ今回の実装で大切なイベントは、timeupdate だ。再生をしている時に定期的にイベントが発火され、その時の時間を取得することができる。頻度としては1秒に3回くらいか。

$(".audio-wrap audio").on("timeupdate", function(){
  var currentSec = parseInt($(this)[0].currentTime);
  // currentSec に合う文字化時間を見つけて、印付け
});

この currentTime はm秒単位で細かく取得できる。録音再生の秒数をより厳密に秒数管理することが可能だ。秒数さえとってこれれば、あとはそこに合う文字化の秒数タイミングに対して印付をすればいいだけだ。ここは各 JavaScript の書き方で異なってくるので省略する。

文字をクリックに応じて再生を途中再開

文字をクリックしたら、その秒数から再生を再開する実装もしている。これは、特定の場所のクリックイベントで、その時間から再生を再開させるように実装すれば OK だ。以下のサンプルでは 04:30 といった文字をクリックした場合の秒数への変換で少し複雑になってしまっているが audio.currentTime に秒数の時間を入れて、audio.play() するだけで実現できる。

  $(document).on("click", ".audio-wrap .con", function() {
    var audio = $(this).find("audio")[0];
    var times = $(this).find(".time").text().split(":");
    audio.currentTime = parseInt(times[0] * 60) + parseInt(times[1]);
    audio.play();
  });