ブラウザで音声ファイルを再生する（wav）
ブラウザ上に再生ボタンを設けて音声ファイル（wav）の再生を行いたいとの要件に対応するため、調べた内容をメモ。
実行環境
- OS：Windows(7、10)
- ブラウザ：IE(10、11)、Chrome
- その他：HTML5、CSS3、Jersey（サーバ側フレームワーク Strutsベース）
以下、時系列、かつ、箇条書きに対応内容を記述する
audioタグを使う
使用してみたところ、IEのみwavファイルが未対応だった。（wavってmicrosoft謹製ではないのか。。。？）
Chromeでは問題なく動作した。
embedタグを使う
このタグの場合IEでは思うように動作しなかった。
また、Chromeで動作したが、ブラウザの開発者ツールにて確認するとvideoタグに置き換わっていた。
Chromeはaudioタグを使う
videoタグでも再生はできているが、音声ファイルを扱うことを考えるとembedを使うよりもaudioを使ったほうがよいと判断。
IEはobjectタグ
objectタグでWindowsMediaPlayerを使って再生することで、IEで音声ファイルの再生に成功。
objectタグのclassid属性について
どのプラグインを使うかの指定をするためのもの。
HTML5では廃止になっている。
⇒IEで未指定は問題なく動作したが、Chromeの場合再生ボタン等のコントローラが非表示になってしまった。
IE、Chromeともに指定ありで動作するため、指定ありとする。
再生、停止をコントローラを使わず、javascriptで行う
再生、停止ボタンのUIを任意のものとしたいため、ブラウザ標準で表示されるコントローラではなく、他のボタン要素を用意、押下することで再生/停止するようにする。
⇒再生/停止は、IE、Chromeともに動作した。ただ、再生終了した時に再度再生ボタンを押下しても再生されない。内部的に保持している再生/停止の区分値が再生中のままとなっていた。
javascriptで再再生を実現する
再生終了時のイベントにファンクションを仕掛けて、再生/停止の区分値を再生終了に変更するようにする。
⇒audioタブでは問題なくイベントを拾えたが、objectタグではイベントが拾えなかった。
（未確認だが、恐らく、objectタグはActiveXControll使用してWindowsMediaPlayerを呼び出している。このためjavascriptによる動的なイベントハンドラの追加はできなかったとみられる。。）
⇒scriptタグを使用。for属性にobjectタグのIDを、event属性に再生状態変更のイベント名（PlayStateChange）を指定することで、audioタグと同様の動作をさせることに成功。
以下にソースを転記。
<head>
<script type="text/javascript" for="audioJa" event="PlayStateChange(NewState)" >
if (NewState == 1) {
$("#JaPlay").show();
$("#JaPause").hide();
}
</script>
</head>
<a href="#" id="Ja" class="chk_btn" onClick="fnStart(this);"><img class="play" id="JaPlay" src="${pageContext.request.contextPath}/images/play.png"><img class="play" id="JaPause" style="display:none;" src="${pageContext.request.contextPath}/images/pause.png"></a>
<object id="audioJa" class="hidden" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" standby="Loading Windows Media Player components..." type="audio/wav">
<param name="AutoStart" value="false" />
<param name="URL" value="${it.synthesisDataPathJa}" />
<audio id="audioJa">
<source type="audio/wav" src="${it.synthesisDataPathJa}"/>
</audio>
</object>
ちなみに、scriptタグのfor、event属性はIEのみ有効。このため、IEとChromeでjavascriptの内容も分けることにした。
/**
* オーディオ再生
* @param elem クリックしたボタン要素
*/
function fnStart(elem) {
var id = $(elem).prop("id");
var audio = null;
// IE用のスクリプト
if ($("#audio" + id)[0].playstate && $("#audio" + id)[0].playstate != 0) {
audio = $("#audio" + id)[0];
if (audio.playstate == 3) {
$("#" + id + "Play").show();
$("#" + id + "Pause").hide();
audio.controls.pause();
} else if (audio.playstate == 10 || audio.playstate == 1 || audio.playstate == 2) {
$("#" + id + "Play").hide();
$("#" + id + "Pause").show();
audio.controls.play();
}
// Chrome用のスクリプト
} else if ($("audio#audio" + id)[0].duration) {
audio = $("audio#audio" + id)[0];
$(audio).on("ended", function(){
$("#" + id + "Play").show();
$("#" + id + "Pause").hide();
});
if (audio.ended) {
$("#" + id + "Play").hide();
$("#" + id + "Pause").show();
audio.play();
} else if (audio.paused) {
$("#" + id + "Play").hide();
$("#" + id + "Pause").show();
audio.play();
} else if (audio.played) {
$("#" + id + "Play").show();
$("#" + id + "Pause").hide();
audio.pause();
}
}
}
上記のようにして、ブラウザ上で音声ファイル（wav）の再生を実現した。