最近のレンタルサーバーのディスク容量はとても大きくて持て余していませんか？
本ページは、この空き容量を利用して、音楽再生用サイトをWordPressで作ってみた時の備忘録です。
これを作っておけば、音源を保存したパソコンやスマホ・タブレットなどのデバイスでなくても音楽が聴けますし、買いためたCDを取り込んでサイトにアップロードしておけばCDを交換することなく聴くことができて便利ですよ。
以下がサイトの仕様（要件）です。
- サイトは特定の場所(IPアドレス)以外からはアクセスできないようにする（非公開で自身だけが楽しめるようにする）
- プレイリストを作って再生させるようにする（プラグインを使用）
WordPressを使って公開サイト以外に利用できることはないかと考える方の参考になれば幸いです。
本ページの内容はWordPress6.9時点での作成備忘録ですので、他のバージョンではうまくいかないこともあるかも知れません
1．前提条件など
レンタルサーバーにはファイルの容量の他に一定期間の転送量の指定がある場合があります。
転送量とはそのレンタルスペースから情報をアップロード（ダウンロード）できる量のことで、ページ表示にブラウザに転送される画像や文字などすべてを含みます。
もちろん今回作成する音楽ファイルのアップロードや再生もこの転送量に含まれますので、転送量に制限のあるレンタルサーバープランでは、容量がオーバーした場合、公開しているサイトも含めて閲覧不可となる可能性がありますので、必ず確認してください。
また、音声ファイルの形式を高圧縮のaac形式にしても標準的な1曲のファイルサイズは5MB程度になりますので、レンタルサーバーのスペースの空き容量が過分にある場合にのみ有効な手段でしょう。
2．WordPressサイトを用意する
音楽再生サイト（JukeBox）として稼働させるWordPressサイトのインストールをします。
インストールの方法自体はレンタルサーバーの自動インストール機能を使用しても、手動でインストールしても構いませんが、公開しているサイトのサブディレクトリにインストールするよりは、サブドメインを作って別のディレクトリへサイトをインストールしたほうが、後々サイトが不要になった場合に削除がしやすかったりするのでおすすめです。
インストールしたら、自身で使いやすいテーマをインストールして有効化しておきましょう。
本ページではスタイル（サイトの見た目）についての情報は割愛しますテーマの設定等はご自身で行ってください。
3．特定の場所以外からアクセスできないようにする
WordPressは公開（誰でも閲覧できる）するためのサイト管理ツールですので、そのままでは世界中のどこからでも閲覧できてしまいます。
そうなると、誰でも曲を聴いたりダウンロードできたりする環境を提供することとなり、CDなどから取り込んだ曲をアップロードした場合には確実に著作権法違反となってしまいます。
そこでこのサイトは特定の場所などからしか閲覧できないという環境を用意します。非公開サイトの作り方は以下のページで詳しく書いていますので確実に予期せぬアクセスによる閲覧が発生しないようにしてください。
4．必要なプラグインやコードの追加
必要なプラグイン
今回のJukeBoxサイトを作るにあたって私が使用した便利なプラグインをいくつか紹介します。
AudioIgniter
今回のサイトのキモであるプレイリストを作成するためのプラグインです。
Media Library Categories
曲が増えてくると音楽ファイルが見つけにくくなります。このプラグインを使ってアルバム名などでカテゴライズしておくことで、メディアライブラリ内でのファイル発見がしやすくなります。
私が音楽再生サイトを作る際に主に使用したのは上記の2つです。以下は必要性に応じて使ってください。
HA Force Update Plugin Language
先に紹介したAudioIgniterプラグインは英語表記になっています。設定しにくいという方はこちらから日本語化ファイルを入手して、以下のプラグインで適用させるといいでしょう。
Hima Art Utility
本サイトで配布している便利プラグインです。WordPressでサイトを作る際にこれができたらいいなという機能を満載した至ってプライベートなプラグインですが、よかったらお使いください。
追加しておくと便利なコードいろいろ
有効化しているテーマのfunctions.phpへ以下のコードを追加することで、本ページで紹介するJukeBox機能に関して便利になりそうなコードをいくつか紹介しておきます。
AudioIgniterで作成したプレイリストの再生画面の表示内容を一括指定する
AudioIgniterプラグインの仕様では、個々のプレイリストの編集画面で個別にいろいろな設定を行えるようになっています。
サイトの中で表示するプレイリストの内容が同じ場合（大抵同じだと思いますが．．）、プレイリストを作る度に同じものを設定するのは面倒ですし、いくつかのプレイリストを作成した後で設定を調整し直すのも面倒ですので、以下のコードを追加して、AudioIgniterのプレイリスト作成画面の設定に関わらず同じ設定が適用されるようにするといいでしょう。
/*** audioigniterの表示形式を一括変更 ***/
function pwcn_custom_audioigniter_tracklist_height( $attrs, $post_id ) {
/*** プレーヤーと曲リスト ***/
//プレーヤーの外観 デフォルト full (full or simple)
//$attrs['data-player-type'] = 'full';
//デフォルトで曲リストを表示する デフォルト 1 (1:表示する or 0:表示しない)
//$attrs['data-display-tracklist'] = 1;
//曲リストの表示／非表示切り替えボタンを表示する デフォルト 1 (1:表示する or null:表示しない)
//$attrs['data-allow-tracklist-toggle'] = '';
//曲の順序 デフォルト 0 (1:降順 or 0:昇順)
//$attrs['data-reverse-track-order'] = 0;
//再生音量 デフォルト 100
//$attrs['data-volume'] = 100;
//曲リストの高さ制限 デフォルト 1 (1:する or 0:しない)
//$attrs['data-limit-tracklist-height'] = '1';
//曲リストの高さ デフォルト185
$attrs['data-tracklist-height'] = 500;
//プレーヤーの最大幅 デフォルト Null(空欄)＝auto 実数で単位を付けて指定（50% 200pxなど．．）
$attrs['data-max-width'] = '';
/*** 曲 ***/
//曲番号の表示／非表示 デフォルト 1 (1:表示 or 0:非表示)
//$attrs['data-display-track-no'] = '1';
//曲リストに曲のカバー画像を表示する デフォルト 1 (1:表示 or null:表示しない)
//$attrs['data-display-tracklist-covers'] = '';
//再生中の曲のカバー画像を表示 デフォルト 1 (1:表示 or null:表示しない)
//$attrs['data-display-active-cover'] = '';
//アーティスト名を表示する デフォルト 1 (1:表示 or 0:表示しない)
//$attrs['data-display-artist-names'] = '1';
//曲の追加ボタン（購入リンク、ダウンロードボタンなど）を表示する デフォルト 1 (1:表示 or null:表示しない)
//$attrs['data-display-buy-buttons'] = '';
//購入リンクを別ウインドウで開く デフォルト 1 (1:開く or 0:開かない)
//購入リンクにURLが入っている場合のみ作用する
//$attrs['data-buy-buttons-target'] = '1';
//曲リストの繰り返しをデフォルトで有効にする デフォルト 1 (1:有効 or 0:無効)
//$attrs['data-cycle-tracks'] = '0';
//曲リストに繰り返し切り替えボタンを表示する デフォルト 1 (1:表示する or null:表示しない)
//$attrs['data-allow-tracklist-loop'] = '';
//「Powered by AudioIgniter」リンクを表示する デフォルト 1 (1:表示する or null:表示しない)
//$attrs['data-display-credits'] = '';
//トラックのURL? デフォルト home_url( '/' )
//$attrs['data-tracks-url'] = 'https://xxx.com';
return $attrs;
}
add_filter( 'audioigniter_get_playlist_data_attributes_array', 'pwcn_custom_audioigniter_tracklist_height', 10, 2 );コードを追加後、一括指定したい設定のコメントを外し、設定したい値へ変更することで適用されます
ダッシュボードにuploadsフォルダ内の総容量を表示する
WordPressにはサイトヘルスという機能があり、そこからメディアフォルダ（uploadsフォルダ）のサイズを知ることができるのですが、この表示にはキャッシュが効いていてリアルタイムには確認できません。
そこで以下のコードを追加することで、メディアフォルダの総容量をダッシュボードへリアルタイム表示させることができます。
/***** ダッシュボードにuploadsフォルダの容量を表示するウィジェットを追加 *****/
/*** ウィジェットを追加 ***/
function pwcn_add_uploads_size_dashboard_widget() {
wp_add_dashboard_widget(
'uploads_size_widget', // ウィジェットID
'メディア（uploads）の容量', // ウィジェットのタイトル
'pwcn_display_uploads_size_widget' // 表示用関数名
);
}
add_action('wp_dashboard_setup', 'pwcn_add_uploads_size_dashboard_widget');
/*** ウィジェットの内容 ***/
function pwcn_display_uploads_size_widget() {
$upload_dir = wp_upload_dir();
$path = $upload_dir['basedir'];
// フォルダサイズを取得
$total_size = 0;
$files = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($path));
foreach ($files as $file) {
if ($file->isFile()) {
$total_size += $file->getSize();
}
}
// 読みやすい単位（MB/GB）に変換
$formatted_size = size_format($total_size, 2);
echo '<div style="padding: 10px 0;">';
echo '<p style="font-size: 1.2em;">現在の使用量: <strong>' . esc_html($formatted_size) . '</strong></p>';
echo '<p><a href="' . admin_url('upload.php') . '" class="button button-secondary">メディアライブラリを見る</a></p>';
echo '</div>';
}親カテゴリーのリストを表示する
多くの音楽アルバムを保存する場合、「アーティスト名」という親カテゴリーの中に「アルバムタイトル」という子カテゴリーを作って管理するのが一番効率がいいと思いますが、WordPress標準のブロックには親タームだけを表示する機能がないので、以下のコードを追加してショートコードで表示させるようにするといいでしょう。
/***** 親カテゴリーのみ表示するショートコード *****/
function pwcn_list_parent_categories_shortcode() {
$args = array(
'parent' => 0, // Only get top-level categories
'echo' => 0, // Return the list instead of printing it
'exclude' => '1',
'title_li' => '', // Remove the default "Categories" title
'show_count' => '1',
'order' => 'ASC',
'orderby' => 'name',
);
return '<ul>' . wp_list_categories($args) . '</ul>';
}
add_shortcode('kb-parent_categories', 'pwcn_list_parent_categories_shortcode');
コードを追加したら、以下のショートコードを任意の場所へ追加することで一番親階層のカテゴリーが一覧表示され、その中にある子カテゴリーの個数も表示できます。
[kb-parent_categories]5.曲の取り込み（リッピング）とプレイリストの作成手順
AudioIgniterプラグインについては、インストールして有効化後に表示される「AudioIgniter」メニューからプレイリストの作成をし、ショートコードを投稿などへ挿入するという手順で特に難しいところはありませんし、無料版でも無制限のプレイリストが作成できますから、使い慣れてもらえればと思います。
それよりも大事なのは、ファイルの変換です。
本ページを見て音楽再生サイトを作ろうと思った方はCDなどの音源から音楽を取り込んで（リッピングして）、それをサイトにアップロードして．．と考えているかと思いますが、肝心なのはそのファイル形式です。
パソコンにある通常のツールを使ってCDからリッピングした場合のファイル形式は、CDそのものに保存されているwav形式であることが多く、この形式のファイルは結構大容量で、そのままサイトで使用するとあっという間に空き容量はいっぱいになってしまいます。
ですので、これをもう一度何かのツールで変換して、一般的な音楽プレーヤーなどでも使えるmp3形式にするか、一番圧縮率の高いaac形式にして使用することをおすすめします。
そこでおすすめなのが「fre:ac」というツール。このツールを使えば、CDからのリッピングと同時にaacやmp3形式への変換も一気にできるのでおすすめです。
「fre:ac」は日本語で使用できる無料のソフトで使いやすいですし、使い方についてはググれば丁寧に解説されているものが多数出てきますので、ここでは割愛します。
ただ1点、リッピングと同時にaac形式でファイルを保存したい場合には、以下の手順で設定が必要です。
- 「選択エンコーダー」に「FDK-AAC Converter..」を選択する
- 「選択エンコーダー」の右にある⚙マーク（設定）をクリックする
- 「形式」タブを開き、「ファイル形式」を「AAC」にする
