AudioIgniter Music Playerで、サムネイル付きのプレイリストを作成

WordPressでは、YouTube以外にも、いろいろなメディアの埋め込みが出来ます。今回は、AudioIgniter Music Playerで、サムネイル付きのミュージックプレイリストを作成する方法を紹介します。

今回のDEMOは、Garage Bandで作成した音楽のプレイリストです。

5曲の音楽をプレイリストにしました。再生、音量調整、オールリピート再生が出来ます。

Tracks

プラグインをインストール、有効化をします。左サイドバーのAudioInniterAdd New Playlistをクリックします。プレイリスト作成画面が表示されるので、タイトルを入力します。

AudioInniterAdd New Playlistをクリック

タイトルを入力

Add Trackボタンをクリックし、5つのトラックを作成します。Audio file or radio streamのUploadをクリックし、メディアライブラリから曲のファイルを選択し、選択ボタンをクリックします。5つのトラックに曲を挿入します。Titleの曲名を変更し、Artistに名前を設定します。

5つのトラックを作成

メディアライブラリから曲のファイルを選択

5つのトラックに曲を挿入

Titleの曲名を変更し、Artistに名前を設定

Upload Coverをクリックし、メディアライブラリからサムネイルを選択し、選択ボタンをクリックします。5つすべてのトラックにサムネイルを設定します。公開ボタンをクリックします。

メディアライブラリからサムネイルを選択

すべてのトラックにサムネイルを設定

公開ボタンをクリック

Settings

Trascsの下のSettingsで詳細設定を行います。ボリュームを下げるため、Starting Volume30に設定します。トラックの高さを伸ばすため、Track listing height250に設定します。その他は、デフォルト設定です。Shotecodeの更新ボタンをクリックします。

Starting Volume30に、Track listing height250に設定

更新ボタンをクリック

設置

AudioInniterAll PlaylistsShortcodeショートコードをコピーします。

ショートコードをコピー

編集画面を開き、ショートコードブロックを作成し、ショートコードをペーストします。今回は、3カラムの中央に設置しました。

ショートコードをペースト

以上で今回の説明は終了です。AudioIgniter Music Playerは、SPでも見た目が良く、操作しやすいレスポンシブデザインになっています。プレイリスト作成も簡単なので、便利なプラグインですね。

RECOMMEND

CONTACT

Webサイト作成は、是非
CXG DESIGNへご検討ください。