音声でのお知らせや、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
参考記事：自撮りするなら広角レンズがオススメ
こんにちは。試行錯誤していたとき、このページのおかげで助かりました。
上記リンクでご紹介させていただいてます。問題ありましたらお知らせください。
よい記事をありがとうございました！
あかねさん
私の記事が、少しでもお役に立てたようで、とても嬉しいです。
そして、当記事を紹介して頂き、ありがとうございました。
また、何かパソコン関係でご不明なことがありましたら、直接お問合せ頂いても構いませんよ。
わかりやすい解説ありがとうございました！サンプルで笑ってしまったので記念に書き込みます笑
コメント、ありがとうございます。
サンプル、好きな曲なんですよ（笑）
このやり方が一番簡単でした。ただ、コントローラが大きいので、IEで動かしていた「embed src で始まるhtmlを使っています。コントローラーの大きさは変えられないでしょうか。
記事の最後に、コントローラーの大きさを変更する方法を追記しました。
参考にしてください。
はじめてコメントさせていただきます。
とても参考になりました、ありがとうございました！
音声の再生速度の変更機能をつける方法を探していますが、HTMLでは実現は難しいでしょうか？
もし良い方法をご存知でしたら教えていただきたいです。
どうぞよろしくお願いいたします。