ブラウザで音声ファイルを再生する（wav）

# ブラウザで音声ファイルを再生する（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タグと同様の動作をさせることに成功。

以下にソースを転記。

```jsp:jsp　IE用の再生状態変更イベントの設定
<head>
    <script type="text/javascript" for="audioJa" event="PlayStateChange(NewState)" >
		if (NewState == 1) {
			$("#JaPlay").show();
			$("#JaPause").hide();
		}
    </script>
</head>
```
```jsp:jsp　Objectタグ
    <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の内容も分けることにした。

```js: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）の再生を実現した。