Audioタグの使い方

Web関連
andreas160578 / Pixabay

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により、読み込み量や再生位置の変更、次の曲を自動再生など、できることが広がります。

コメント

タイトルとURLをコピーしました