[WordPress] 音声ファイルの再生
WordPress 3.6 から標準でメディアプレイヤーを埋め込めるようになり、MP3 などの音声ファイルが再生できます。
Demo
メディアプレイヤーの表示
方法は、「メディアを追加」から音声ファイルをアップロードして、投稿に埋め込むだけです。このとき「Embed Media Player」を選びます。アップロードせず、ショートコードを編集して URL を直接指定してもメディアプレイヤーを表示できます。
クロスブラウザー対応で環境にあわせて HTML5 や Flash、Silverlight などが利用されます。利用しているライブラリー MediaElement.js に対応表があります。
audio ショートコード
メディアプレイヤーは、WordPress のショートコードとして挿入されます。auto ショートコード には、次のようなオプションが用意されています。
ファイルの指定
[audio src="audio-source.mp3"]
[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav"]
src にファイルの URL を指定します。mp3, ogg, wav などを使ってブラウザーに合わせて各ファイルタイプの指定もできます。’mp3′, 'm4a’, 'ogg’, 'wav’, 'wma’ が使えるようです。
ループ再生、自動再生
[audio src="audio-source.mp3" loop="on" autoplay="on"]
loop と autoplay を指定してループ再生、自動再生の指定ができます。
プリロード
[audio src="audio-source.mp3" preload="auto"]
preload="auto" で、ページロード完了後にメディアファイルをロードします。prelaod="metadata" と指定するとメタデータのみロードします。
WordPress Audio Player との比較
このサイトでは、WordPress Audio Player プラグインを利用していましたが、少し実装方法が古く、HTML コード内でプラグインの JavaScript の参照位置が先頭付近にありページ読み込み速度に不利です。また、すべてのページで参照し、不要な読み込みもありました。
WordPress のメディアプレイヤーは必要なページでのみメディアプレイヤーの JavaScript を参照し、HTML コード内の参照位置も適切です。
Audio Player は更新も停止しているため、WordPress 標準に移行したほうがいいかもしれませんね。