Audioタグ
HTML5でAudioタグが追加されました。
これまでWebサイトに音楽(オーディオ)を流したいときはFlashなどのプラグインを利用しなければなりませんでしたが、このタグの登場で、簡単にWebサイトにオーディオプレイヤーを実装することができるようになりました。
audioタグはそれだけでも十分に活用できますが、さらにJavascriptと組み合わせることにより、さらに便利になります。
この記事ではそれを少し紹介できればと思います。
andreas160578 / Pixabay
一番簡単な使い方
Webサイトに音声ファイルを流すにはこれだけ。
<audio src="sample.mp3" controls="controls">ブラウザをアップデートしてください。</audio>
使える属性
audioタグで有効な属性です。
- src
- preload
- autoplay
- loop
- controls
src属性
音声ファイルを値で指定します。
preload属性
音声ファイルをあらかじめ読み込みます。
通常は再生ボタンを押したときにファイルをロードしますが、これを指定しておくことで、再生ボタンを押す前に再生準備をすることができます。
属性値は以下の3種類です。
- auto
自動、ブラウザ依存 - metadata
メタデータのみ読み込む - none
あらかじめ読み込まない
なお、スマホなどのモバイルブラウザではどの値を指定してもnoneになります。
これは通信量を抑えるためで、ユーザーが再生ボタンを押すまでファイルはロードされません。
autoplay属性
音声ファイルが自動的に再生されます。
モバイルブラウザでのページを開いたあと最初の再生にはユーザーアクションが必要で、モバイルブラウザでは無視されます。
loop属性
ループ再生されます。
controls属性
コントロールを表示します。下記しますが、この属性で表示されるUIはブラウザごとに異なります。
以上のすべてを有効にすると、こんな感じ
<audio src="sample.mp3" preload="" autoplay="autoplay" loop="loop" controls="controls">ブラウザをアップデートしてください。</audio>
ブラウザ上の表示(PC)
上記の方法で簡単にAudioをWebサイトに載せることができるのですが、困ったことにブラウザによって表示が異なります。
以下に各ブラウザのスクショとサイズを掲載します。
Chrome 62
Chrome系はみな同様の表示になりますね。
Edge 40 (300 x 30)
Microsoftはまた独特のUIを用意しています。
Internet Explorer 11 (532 x 64)
かつての王道ブラウザ。
なぜかEdgeと表示が異なります。
Internet Explorer 10 (532 x 52)
IE11の開発者ツールでエミュレートしたIE10のAudioコントロール。
なぜかIE11とサイズがちがう。
ちなみにIE10とIE9は同様で、少し安心しました笑
Internet Explorer 8 (-)
まだこんなブラウザ使っているひといるのでしょうか？
Web製作者の敵IE8では、HTML5に対応していないためaudioタグで囲まれた文字列が表示されます。
ブラウザ上の表示(iOS)
iOS 11 Safari (500 x 62)
iOS 11 Chrome (500 x 62)
iOS 11 Firefox (500 x 62)
iOSではどのブラウザでも同様のUIですね。
ブラウザ間の違いまとめ
ブラウザによってデザインが違うどころか、できることも違います。
PC版Chromeではファイルのダウンロードができますが、Internet Explorerではそれはできません。
ですが、同じIE間でもデザインが異なります。
というか、サイズも違っていて、ブロック要素として配置するときにものすごく困りますね。
また、ブラウザごとにデザインが異なるせいで、Webサイトに統一感を必要とするときや、印象なども変わってきてしまいます。
そこで、基本的には、標準コントロールは使わず、Javascriptをあわせてオリジナルコントロールを作る方法が一般的かもしれません。
JavaScriptにより、読み込み量や再生位置の変更、次の曲を自動再生など、できることが広がります。
コメント