![](https://cxg-design.jp/wp-content/uploads/2024/06/audioigniter_thumb.png)
AudioIgniter Music Playerで、サムネイル付きのプレイリストを作成
WordPressでは、YouTube以外にも、いろいろなメディアの埋め込みが出来ます。今回は、AudioIgniter Music Playerで、サムネイル付きのミュージックプレイリストを作成する方法を紹介します。
今回のDEMOは、Garage Bandで作成した音楽のプレイリストです。
5曲の音楽をプレイリストにしました。再生、音量調整、オールリピート再生が出来ます。
Tracks
プラグインをインストール、有効化をします。左サイドバーのAudioInniter>Add New Playlistをクリックします。プレイリスト作成画面が表示されるので、タイトルを入力します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/13a0c96d90a1735949f600d67a383c28.png)
AudioInniter>Add New Playlistをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/d228b9ddfa6eb88ab3ebce6ab4e1bab6.png)
タイトルを入力
Add Trackボタンをクリックし、5つのトラックを作成します。Audio file or radio streamのUploadをクリックし、メディアライブラリから曲のファイルを選択し、選択ボタンをクリックします。5つのトラックに曲を挿入します。Titleの曲名を変更し、Artistに名前を設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/e8e16d334e76ae3f403d1cb356b0461a.png)
5つのトラックを作成
![](https://cxg-design.jp/wp-content/uploads/2024/06/dae404058f1d4e49e5176328edcc86fa.png)
メディアライブラリから曲のファイルを選択
![](https://cxg-design.jp/wp-content/uploads/2024/06/ace887ab6467da4cfbbf2028c757d47d.png)
5つのトラックに曲を挿入
![](https://cxg-design.jp/wp-content/uploads/2024/06/d6ebc7868b973978c5cd4b15e144813e.png)
Titleの曲名を変更し、Artistに名前を設定
Upload Coverをクリックし、メディアライブラリからサムネイルを選択し、選択ボタンをクリックします。5つすべてのトラックにサムネイルを設定します。公開ボタンをクリックします。
![](https://cxg-design.jp/wp-content/uploads/2024/06/1f48aeade86cfd724775cb30c5218fc7.png)
メディアライブラリからサムネイルを選択
![](https://cxg-design.jp/wp-content/uploads/2024/06/a044a36f74488b2e57a92cddf6a0dcc2.png)
すべてのトラックにサムネイルを設定
![](https://cxg-design.jp/wp-content/uploads/2024/06/14e88f09fddc94fc37ee49fd0bf6e7ad.png)
公開ボタンをクリック
Settings
Trascsの下のSettingsで詳細設定を行います。ボリュームを下げるため、Starting Volumeを30に設定します。トラックの高さを伸ばすため、Track listing heightを250に設定します。その他は、デフォルト設定です。Shotecodeの更新ボタンをクリックします。
![](https://cxg-design.jp/wp-content/uploads/2024/06/df5bb1e6beaeefd12aa8db5b9c0f5661.png)
Starting Volumeを30に、Track listing heightを250に設定
![](https://cxg-design.jp/wp-content/uploads/2024/06/b57ccb0da8cc4657d995a38887e4b67c.png)
更新ボタンをクリック
設置
AudioInniter>All PlaylistsのShortcodeのショートコードをコピーします。
![](https://cxg-design.jp/wp-content/uploads/2024/06/66931294b940458b8912fc0a23efc21e.png)
ショートコードをコピー
編集画面を開き、ショートコードブロックを作成し、ショートコードをペーストします。今回は、3カラムの中央に設置しました。
![](https://cxg-design.jp/wp-content/uploads/2024/06/0971e2191f0b4ed14ef297b93f62b391.png)
ショートコードをペースト
以上で今回の説明は終了です。AudioIgniter Music Playerは、SPでも見た目が良く、操作しやすいレスポンシブデザインになっています。プレイリスト作成も簡単なので、便利なプラグインですね。