WordPress には、音楽を再生させるためのプレイヤー系のプラグインがいくつも存在するのですが、個人的にはどれもプレイヤー感が強くてあまり好きではないんですよね。
そこで、見つけたのが「Karma Music Player」というプラグイン。
丸い再生ボタンに、 10 種類から選べるカラーバリエーション。そして、ダウンロードもできるようにボタンを表示させることもできます。
デモサイトは、こちら → https://karma.kadarclaudiu.ro/
音楽再生プラグイン「Karma Music Player」
「Karma Music Player」は、他のプラグインにはよくある設定画面で再生内容を入力していくタイプではなく、ショートコードを使って設定をするタイプになります。
インストールから使い始めるまで
「Karma Music Player」を使うには、プラグインの新規追加で「Karma Music Player by Kadar」と検索。
そして、インストールしたら「有効」にしてください。
プラグインあるあるとして、インストールしたら自分好みに細かな設定をする必要があったりしますが、「Karma Music Player」の場合にはこれでショートコードを使ってプレイヤーを表示させるだけです。
ショートコードの使い方
基本的なプレイヤーのショートコードは、以下のものになります。
[box class="box3"]
[karma_by_kadar__simple_player]
[/box]
ここに、細かな設定を追加していく形になります。
タイトルを表示する
タイトルを表示させるには、下記を追加します。
[box class="box3"]
title="タイトル名"
[/box]
音楽素材を設定する
音楽を再生できるようにするには、下記を追加します。
[box class="box3"]
src="オーディオファイル"
[/box]
オーディオファイルは、アップロードされた音楽の URL を入力する形になります。そのため、WordPress のメディアではなくても、他の場所でアップロードされた音でも可能です。
ボリュームを設定する
デフォルトでは、ボリュームが「0.7」という値で設定されています。もしそのままで良ければ表示する必要はないのですが、もし変更したい場合には、下記を追加します。
[box class="box3"]
volume="値"
[/box]
ボリュームは少数第一位刻みで、「０」から「１」の値を入れて設定します。
自動再生させる
デフォルトでは、自動再生されないようになっています。そのため、自動再生させたい場合には、下記を追加します。
[box class="box3"]
autoplay="true"
[/box]
ループさせる
デフォルトでは、音楽がループしないようになっています。もしループさせたい場合には、下記の追加します。
[box class="box3"]
loop="true"
[/box]
ダウンロードを可能にする
無料で音楽をダウンロードできるようにしたい場合には、ダウンロードボタンを表示させることもできます。その場合には、下記を追加します。
[box class="box3"]
downloadable="true"
[/box]
プレイヤーの色を変える
デフォルトでは、プレイヤーの色がオレンジ色になっています。他に 10 色からも選択できるので、色を変えたい場合には下記を追加します。
[box class="box3"]
color="数字"
[/box]
数字の部分には、「１」から「１０」までの数字を入れて色を設定します。
色の番号
[box class="box3"]
- 青：１
- 赤：２
- ピンク：３
- 緑：４
- 黄色：５
- 灰色：６
- 黒：７
- シアン：８
- 鴨の羽：９
- 白：１０
[/box]
そして、これらのオプションを全部設定した場合には、下記のようになります。
[box class="box3"]
[karma_by_kadar__simple_player title="タイトル" src="https://音楽素材の URL.mp3" volume="0.9" autoplay="true" loop="true" downloadable="true" color="8"]
[/box]
これを任意の場所へ書き込めば、プレイヤーの完成です！
さいごに
著作権フリーの音楽素材を提供するサイト「Befriend Sound」を作る時に、どうしてもプレイヤーぽくないデザインのものにしたかったんですよね。
ショートコードの方が面倒だという人も中にはいるかもしれませんが、ちょっとオシャレな音楽再生のプラグインを探している人は使ってみてください。
