音を再生してみた

HTML5

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

http://www.facebook.com/pages/HTML5Learners/204670386227533


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アプリ開発の事を呟いていますので、宜しくお願いいたします。


関連エントリー