HTML5のaudio要素とJavaScriptで作るオーディオプレイヤー

先日の投稿『HTML5のaudio要素(audioタグ)で自作デモ曲をマークアップしてみました』においては、HTML5のaudio要素を使用して音声ファイルをマークアップすることに挑戦しました。音声ファイルのパスを指定したaudio要素をHTMLファイル内に埋め込むだけで(クロスブラウザー対応のために複数のリソースを指定する場合はsource要素使用してHTMLファイル内に埋め込むだけで)、簡単に音声ファイルを再生することができるようになりました。

ただaudio要素の実力はこれだけに留まりません。HTML5のaudio要素は、HTMLAudioElementというHTMLMediaElementから派生したDOMインターフェースによって実装されており、audio要素を制御するためのメソッド、プロパティ、イベントが数多く備わっています。

HTMLAudioElementの主なメソッド

  • canPlayType(type) : 指定されたMIMEタイプが再生可能か判定する
  • load() : サーバーから音声ファイルのロードを開始する(再生は行わない)
  • play() : 音声ファイルを再生する
  • pause() : 音声ファイルの再生を一時停止する

HTMLAudioElementの主なプロパティ

  • src : 音声ファイルのURL
  • currentTime : 現在の再生位置を表す秒数
  • volume : 現在のボリューム、0.0(無音)から1.0(最大)まで指定可能
  • controls : ブラウザで用意しているコントロールインターフェースを表示するかしないか
  • autoplay : 自動再生するかしないか
  • loop : ループ再生するかしないか

HTMLAudioElementのメソッド、プロパティはまだたくさんあります。詳細はMozillaの以下サイトで参照可能です。

またHTMLAudioElementのイベントについても、Mozillaのサイトが参考になります。

これらのメソッド、プロパティ、イベントをJavaScriptで操作することにより、ページ内において音声ファイルのさまざまな制御が可能となります。

今回は、HTMLAudioElementの主なプロパティとメソッドをJavaScriptで操作した簡単なオーディオプレイヤーでも作ってみたいと思います。

Audioオブジェクトの生成

まず音声ファイルをJavaScriptで操作しやすくするために、Audioオブジェクトを生成します。

audio要素は「Audio()」コンストラクタを用いてオブジェクトを生成することができます。

var myAudio = new Audio();
new Audio()でAudio()オブジェクトを生成し、myAudio変数に格納。

また、このときAudio()の引数として音声ファイルのパスを渡すことも可能です。

var myAudio = new Audio("http://example.com/audio/audio.ogg");
new Audio()でAudio()オブジェクトを生成し、myAudio変数に格納。このとき引数に指定した音声ファイルがmyAudio変数で扱う音声ファイルとして指定されます。

音声ファイルのMIMEタイプの判定とパスの指定

上記のようにAudioオブジェクトを生成する際に、引数として音声ファイルを指定することができますが、現状ではブラウザーごとに再生できる音声ファイルの種類が異なっており実用的ではありません。

そこで、ブラウザーで再生できるファイルの種類をMIMEタイプによって判定してから、再生可能である音声ファイルを指定するようにします。

canPlayType()メソッドに音声ファイルのMIMEタイプを渡すと、ブラウザーの対応状況により、戻り値として「””(空文字)」「”probably”」「”maybe”」のいづれかを返します。基本的には「””(空文字)」以外が返れば、再生可能であると判断してよさそうです。

  • ””(空文字) : if the specified type definitely cannot be played. (was “no” until Gecko 1.9.1.1/ Firefox 3.5.1)
  • “probably” : if the specified type appears to be playable.
  • “maybe” : if it’s impossible to be sure if the type can be played without actually attempting to do so.

⇒[参考]canPlayType() – nsIDOMHTMLMediaElement(mozilla.org)

canPlayType()メソッドを使って、指定したMIMEタイプの対応状況を判定する変数を作ります。

var canPlayOgg = ("" != myAudio.canPlayType("audio/ogg"));
canPlayType()メソッドの引数には、oggファイルなら「audio/ogg」、mp3なら「audio/mpeg」を入れます。canPlayType()の戻り値が「””(空文字)」でなければ、つまり指定したMIMEタイプがブラウザーに対応していれば、変数canPlayOggに「true」が格納されます。

MIMEタイプの判定結果を受けて、再生可能な音声ファイルのパスをsrcプロパティに指定します。

myAudio.src = "http://example.com/audio/audio.ogg";

現状では、ブラウザーにより対応している音声ファイルの種類が異なっているため、ブラウザーごとにMIMEタイプの判定を行って分岐した上で、音声ファイルを指定してあげる必要があります。上記を踏まえると、以下のようになります。

var canPlayOgg = ("" != myAudio.canPlayType("audio/ogg"));
var canPlayMp3 = ("" != myAudio.canPlayType("audio/mpeg"));

if(canPlayOgg) {
 myAudio.src = "http://example.com/audio/audio.ogg";
} else if(canPlayMp3) {
 myAudio.src = "http://example.com/audio/audio.mp3";
}
oggファイルの判定用にcanPlayOgg変数、mp3ファイルの判定用にcanPlayMp3変数をcanPlayType()メソッドを使って設定。if文を使って、canPlayOgg変数がtrueであれば、myAudio.srcにoggファイルaudio.oggが指定され、canPlayMp3変数がtrueであればmyAudio.srcにmp3ファイルaudio.mp3が指定されます。

音声ファイルの制御

myAudio変数へ音声ファイルを指定が済むと、HTMLAudioElementのメソッドで音声ファイルの制御ができるようになります。音声ファイルの制御として代表的なものは、「再生」「一時停止」「停止」などですね。

◎音声ファイルの「再生」

myAudio.play();
play()メソッドを使うと、音声ファイルが再生されます。

◎音声ファイルの「一時停止」

myAudio.pause();
pause()メソッドを使うと、音声ファイルが一時停止します。再度play()メソッドで再生させると、停止した箇所から再生されます。

◎音声ファイルの「停止」

myAudio.pause();
myAudio.currentTime = 0;
pause()メソッドを使って音声ファイルを一時停止させ、currentTimeに0を指定することで再生位置を0:00秒に戻します。再度play()メソッドで再生させると、最初から再生されます。

オーディオプレイヤーの作成

上記の内容を踏まえて、簡単な音楽プレイヤーを作成してみました。

HTML5 Audio Player

  • 曲を「選択」すると曲が自動的に再生されます。
  • 「一時停止」ボタンを押すと曲がいったん停止します。再度「再生」ボタンを押すと、停止したところから再生されます。
  • 「停止」ボタンを押すと曲が停止します。再度「再生」ボタンを押すと、最初から再生されます。
  • 再生される曲は私の自作曲です…。曲の詳細について、先日の投稿『HTML5のaudio要素(audioタグ)で自作デモ曲をマークアップしてみました』をご参照ください。

JavaScriptソース

<script>
// 押されたボタンごとの処理を設定
function playAudio(myAudio, button) {

 switch(button) {

  // 再生
  case "play":
   myAudio.play();
  break;

  // 一時停止
  case "pause":
   myAudio.pause();
  break;

  // 停止
  case "stop":
   myAudio.pause();
   myAudio.currentTime = 0;
  break;

 }

}

window.onload = function() {

 // Audioオブジェクト作成(引数がないと、Operaでエラーになるようです)
 var myAudio = new Audio("");

 // 選択された曲を取得
 var audio_file = document.getElementById("audio_file");

 // 曲が選択されたら処理を実行
 audio_file.addEventListener("change", function() {

  var audio_file_name_select = audio_file.selectedIndex;
  var audio_file_name = audio_file[audio_file_name_select].value;

  // 選択された曲の音声ファイルのパス情報を準備
  var ogg = "http://mae.chab.in/wp-content/uploads/music/" +
   audio_file_name + ".ogg";
  var mp3 = "http://mae.chab.in/wp-content/uploads/music/" +
   audio_file_name + ".mp3";

  // MIMEタイプの判定用の変数
  var canPlayOgg = ("" != myAudio.canPlayType("audio/ogg"));
  var canPlayMp3 = ("" != myAudio.canPlayType("audio/mpeg"));

  // MIMEタイプを判定し、myAudio.srcに音声ファイルのパスを指定
  if(canPlayOgg) {
   myAudio.src = ogg;
  } else if(canPlayMp3) {
   myAudio.src = mp3;
  }

  // 曲を再生
  myAudio.play();

  // 戻り値としてmyAudio.srcを指定
  return myAudio.src;

 }, true);

 // 押されたボタンの種類を取得し、playAudio関数に投げる
 var audio_form_button = document.getElementById("audio_button").childNodes;

 for(var i = 0; i < audio_form_button.length; i++) {
  audio_form_button[i].addEventListener("click", function() {
   playAudio(myAudio, this.id);
  }, false);
 }

}
</script>

HTMLソース

<form id="audio_form" name="audio_form">
 <fieldset>
  <legend>HTML5 Audio Player</legend>

  <select name="audio_file" id="audio_file">
   <option>♪曲を選択してください♪</option>
   <option value="mm43">MM43</option>
   <option value="mm48">MM48</option>
   <option value="mm53">MM53</option>
   <option value="mm41">MM41</option>
   <option value="mm18">MM18</option>
   <option value="mm9">MM9</option>
  </select>

  <div id="audio_button">
   <input type="button" value="再生" id="play" />
   <input type="button" value="一時停止" id="pause" />
   <input type="button" value="停止" id="stop" />
  </div>
 <fieldset>
</form>

以上のように、HTML5のaudio要素はJavaScriptで操作することによりさまざまな音声ファイルの制御が可能となります。今回使用したAudioオブジェクトのメソッドやプロパティはごく一部にすぎません。イベントにいたってはまったく使用していません。もっともっと面白くて機能の豊富なWebアプリケーションが作れるのです。そのためにも、さらに技術力を磨く必要がありますね。

コメント一覧

  1. ピンバック: ブラウザーだけで使える音楽系WEBアプリ13選(HTML5編) | mae's blog

     

  2. ピンバック: 2011年を振り返る(ブログ&日常編) | mae's blog

     

  3. ピンバック: HTML5 Audio Playerを改良しました: ボリューム機能追加、再生ボタン機能拡張など | mae's blog

     

  4. 初めまして。 現在ブラウザゲームのようなものを作っている者です。
    「selectで任意の曲を選んで流す」
    という動作がうまくいかずに悩んでいましたが、
    こちらのサイトを拝見・参考にしたところ解決致しました。
    本当にありがとうございました。

    あと失礼ながら、
    こちらのサイト(/1975)、および改良版(/2307)の閲覧にて、
    双方とも動作が Chrome:可、 Firefox:不可(文字化) となりました。

    どい  返信

  • 必須

コメント