HTML5/iPhoneでもできる音の鳴らし方

http://ascii.jp/elem/000/000/533/533100/index-2.html

iPhone/iPadの制限

PCのブラウザの場合は、音を重複して鳴らすことが可能である。
ただし、iPhone/iPadだと同時に１音しか鳴らせない。

html5 audioタグを使う

<audio src="./audio.wav" controls />

……とやるだけで音楽再生のシークバーが表示される。
ブラウザ間でサポートフォーマットが違うため、複数のソースを指定する方法もある。

<audio controls loop>
	<source src="./audio.wav">
	<source src="./audio.ogg">
	<p>HTML5 Audioに対応していません。</p>
</audio>

audio要素をスクリプトで制御

audio要素をhtml内に記述して動かす方法。
下のソースは実際は動かないが、こういうイメージで使う。

<script>
var myAudio = document.getElementById("myAudio");
myAudio.play();               //再生
myAudio.pause();              //一時停止
myAudio.volume += 0.1;        //音量アップ 0.0〜1.0
myAudio.volume -= 0.1;        //音量ダウン 0.0〜1.0
myAudio.currentTime = 0;      //巻き戻し
myAudio.loop = true;          //繰り返し
//再生可能形式か判定
if ((new Audio()).canPlayType("audio/wav") == "maybe") alert("wavは再生可能です");
//再生終了時に発生するイベントを利用
myAudio.addEventListener('ended', function() { this.currentTime = 0; this.play(); });
</script>

<audio id="myAudio" src="./audio.wav" controls>

audio要素をscript内に記述して動かす方法。

<script>
var myAudio = new Audio("./audio.wav");
myAudio.play();
</script>