メニューを閉じる

テクノデジタルグループ

メニューを開く

2017.09.29

プログラミング

Web Audio APIを使って簡単なプレイヤーを作ってみる(2)

こんにちは、新卒の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がどのように繋がれているかを見ることができます。興味のある人は見てみるのも良いと思います。

2017-08-31_13h44_22
2017-08-31_13h45_08

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

EOF.


【記事への感想募集中!】

記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!
  • こんな記事が読んでみたい、こんなことが知りたい、調べてほしい!という意見も募集中!
  • いただいた感想は今後の記事に活かしたいと思います!

感想フォームはこちら


【テクノデジタルではエンジニア/デザイナーを積極採用中です!】

下記項目に1つでも当てはまる方は是非、詳細ページへ!
  • 自分でアプリを作ってみたい
  • ITで世の中にワクワクを生み出したい
  • 使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら


Qangaroo(カンガルー)

  • 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
  • テストの進捗が見える。開発がスマートに進む。
  • クラウド型テスト管理ツール『Qangaroo(カンガルー)』

【テクノデジタルのインフラサービス】

当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。

https://www.tcdigital.jp/infrastructure/

最近の記事