音声ファイル（サウンドファイル）の埋め込み [HTML5] [js] [jQuery]

2014年に制作した記事を2016/08に加筆修正

webページに音声ファイルを埋め込むのに、html5ではaudioタグが使えます。これが使えるとかなり楽です。
とはいえ、企業によっては古いIEもサポート対象にしていることもあると思うので、古いIEの対応方法についても説明します。

sample

html

<audio src="サウンドファイルのパス" preload="auto" controls></audio>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

これだけで、音声ファイルを貼り付けられます。cssは幅ぐらいしか効きません。

  • controlsオプションがないとコントローラーが表示されません。コントローラーの見た目はOS・ブラウザそれらのバージョンの組み合わせによって異なります。・・・困ります。
  • preloadオプションはファイルの先読みをどうするか指定するものです。autoにすると先読みします。
  • その他自動再生、ループといった属性がありますが、OS・ブラウザそれらのバージョンの組み合わせによって挙動が異なるようです。使用の際は注意してください。
  • 先にも書きましたように、コントローラーの見た目が環境によってまちまちなので、独自デザインをあてたいときはjsを駆使することになります。詳しくは以下を参考にしてみてください。
    ＜参考＞video要素、audio要素をJavaScriptから操作する － HTMLクイックリファレンス
    google先生に訊いてみても良いと思います。

sample（複数のファイル形式）

OS・ブラウザそれらのバージョンの組み合わせによっては再生できるサウンドファイルの形式が異なるので、複数のファイル形式を同時に読み込んで、再生できるものを自動的に再生してくれるようです。

html

<audio preload="auto" controls>
    <source src="mp3サウンドファイルのパス" type="audio/mp3">
    <source src="oggサウンドファイルのパス" type="audio/ogg">
    <source src="wavサウンドファイルのパス" type="audio/wav">
    <p>※ご利用のブラウザでは再生することができません。</p>
</audio>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

audioタグの中にタイプを指定して複数の形式のサウンドファイルを指定できます。audioタグに対応していないブラウザに対してメッセージを表示させることもできます。

sample（oldIE対策）

audioタグはIE8以下では動作しません。そこで、対策方法の一つとしてembedタグを使う方法があります。
embedはもともとNetscape Navigator（なつかしいなぁ・・・）の独自要素でしたが、html5では採用されているタグです（HTML4では非推奨タグ）。oldIEでも使えます（バリデートチェックするとエラー出るかもだけど）。
方法はこれに限らないので、あくまでも参考として、もっとスマートな方法を思いついたらそちらをご使用ください。

ついでにaudioタグに対応しているブラウザでは、コントローラーを非表示にして、独自デザインの再生ボタンを設置してみたいと思います。
ここではModernizr（サイト内リンク）とjQueryを用いてaudioタグ対応のブラウザの場合の処理を追加します。

html

<audio id="audio" preload="auto">
    <source src="mp3サウンドファイルのパス" type="audio/mp3">
    <source src="oggサウンドファイルのパス" type="audio/ogg">
    <source src="wavサウンドファイルのパス" type="audio/wav">
    <embed src="IE8以下で再生できるサウンドファイルのパス" type="audio/mp3" autostart="false">
</audio>
<button onclick="audioPlay()">>再生</button>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

上記の複数のファイル形式でaudioタグ未対応のブラウザの場合、メッセージを表示させましたが、そのpタグの代わりにembedを記述します。

このサンプルではaudioタグに対応しているブラウザで独自の再生ボタンを設置したいので、buttonタグも記述しました。
buttonタグをクリックしたら（onclick）、後述するaudioPlay関数を実行します。
なお、どのaudioを再生させたいのかわかるようにaudioタグにidをつけます。id名は任意ですが、ここではaudioとしました。

css

button{
    /*ボタンのデザイン*/
}
button.playing{
    /*再生中の表示*/
}
embed{height: 30px;width: 100px;} /*embedの表示サイズ*/

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

再生ボタン用のデザインをcssで設定します。
embedタグのサイズ指定は、cssではなく、タグのwidth属性・height属性で行っても構いません。

js

if (Modernizr.audio) { //audioタグに対応している場合
    function audioPlay(){
        document.getElementById('audio').play();
        $('button').addClass('playing');
        document.getElementById('audio').addEventListener("ended", function(){
            $('button').removeClass('playing');
        }, false);
    }
} else { //audioタグ未対応の場合
    $(function(){
        $('button').remove();
    });
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

jsのみで記述することも可能ですが、今回はjqueryを使うので、jqueryライブラリを読み込んでいることが前提です。
また、ブラウザの判定をModernizrで行っているので、Modernizrのaudio要素で判定するjsを読み込んでいることも前提です。

  1. if (Modernizr.audio) 〜 else 〜でaudioタグに対応しているかどうかを判定。未対応の場合の処理はelseの方に書く。
  2. 2～8行目：buttonタグがクリックされたときに実行したい処理をaudioPlay関数に記述（関数名は任意）。
  3. 3行目：id[audio]を再生。
  4. 4行目：再生中なのがわかるようにボタンの表示を変えたいので、その設定をしているclass[playing]をbuttonタグに追加。
  5. 5〜7行目：再生が終わったときの処理。ここではbuttonタグに追加しておいたclass[playing]を削除。
  6. 10～12行目：audioタグ未対応の場合の処理。ここでは不要なbuttonタグを削除。

プラグイン（サイト内リンク）を用いる方法もあります。
プラグインについては、以前audio.jsを紹介していたのですが、どうやら使えなくなってしまったようです。

戻る

Top