プラグイン「WordPress HTML5 Audio Player」インストール&設定方法!

wonder_audio_player001

ワンダープラグイン WordPress HTML5 Audio Playerを導入しました。
やっとみつけた見た目もバツグンのWordPress用プラグイン「WordPress HTML5 Audio Player」!

主張し過ぎないナチュラルな感じと完成度のあるプレーヤーで、さらにスタイルシートでサイズやカラーなどデザインのカスタマイズができちゃう「WordPress HTML5 Audio Player」。

有料のコマーシャルバージョンもあるようですが、フリーバージョンをご紹介したいと思います。

スポンサーリンク

WordPress HTML5 Audio Playerとは?

プラグイン「WordPress HTML5 Audio Player」の現時点でのバージョンは2.0。
WordPressのバージョンは3.3以上に対応。
MP3ファイルを再生し、iPhone、アプリ、アンドロイド、Firefox、Chrome、Safari、OperaおよびInternet Explorer7/8/9/10/11で動作します。

WordPress HTML5 Audio Playerの機能

再生/一時停止ボタン
送り/戻りボタン
ボリューム調整
自動再生やループ再生、ランダム再生も可能です。

曲名 アーティスト名 アルバム名 タイム プログレスバーの表示ができます。

WordPress HTML5 Audio Playerをインストール!

wonder_audio_player01_336ワンダープラグインのサイトからWordPress HTML5 Audio Playerをダウンロードします。

1.フリーバージョンをダウンロードします。
フリーバージョンは設定できる曲数が3曲までの制限があります。

ダウンロードしたzipファイル「wonderplugin-audio-free.zip」を解凍して、WordPressの wp-content > pluginsフォルダにアップロードします。

WordPressの管理画面>プラグインにて「WonderPlugin Audio Player」を有効にします。

以上でインストールは完了です。

WordPress HTML5 Audio Playerを設定しよう!

wonder_audio_player02_3001.WordPressの管理画面のメニューの中にWonderPlugin Audio Player」の項目を確認して設定画面を表示します。

2.「Create New Audio Player」をクリックして新規にプレーヤーを設定していきます。設定ページ「New Audio Player」が表示されます。

 

wonder_audio_player03
プレーヤーの設定をします。1~4の赤いボタンがあるので順を追って見てみましょう。

 
1.MP3ファイル等の設定をします。
wonder_audio_player05

MP3 URL MP3ファイルのある場所のURLを入力します。
「Upload」ボタンをクリックしてWordPressのライブラリーに保存しているファイルも選択できます。
「This is a live streaming」をクリックするとストリーミング再生になります。その場合、ストリーミングなのでプログレスバーは動かないようです。
OGG URL OGGファイルの再生を設定する場合MP3同様にURLを設定できます。
Enter image URL 曲ごとに画像が設定できます。
Title 曲のタイトルを入力
Album アルバム名を入力
Informaiton 曲の説明を入力
Duration(seconds) 曲のタイムを秒数で入力

入力が済んだら「OK」ボタンをクリック

 

wonder_audio_player062.プレーヤーのスキンを設定します。好みのスキンのラジオボタンを選択。

 

3.プレーヤーの詳細を設定します。
wonder_audio_player07

「自動再生」や「ランダム再生」などを設定。デフォルトでも大丈夫、好みに合わせて設定していきましょう。

 
wonder_audio_player08

スタイルシートでカラーなどの設定ができます。

 

wonder_audio_player09
4.プレビューしてみることができます。「Save&Publish」ボタンをクリック

wonder_audio_player10

ここでショートコードを取得します。
1.投稿ページや固定ページに貼り付ける場合はこちらから。
2.テーマファイルに貼り付ける場合はこちらから。
ウィジェットに貼りたい場合はこちらをご参考に…
WordPressのウィジェットでも使える!ショートコードの使用方法|WP カスタマイズ
にて詳細がわかるかと思います。

デメリットポイント

● 「jquery.min.js」(1.8.0)を使用してる場合、コンフリフトを起こすので対策が必要。
● ソースを見るとWordPress HTML5 Audio Playerの直前にスタイルシートが記述されているので、SEO対策としては改善したいところ。

最後に

WordPress HTML5 Audio Playerをみつけたときは、FlashやjQueryのタイプなどたくさんあるなか、「理想的なMP3プレーヤーが見つかった」と思いました。

これだけの完成度で、更にサイトに合わせていろいろ変更できるプレーヤーということで、個人的には「満足」のひとこと。

フリーバージョンは3曲までの設定というのも、考え方次第。頻繁に曲を設定し直すのもいいですし、デメリットポイントが解消されたら有料バージョンにしてもいいかなと思いました。

デザインもさることながら、曲の設定も簡単でわかりやすいのでおすすめのプラグイン、WordPress HTML5 Audio Playerでした。

 

  • スポンサーリンク
  •  

関連記事

コメントを残す

メールアドレスが公開されることはありません。名前・コメント・画像認証が必須となっています。


*