2012/01/11更新

[HTML5] 音を再生してみた

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

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

f:id:yoheiM:20110402190105p:image

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







こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。