音声セミナー･講座･音楽視聴をサイトに実装できる、HTML5 audio要素を使いこなそう

投稿：2017/10/13 更新： 2020/10/07 2504文字

今回は、管理人もこのサイトやお仕事受付サイトで使用している、便利なHTMLタグを紹介します(オーディオ)。ブラウザ対応やどんなサイトに使えるかなどを、さっそく確認していきましょう。

1 ■HTML5 audio要素とは？
- 1.1 ■そのまま！webサイトにタグでオーディオ再生機能を埋め込める
- 1.2 ■PCブラウザ･スマホ対応状況
2 ■HTML5 audioは、どのような業種･ジャンルのサイトに使えるの？
3 ■HTML5 audioの実装方法
- 3.1 ■通常のwebサイト
- 3.2 ■ワードプレスタイプ
4 ■あとがき

■HTML5 audio要素とは？

■そのまま！webサイトにタグでオーディオ再生機能を埋め込める

HTML5規格より登場した比較的新しい要素です。名前の通り、HTMLタグで『オーディオ再生機能』を、webサイトにつけることができます。しかもわりとカンタンに。

昔は（対応ブラウザが少なかった頃）、複雑なJavaScriptとかでオーディオプレイヤーを組んだり、flashで再生プレーヤー作ったりしていたので、行程が減ってweb屋的にもラクになりました。

■PCブラウザ･スマホ対応状況

mozillaディベロッパーのサイト https://developer.mozilla.org/ja/docs/Web/HTML/Element/audio に規格について書いてあり、ブラウザ対応についても述べられています（下のほう『ブラウザー実装状況』）。

コレをみる限り、最近のブラウザではほぼ対応できているとのこと。モバイルのAndroidに『？』って書いてありますが、管理人のスマートフォン（Android）や、IOSエミュレータでも動作したので、スマホもOKです。

ただし、ios（ブラウザ・モバイルsafari）、Androidのバージョンによっては、コントローラーの表示が異なるなどの事例が確認されていますので、古いバージョンのスマホを使っているユーザーが多い場合は注意してください。『https://www.google.co.jp/search?q=スマホ+audioタグ』（googleで検索してみました）

一番注意するのがIE（インターネットエクスプローラー）ですが、9以降とのこと。11ではプレイヤー表示できました。

ブラウザシェアでIE8～9などのユーザーは合わせて数%なので、ほぼすべてのユーザーに対応可能です。『オーディオファイルに直接リンク』なども用意しておくと、古いIEユーザーも大丈夫です。てかこの層は、PCこわれたりしたら、そのうちMicrosoft Edgeに移行しそうです。

■HTML5 audioは、どのような業種･ジャンルのサイトに使えるの？

■音声セミナー･コンサルティング

音声がのせられるので、『成功に必要なマインドセット』『集客の心得』みたいなのを語って録音し、サイトにのせることができます。

図や資料、身ぶり手振りが入る場合はYouTube、音声のみでどうにかなるならaudioタグと使い分けましょう。

■教室･レッスン（語学･音楽）

ぶろぐ記事部分にワンポイントレッスンを書き、オーディオで補足することにより、語学や音楽レッスンのサイトにも使えます。

『発音記号見ても覚えられないなら聴いて覚える』『譜面見てもわからないから、聴いて覚える』コレでOKです。

■ミュージシャン･音楽クリエイター

コレは説明不要なので省きます。

■HTML5 audioの実装方法

■通常のwebサイト

まずはHTML5のドックタイプ宣言を、HTMLの一番上に。 HTML5ドックタイプ宣言は『<!DOCTYPE html>』と書きます。なぜかというと『5』からの機能につき、HTML4やXHTMLだと動くかわからないからです。（ちなみにドックタイプ宣言が4でも、ブラウザが『タグが5だ』と判定するかは未確認です。やってみようかな時間があれば。）

オーディオタグを入れて、再生させたいオーディオファイルのURLを指定します。『<audio src=”音声ファイル場所” controls></audio> 』のように。コレは事前にサーバーアップしておきましょう（mp3やwavが載らない無料サーバー、かつオーディオファイル置き場がない場合は使えません）。ちなみに後ろの『controls』は、『コントローラー表示する属性』です。ここには絶対『autoplay』と書かないように！