Webサイトなどに音声を埋め込む方法

ちょっと古いやり方をふと思い出しましたので…lol

音声でのお知らせや、Webサイトにおしゃれな、またはかっこいい音声を埋め込む時、今までは、Flash playerを使うことが多かったと思いますが、Flash playerはiPhoneやiPadでは表示されないので使うことができません。

最近はHTML5のタグで簡単に再生することができます。

HTML5を使った音声の埋め込み方法は、シンプルです。

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

M4AやOGGファイルでも大丈夫なようですが、MP3やMP4が一般的。

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

ちなみに今回は音声ファイルを入れていないので、最後に再生ボタンタグなんかが出るようにしておりますが、今回は特に音声は入れておりませんので、音声が流れませんので。

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

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

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

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

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

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

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

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

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

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

IEの最新バージョンだと、Windows10っぽい表示になっていて、ちょっといいかもしれませんね。

IEのほかにもGoogle ChromeやSafari,Firefoxなどでも使えますのでお試しください。

わたしたちも視力に障害のある方や日本語がわからない方のために良いかなあとおもっておりましたが、逆に紛らわしくなりそうでしたので、あえて外しております。

視力に障害のある方や日本語がわからない方…すみません…

コメントを残す