[WordPress] 音声ファイルの再生

WordPress 3.6 から標準でメディアプレイヤーを埋め込めるようになり、MP3 などの音声ファイルが再生できます。

mediaelement

Demo

メディアプレイヤーの表示

mediafile

方法は、「メディアを追加」から音声ファイルをアップロードして、投稿に埋め込むだけです。このとき「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 標準に移行したほうがいいかもしれませんね。