この要素を使うとわりと簡単に音源を再生したりできる。
今回はボタンをクリックしたときに音源を再生することを目標として、いくつかの方法とあわせてより実践的な実装方法をまとめていく。
イベントに応じて任意の音源を再生する
いちばん簡単な方法（HTMLに埋め込む）
<body>
<button id="play">Play</button>
<audio id="sound" src="./hoge.mp3"></audio>
</body>document.getElementById('play').addEventListener('click', function () {
var audio = document.getElementById('sound');
audio.play();
});これは単純にbodyタグの中にAudioタグを追加して、JavaScriptでボタンがクリックされたら要素を取得してplayしている。
動的に音源を読み込んで再生する（その1）
<body>
<button id="play">Play</button>
</body>document.getElementById('play').addEventListener('click', function () {
var audio = document.createElement('audio');
audio.id = 'sound';
audio.src = './hoge.mp3';
document.body.appendChild(audio); // ← この時点で音源が読み込まれる
document.getElementById('sound').play();
});最初からHTMLにAudioタグを追加しておくのではなく、ボタンがクリックされてからAudioタグをBodyに追加している。
動的になっただけで、やっていることは「いちばん簡単な方法」と同じだ。
動的に音源を読み込んで再生する（その2）
<body>
<button id="play">Play</button>
</body>document.getElementById('play').addEventListener('click', function () {
var audio = new Audio('./hoge.mp3');
audio.load();
audio.play();
});実はわざわざbodyとかに追加しなくても、element.play()で再生することができる。
再生後、不要になったAudioタグを消さなくて済むのでHTMLがキレイなままになってくれる。
ブラウザが対応している音源を読み込む
var audio = new Audio();
if (audio.canPlayType('audio/mp3')) {
audio.src = './hoge.mp3';
} else if (audio.canPlayType('audio/wav')) {
audio.src = './hoge.wav';
}canPlayTypeメソッドを使うと、今使っているブラウザがその音源のフォーマット（ｍｐ３やwavなど）に対応しているかがわかる。
対応している場合は、「Probaby」や「Maybe」という文字列が返ってくるので、それをもとに読み込む音源を選ぶことができる。
より実践的な使い方
// ロード処理とか
var sounds = (function () {
var audio = new Audio();
var ext;
if (audio.canPlayType('audio/mp3')) {
ext = '.mp3';
} else if (audio.canPlayType('audio/wav')) {
ext = '.wav';
}
return {
OK : new Audio('./ok' + ext),
CANCEL : new Audio('./cancel' + ext),
SUCCESS: new Audio('./success' + ext),
FAILURE: new Audio('./failure' + ext)
};
})();
// なんかのイベント中
sounds.OK.play();
sounds.CANCEL.play();
sounds.SUCCESS.play();
sounds.FAILURE.play();このような感じで、最初に各音源を読み込んだオブジェクトをそれぞれのイベント中で呼び出すことで、処理に応じた音源を再生することができる。
参考サイト
以上
written by @bc_rikko
0 件のコメント :
コメントを投稿