HTML5 Audio を JavaScript で使う方法
HTML5 Audio を JavaScript で使う方法をざっくりと紹介します. タグとして書かず JavaScript のみで完結する使い方なので, 主にゲーム向きです. 私自身, ゲーム中の効果音などに使用している方法です.
SAMPLE AND DATA
サンプルはこちら.
データはここからダウンロードできます.
FLOW
HTML5 Audio を使って音を鳴らす流れ
- 使用しているブラウザでサポートされている MIME タイプを取得
- “ファイル名” + “MIME タイプの拡張子”で再生したいファイルへのパスを作成
- Audio エレメントを生成
- play() で鳴らす
CODE
サンプルのコードについての解説です.
全体のコード
<html> <head> <meta charset="utf-8"> <title>HTML5 Audio How To Use</title> <script> // 音データへのパス var SOUND_PATH = "./sound/"; // サポートされているファイル形式を取得 var AUDIO_EXT = (function(){ var audio = new Audio(); var ext = ""; if (audio.canPlayType("audio/ogg") == 'maybe') { ext="ogg"; } else if (audio.canPlayType("audio/mp3") == 'maybe') { ext="mp3"; } else if (audio.canPlayType("audio/wav") == 'maybe') { ext="wav"; } return ext; })(); // 確認 alert( "このブラウザがサポートしている拡張子は '" + AUDIO_EXT + "'です." ); // 再生 var play = function(element) { // ファイル名を取得 var name = element.getAttribute("name"); // パス + ファイル名 + サポートしている拡張子 var file_path = SOUND_PATH + name + '.' + AUDIO_EXT; // Audio エレメントを生成 var audio = new Audio(file_path); // 再生 audio.play(); }; </script> </head> <body> <h1>HTML5 Audio How To Use</h1> <button name="C3" onclick="play(this);">ド</button> <button name="D3" onclick="play(this);">レ</button> <button name="E3" onclick="play(this);">ミ</button> </body> </html>
1. 使用しているブラウザでサポートされている MIME タイプを取得
ブラウザによってサポートされている 音楽データのタイプが違うので, まずはそれを調べます. canPlayType(MIME) でチェックし, サポートされている場合 ‘maybe’ という文字列が返ってきます. 今回は, ogg -> mp3 -> wav の順番でサポートチェックを行っています.
// サポートされているファイル形式を取得 var AUDIO_EXT = (function(){ var audio = new Audio(); var ext = ""; if (audio.canPlayType("audio/ogg") == 'maybe') { ext="ogg"; } else if (audio.canPlayType("audio/mp3") == 'maybe') { ext="mp3"; } else if (audio.canPlayType("audio/wav") == 'maybe') { ext="wav"; } return ext; })();
2. “ファイル名” + “MIME タイプの拡張子”で再生したいファイルへのパスを作成
1 で取得したサポートされている MIME タイプの拡張子と再生した音楽ファイル名を連結させて最終的なファイルパスを作成します.
// ファイル名を取得 var name = element.getAttribute("name"); // パス + ファイル名 + サポートしている拡張子 var file_path = SOUND_PATH + name + '.' + AUDIO_EXT;
3. Audio エレメントを生成
Audio エレメントを生成します. コンストラクタ引数に 2 で求めた file_pathを設定します.
// Audio エレメントを生成 var audio = new Audio(file_path);
下記の方法でも同様の動作を実現できます.
var audio = new Audio(); audio.src = file_path;
4. play() で鳴らす
Audio エレメントのメンバメソッド play() を呼ぶことで音を鳴らすことができます.
// 再生 audio.play();
以上, 音を鳴らす方法でした. 近々(今週中)この方法を使って ピアノ の作り方でもまとめようと思っています. ちなみにこんなのができます.
HTML5 Audio を JavaScript で使う方法についてまとめました.
意外と簡単にできます. ゲームの効果音などにぜひ!!
http://t.co/LWJikhh
#html5 #audio #javascript
RT @phi_jp: HTML5 Audio を JavaScript で使う方法についてまとめました.
意外と簡単にできます. ゲームの効果音などにぜひ!!
http://t.co/LWJikhh
#html5 #audio #javascript
[…] 先日, HTML5 Audio の使い方について書きました. その際勉強ついでにピアノを作ったので公開します. 作り方もざっくりとまとめたのでよかったら参考にしてください. webkit-animation や display […]
[…] Audio の使い方についてはこちらに書いています. […]
TM Life http://bit.ly/nKQR68
jsでaudio
@phi_jp javascript で音を出したいと思っていたところ、phi さんの http://t.co/mP2noyCd が大変参考になりました。あったらいいな!と探していた基本的な情報が嬉しかったです。ありがとうございます!!
@phi_jp javascript で音を出したいと思っていたところ、phi さんの http://t.co/mP2noyCd が大変参考になりました。あったらいいな!と探していた基本的な情報が嬉しかったです。ありがとうございます!!
やっと見つけました!!
ありがとうございます!!!!!!!!!!!!!
役に立てて良かったです^^