音声の埋め込み

音声でのお知らせや、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 で使えますのでお試しください。

 
ちなみに、コントローラーの表示を変えるときには、style=”width:幅;height:高さ” で大きくしたり小さくしたりできます。

 

《幅を小さく》

<audio src=”/images/sample.mp3″ controls=”controls” style=”width:20px;”></audio>

 

《高さを小さく》

<audio src=”/images/sample.mp3″ controls=”controls” style=”height:100px;”></audio>

 

《幅も高さも小さく》

<audio src=”/images/sample.mp3″ controls=”controls” style=”width:100px;height:10px;”></audio>

 

 

Amazonプライム会員なら無料で読めるビジネス書4選

上を目指すために読んでおきたい8冊


 

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