先日の投稿『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();
また、このときAudio()の引数として音声ファイルのパスを渡すことも可能です。
var myAudio = new Audio('http://example.com/audio/audio.ogg');音声ファイルの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()メソッドを使って、指定したMIMEタイプの対応状況を判定する変数を作ります。
var canPlayOgg = ('' != myAudio.canPlayType('audio/ogg'));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';
}
音声ファイルの制御
myAudio変数へ音声ファイルを指定が済むと、HTMLAudioElementのメソッドで音声ファイルの制御ができるようになります。音声ファイルの制御として代表的なものは、「再生」「一時停止」「停止」などですね。
◎音声ファイルの「再生」
myAudio.play();◎音声ファイルの「一時停止」
myAudio.pause();◎音声ファイルの「停止」
myAudio.pause();
myAudio.currentTime = 0;オーディオプレイヤーの作成
上記の内容を踏まえて、簡単な音楽プレイヤーを作成してみました。
- 曲を「選択」すると曲が自動的に再生されます。
- 「一時停止」ボタンを押すと曲がいったん停止します。再度「再生」ボタンを押すと、停止したところから再生されます。
- 「停止」ボタンを押すと曲が停止します。再度「再生」ボタンを押すと、最初から再生されます。
- 再生される曲は私の自作曲です…。曲の詳細について、先日の投稿『HTML5のaudio要素（audioタグ）で自作デモ曲をマークアップしてみました』をご参照ください。
JavaScriptソース
詳細はソースコード内のコメントをお読みください。
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 = '/wp-content/uploads/music/'
+ audio_file_name + '.ogg';
var mp3 = '/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);
// 押されたボタンごとの処理を設定
var playAudio = function (myAudio, button) {
switch(button) {
case 'play': // 再生
myAudio.play();
break;
case 'pause': // 一時停止
myAudio.pause();
break;
case 'stop': // 停止
myAudio.pause();
myAudio.currentTime = 0;
break;
}
}
// 押されたボタンの種類を取得し、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);
}
}
HTMLソース
option要素のvalueの値にファイル名を指定します。
<form id="audio_form" name="audio_form">
<fieldset>
<legend>HTML5 Audio Player</legend>
<select name="audio_file" id="audio_file">
<option>♪曲を選択してください♪</option>
<option value="mm34">MM34</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アプリケーションが作れるのです。そのためにも、さらに技術力を磨く必要がありますね。
コメント