mp3をjsで再生制御する

音声を再生する方法としては3つあります。

①<audio>タグをHTMLに配置
②new Audio()を使って、HTMLAudioElementをjsで生成する(appendなどしない限りノードリストに追加されない)
③Web Audio APIを使う

③はaudio要素に比べて出来ることが多く制約も少ないのが利点ですが、上級者向けの機能で私自身よくわかっていないのでここでは紹介しません。

今回は、②の new Audio(); を使った方法を紹介していきます。

基本的な使い方

Audioオブジェクトを作成

let audioElm = new Audio('sample.mp3');

Audioの引数にはサウンドファイルのURLを指定します。

再生・一時停止

audioElm.play(); // 再生
audioElm.pause(); // 一時停止、再生位置がその位置で止まる

様々なプロパティ

audioElm.preload = 'none'; // preloadの設定。初期値はauto(全てのデータを事前に読み込む)。他には'metadata'(再生時間や作成者などのメタデータのみを事前に読み込む)がある。
audioElm.loop = true; // ループ再生を有効
audioElm.autoplay = true; // 音声読み込み時に自動再生を有効にする
audioElm.muted = true; // ミュートにする
audioElm.volume = 0.8; // 音量の調整(0.0～1.0の間で指定)
audioElm.controls = true; // コントロールの表示を有効
　→　ブラウザに表示するには $('body').append(audioElm); などでノードリストに追加する必要があります。
audioElm.currentTime = 3; // 再生位置を変更(秒)
console.log(audioElm.paused); // 一時停止中であればtrueを返す

一時停止ではなく、停止したい

stopボタンを押して、また再生ボタンを押したときに最初の位置に戻って流れるようにする。

audioElm.paused();
audioElm.currentTime = 0;

音声ファイルの長さを知りたい

audioElm.addEventListener('loadedmetadata', function() {
  console,log(audioElm.duration);
});

durationプロパティで音声の長さを知ることができます(秒)。 ただ、音声データのメタ情報の読み込みが完了するまでは長さは取得できないので、メタ情報読み込み完了を示す loadedmetadata イベント発生後に取得します。

音声の再生終了を監視する

audioElm.addEventListener('ended', function() {
  console.log('再生が終了しました');
});