音声の埋め込み

音声でのお知らせや、BGMなどをブログやホームページに埋め込む時、以前は、Flash playerを使うことが多かったと思います。

でも、Flash player は、iPhone や iPad では、表示されないので使うことができません。

今は、html5 のタグで簡単に再生することができます。

 

html5を使った音声の埋め込みは、とても簡単です。

まず、音声データとしてMP3ファイルを用意します。

M4AファイルやOGGファイルでも構いませんが、MP3が最も一般的でしょう。

 

ソースとしては、基本的に、これでOKです。

<audio src=”sample.mp3″></audio>

 

自動再生したい場合にはオプションに「autoplay」を付け加えます。

<audio src=”sample.mp3″ autoplay></audio>

 

更にループ再生したい場合には「loop」を使います。

<audio src=”sample.mp3″ autoplay loop></audio>

 

音声を出さずに再生するには「muted」・・・どんなときに使うのでしょう?

<audio src=”sample.mp3″ muted></audio>

 

再生、停止、ボリュームなどのコントローラーを表示したい時には、「controls」です。

<audio src=”sample.mp3″ controls></audio>

↑ 使っているブラウザによって、表示が変わります。

IEの最新バージョンだと、Windows8っぽい表示になっていて、ちょっとカッコイイかな。

 

それぞれ、IE、Chrome、Safari、Firefox で使えますのでお試しください。

 

起業して頑張っている人だけにオススメする8冊


 

私が買ってよかったパソコン&iPhone関連商品 トップ8