HTML5 Audio を JavaScript で使う方法

※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

このエントリーをはてなブックマークに追加
Pocket

HTML5 Audio を JavaScript で使う方法をざっくりと紹介します. タグとして書かず JavaScript のみで完結する使い方なので, 主にゲーム向きです. 私自身, ゲーム中の効果音などに使用している方法です.

SAMPLE AND DATA

サンプルはこちら.

データはここからダウンロードできます.

FLOW

HTML5 Audio を使って音を鳴らす流れ

  1. 使用しているブラウザでサポートされている MIME タイプを取得
  2. “ファイル名” + “MIME タイプの拡張子”で再生したいファイルへのパスを作成
  3. Audio エレメントを生成
  4. 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();

以上, 音を鳴らす方法でした. 近々(今週中)この方法を使って ピアノ の作り方でもまとめようと思っています. ちなみにこんなのができます.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT