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などでも使えますのでお試しください。

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

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

Tech×不動産のStartup!!
「新たな不動産取引のカタチ」

「不動産会社はどれだけ儲けているの??」そんな独特な日本の不動産業界に少しでも影響が与えられ、お客様が喜んでいただけるサービスを常に試行錯誤。あたりまえのことがあたりまえではない世の中で、あたりまえのことをして行く。 ご購入をご検討のお客様は、「仲介手数料無料サービス」も行っております。(※すべての物件が仲介手数料無料ではないので、お気軽にご相談ください。)

ムダな仲介手数料をお支払いする可能性も?!
「仲介手数料無料サービス」

すべての物件が対象という訳ではないのですが、仲介手数料無料でも不動産ビジネスとして成立することが多々あります。不動産購入や不動産売却の「仲介手数料無料サービス」 は、お気軽にご相談ください。(※すべての物件が仲介手数料無料ではないので、お気軽にご相談ください。)

コメントを残す