東北・仙台市拠点のwordpressエバンジェリストが送る、 動画・webサイト制作・wpプラグイン・SNS活用・bgmやテーマ曲アレンジまで考えるコラム!

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

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

   

こんにちは、管理人@SS_mshpです。

今回は、管理人もこのサイトやお仕事受付サイトで使用している、便利なHTMLタグを紹介します(オーディオ)

ブラウザ対応やどんなサイトに使えるかなどを、さっそく確認していきましょう。

■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』と書かないように!

載りました。管理人のサイトにつけるとこんな感じになります。

ちなみに、IE11だと

プレイヤーがでっかくなります(笑)

■ワードプレスタイプ

ワードプレスでのHTML audio実装はめちゃくちゃ簡単です。アクセス状況によってHTML5やFlashになったりすると、どこかに書いてありました。

プレイヤーで再生させたいオーディオファイルを、メディアライブラリにアップロード。

個別記事や固定ページ編集画面で、

任意の場所でメディア追加でオーディオを選ぶと、オーディオプレーヤーのタグが入ります。

以上。

このサイトはワードプレスタイプにつき、こちらの方法でやっています。

↑上記のタグでワードプレスに入れるとこうなります。

■あとがき

とりあえず、HTML5 audioブラウザ対応や付け方、利用例などをサクッとみてきました。
音声ファイルを使って、利用客に分かりやすいサイトにできそうな場合は、ぜひ導入を検討してください。



【カテゴリ】 - webサイト制作 【タグ】 -

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

【wpプラグイン】スライドショー実装でwebサイトをリッチにする『Slider by WD』

今回は、ワードプレスでサイトにスライドショーを実装します。 名前は『Slider by WD』。『Responsive Slider for WordPress …

ワードプレス・ブログメディアで、ヘッダー画像を変える2通りの方法【phpモバイル非表示有】

今回は、ワードプレス・ブログメディアのサイトを作ったときに、ヘッダー(上についている画像)を変更する方法をお話します。 このサイトでも、時期に応じてヘッダーを変 …

【サイト高速表示】ワードプレステーマ・stinger(5)のCSS軽量化!どれくらい小さくなる?

今回は、前回やったCSS縮小続きで、『書き方変えたり、いらない部分カット』で、ワードプレステーマ・stingerのCSSサイズを縮小します。 画像はfreeim …

ワードプレスサイト高速化失敗例(ページスピードスコア低下)→最後にjsで読み込むCSS

今回は、管理人が重いワードプレスサイトを高速表示しようとして、失敗した事例(ページスピードスコアが逆に低下)をお話します。 特にCSSの読み込みに関するチューニ …

ワードプレスで画面真っ白で積んだとき、データベースから記事データを抜いて復旧

今回は、ワードプレスで、画面真っ白でどうしようもなくなったときの復旧方法です。 前回は『テーマインストール時にエラーが発生したときの復旧』でしたが、今回はさらに …

CSSを限界圧縮してヘッダーに書くと、表示速度は速くなるの?(fc2ぶろぐで実験)

今回は、サイトを高速表示するCSSの書き方についてです。 管理人が昔使ってたfc2ぶろぐがあったので(fc2は外部ファイル読み込み・ヘッダーに書く、両方できる) …

【WPプラグイン】PDFで、ワードプレスを電子書籍風にできる『PDF light viewer』

今回は、ワードプレス&WPプラグインを使って、めくれる電子書籍風のページを実装したサイトを作ってみます。 使用するプラグインは『PDF light viewer …

検索エンジンに登録されやすくするため、xmlサイトマップ作成~ツール・wpプラグインなどのやり方紹介

今回は、ちょっと更新の必要がでてしまったため、xmlサイトマップを扱います。 googleなどの検索エンジンに送ったりするファイルで、きちんと登録されているとよ …

ワードプレスサイトを独自ドメインで公開するまでの流れや注意点

今回は、最近何件か対応させていただいている、ワードプレスサイト制作についての話題です。 サーバー借りてインストールしたまでは良いけど、ではドメインどうするの?と …

ワードプレス派が覚えると便利なPHP~投稿記事・固定ページ指定して表示/非表示

今回はワードプレスサイト制作で使えるテクニックです。 PHPで使う条件分岐&ワードプレスタグを組み合わせて、投稿ページ/固定ページで表示/非表示を行っ …