[HTML5] 音を再生してみた

HTML5で音を再生する。それはaudioタグを使うだけの簡単な実装で実現出来ました。 HTML5は実際に触ってみて思いましたが、簡単に実装出来て、初心者に優しいのかも。 以下のサンプルは一部動作しないブラウザがあるかもしれません。 音声ファイルを１種類しか用意していないから。ChromeとSafariの最新版では動作しました。

http://www.yoheim.net/labo/html5/audio/audio1.html

audioタグの記載はこんな感じ。

<audio id="audio1" controls>
<source src="st001.mp3"></source>
<p>HTML5 Audioに対応したブラウザでご利用ください</p>
</audio>

audioタグと音声ファイルを指定するsourceタグ。これを記載する事で音再生の準備ができます。再生は、audioタグの属性でautoplay属性をつけるか、controls属性でブラウザ固有のコントローラーを表示し、ユーザーに再生指示をしてもらうかで、音が再生できました。

JavaScriptでオーディオを操作するのも簡単な実装でできました。

var audio1 = document.getElementById("audio1");
audio1.play();  // 再生
audio1.pause();  // 停止
audio1.volume += 0.1; // ボリュームを上げる（0.0～1.0）

上記のように簡単に、再生、停止、ボリューム操作ができました。

最後に

ブラウザとマシンの性能の許す限り、複数音声を同時にも再生できました。

HTML5のcanvas, video, audioを実装してきましたが、実装してみて思った事は、簡単に凄い事が出来るということ。HTML5を初めてまだ2週間ですが、こんなにも色々な事が簡単に出来るとは驚きました。

HTML5を一緒に学ぼうというFacebookページを運用中です。もし良ければ訪れて頂けると幸いです。

また私のTwitter（@yoheiMune）でも、HTML5やiPhoneアプリ開発の事を呟いていますので、宜しくお願いいたします。