ワンダープラグイン 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をインストール!
ワンダープラグインのサイトからWordPress HTML5 Audio Playerをダウンロードします。
1.フリーバージョンをダウンロードします。
フリーバージョンは設定できる曲数が3曲までの制限があります。
ダウンロードしたzipファイル「wonderplugin-audio-free.zip」を解凍して、WordPressの wp-content > pluginsフォルダにアップロードします。
WordPressの管理画面>プラグインにて「WonderPlugin Audio Player」を有効にします。
以上でインストールは完了です。
WordPress HTML5 Audio Playerを設定しよう!
1.WordPressの管理画面のメニューの中にWonderPlugin Audio Player」の項目を確認して設定画面を表示します。
2.「Create New Audio Player」をクリックして新規にプレーヤーを設定していきます。設定ページ「New Audio Player」が表示されます。
プレーヤーの設定をします。1~4の赤いボタンがあるので順を追って見てみましょう。
1.MP3ファイル等の設定をします。
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」ボタンをクリック
2.プレーヤーのスキンを設定します。好みのスキンのラジオボタンを選択。
3.プレーヤーの詳細を設定します。
「自動再生」や「ランダム再生」などを設定。デフォルトでも大丈夫、好みに合わせて設定していきましょう。
スタイルシートでカラーなどの設定ができます。
4.プレビューしてみることができます。「Save&Publish」ボタンをクリック
ここでショートコードを取得します。
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でした。