こんにちは、新卒のshiroです。
前回に引き続き、今回もweb audio apiを利用した、ブラウザ上で動く簡単なミュージックプレイヤーを作成していきます。

今回作成する機能は以下の2つです。

・再生中音楽のタイトル表示
・再生時間の表示

早速作っていきましょう。

再生中音楽のタイトル表示

前回の記事でaudioNameの中にタイトルが入っているので、今回はそれを表示するようにします。

タイトルの表示はplayer_play()に以下の一行を追加します。

title.innerHTML = audioName[0];

html要素にタイトルを表示させているだけです。
停止時に非表示にする方法も基本的に同じですが、今回は後ほどの処理も考えて別関数に作成します。
ついでに、player_stopに書いていたplaying = false;も移しておきます。

var player_stop = function() {
  if (soundFile != null) {
    soundFile.stop(0);
    // 追加
    clearPlayer();
  }
}

// プレイヤーの初期化
var clearPlayer = function() {
  playing = false;
  title.innerHTML = "";
}

これで再生中はタイトルが表示され、停止中は非表示になります。

再生時間の表示

引き続き、再生時間の表示を行っていきます。

まずsound()関数内のsource.buffer = buffer;の下に以下のコードを追記します。

[曲の再生時間を取得する処理（resumeTimeとif文の中身のみ　else前まで）]

buffer.lengthはバッファーの長さであるため、それをsampleRate（1秒当たりの値）で割ると秒数を求めることができます。

playing = true;の直前に以下のコードを箇所を大幅に書き換えます。

let resumeTime = 0;
// 初めて音を再生する際、再生開始時のcontext.currentTimeが0とは限らないため取得
startTime = context.currentTime;
// 再生開始時間を取得
audioTime = startTime;

また、source.start()は

source.start(0,resumeTime);

に変更します。

AudioBufferSourceNode.start()には引数を与えることが可能です。
今回は第一引数のwhenと第二引数のoffsetに値を与えています。
whenは開始するまでの時間であり、すぐに再生したいため0を指定します。
offsetはどこから再生するかを設定しており、今回はresumeTimeの値を当てています。
resumeTimeは音声の再生開始位置を設定しています。
今回はまだ最初からなので、0を指定しています。

startTimeはAudioContext.currentTimeがカウントを始めてから曲の再生までの時間を取得しています。
これはプレイボタンを押してから実際の再生開始までの時間に差があるため、ポーズ時の計算時に必要となります。
audioTimeはプレイヤーに表示する時間を求める際に必要になります。
初回再生時はどちらもAudioContext.currentTimeの値が入ります。

player_playのsound(buffer);の次に
displayTime(audioTime);を追加します。

次に時間の表示設定をします。

// 時間の表示設定
var displayTime = function(audio) {
  if(playing) {
    timeBar.value = dispTime + context.currentTime - audio;
    cTime.innerHTML = parseTime(timeBar.value);
    setTimeout(function(){displayTime(audio)},10);
  } else {
    clearTimeout(displayTime);
  }
}

// 表示する時間を作成
var parseTime = function(time) {
  let returnTime;
  let second = ("0" + Math.floor(time % 60)).slice(-2);
  let minutes = ("0" + Math.floor((time / 60) % 60)).slice(-2);
  let hour = ("0" + Math.floor((time / 60) / 60)).slice(-2);
  returnTime = hour + ":" + minutes + ":" + second;
  return returnTime;
}

dispTimeは0指定になっていますが、今はこれを気にしないでください。
次回ポーズ処理の作成時に使用します。

timeBar.valueにcontext.currentTime – audioを入れています。
これはAudioContext.currentTimeからaudioTimeを引くことで、その差から時間を取得しています。
setTimeout()で10フレームごとに自身を呼び出し、更新しています。
また、再生中でない場合、clearTimeout()で更新を終了させています。

parseTime(time)に値を渡し、返ってきた値で実数値での表示を行っています。
sliceはマイナス指定で後端から何文字を取ってくるのか指定することができるので、下2文字を持ってくるようにしています。

最後に、clearPlayerに以下の記述を追加します。

dispTime = 0;
displayTime(0);
timeBar.value = 0;
timeBar.max = 100;
mTime.innerHTML = "00:00:00";
cTime.innerHTML = "00:00:00";

これで曲のタイトルと、再生時間の表示が完成です。
次回は残りの「ファイルの取り込み」「一時停止/再開」「リピート」を作成していこうと思います。

【ちなみに……】
firefoxの開発ツールではオプションのWeb Audioにチェックを入れることで、Web Audioがどのように繋がれているかを見ることができます。興味のある人は見てみるのも良いと思います。

第1回はこちら
第3回はこちら

EOF.