WordPressで音声Playlistを作るには「メディアの追加」から音声ファイル（ID）を選択して音声Playlistを作成するのが簡単ですが、仕様上から音声ファイルのURLでは作成出来ず、またエンドレスで曲目が再生されてしまうという問題もあります。
その為、例えば、当サイトにあるサンプル音源ダウンロードコーナーにある多量な音源(曲目)をplaylist化してWebに掲載するのが困難です。
そこで、HTML（静的）ページでは問題無く動作するaudiojsを使うことを思い立ちましたが、単純にWordpressで使うと、Wordpress自身やテーマ更にキャッシュプラグインなどが原因でコンフリクトが生じてaudiojsを上手く動作させることが出来ませんでした。 今回はWordpressでaudiojsを使う方法の紹介です。
サイト記事：「audio.js を使ってみる」（クリックして参照）
当サイトのWordpress環境
- WordPress ：バージョン 6.2.2
- テーマ・Affinger6：バージョン20230807
- WP Fastest Cache Premium(有料版)：バージョン 1.6.9
Audiojsのダウンロードとインストール（事前準備）
- 下のURLをクリックして、「audio.js」のzipファイルをダウンロードします。http://kolber.github.io/audiojs/
- 解凍して、３つのファイル『audio.min.js 、audiojs.swf、player-graphics.gif』をWordpressが入っている場所に適当なフォルダーを作り解凍したファイルをアップロードします。
- WordPressのheadに以下のコードを記述して「audio.min.js」を読み込みます。
|
1 2 |
<!--audio.min.js を読み込む--> <script src="https://pianoforte32.com/...../audio.min.js"></script> |
説明のため、このページに単純なPlay Listを埋め込んでみました。
この例は、Audiojsを使って、３曲をリストアップしたPlay Listです。 第１曲と第２曲は連続して再生し最後の第３曲が終わると自動的に再生を停止します。 また、曲のタイトルをクリックするとその曲が再生されます。
この音源はランパルのフルートでミュンヒンガーが指揮した シュトゥットガルト室内管弦楽団の演奏です。 1961年に録音されたレコードをAAC 160kbpsで収録しました。
point
1 HTML要素の記述
WordPress投稿ページの編集画面で、旧エディタの場合はテキストモードにして、以下のコードを記述します。 ブロックエディタの場合は、「カスタムHTML」ブロックを使用します。
|
1 2 3 4 5 6 |
<audio preload="none"></audio> <ol class="audio" style="list-style: none;"> <li class=""><a class="wp" href="#!" data-src="音源1 URL">バッハの管弦楽組曲 第2番 第1曲- 序曲 ▶</a></li> <li class=""><a class="wp" href="#!" data-src="音源2 URL">バッハの管弦楽組曲 第2番 第2曲- ロンド ▶</a></li> <li class="last"><a class="wp" href="#!" data-src="音源3 URL">バッハの管弦楽組曲 第2番 第4曲- ブーレ-I II END</a></li> </ol> |
１行目：このコードがAudiojs Playerの本体です。 preload="none"をautoにすると自動で音源を先読みします。
２行目から６行目：リストを表示するコードです。
２行目：olタグにclass="audio"を記述しないと、Wordpressのテーマとコンフリクトします。
音源1〜音源3：絶対パスで音源を指定します。(ex. https//...../音源.mp3)
liタグのclass="last"：クラスにlastを記述することで、楽曲が終わると再生を停止します。 lastを記述しないと、次の楽曲が自動で開始します。
point
2 CSSの記述
以下のコードを「カスタマイズ」＞「追加CSS」に記述します。
|
1 2 3 4 5 |
.audiojs { width:300px;}.audiojs .scrubber { width:135px; }/*audiojs playerの横サイズ*/ ol.audio a {color:#424242; text-decoration: none; } ol.audio li.playing a {padding-left: 0.8em; color: black; font-weight:bold; } ol.audio li.playing:before { content: '♬'; margin-left:-20px; color:red;} |
１行目：Audiojs Playerの横幅を300pxにしています。
３行目：a タグの装飾を無くします。
４行目：再生中のタイトルを強調テーマします。
５行目：再生中のタイトルの前に♬マークを付加します。
point
3 jQueryの記述
WordPressのheadに以下のコードを記述します。
なお、Affinger6の場合、投稿編集画面の下に「head / footer に出力するコード」欄がありますので、headの欄に以下のjQueryコードを記述します。 （他の投稿ページには影響しないので便利です。）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!--audio.min.js を読み込む--> <script src="https://pianoforte32.com/...../audio.min.js"></script> <script> jQuery(function ($) { var audio_player_index = audiojs.createAll({ trackEnded: function() { if($('ol.audio li.playing').hasClass('last')){ //li classが"last"になったら停止 audio.stop(); } var next = $('ol.audio li.playing').next();//next()メソッドで次の要素を取得 if (!next.length) next = $('ol.audio li').first();//first()メソッドで、現在マッチしている要素の中で最初の要素を取得 next.addClass('playing').siblings().removeClass('playing'); audio.load($('a', next).attr('data-src')); audio.play(); } }); // Load in the first track var audio = audio_player_index[0]; first = $('ol.audio a').attr('data-src'); $('ol.audio li').first().addClass('playing'); audio.load(first); // Load in a track on click $('ol.audio li').click(function(e) { e.preventDefault(); $(this).addClass('playing').siblings().removeClass('playing'); audio.load($('a', this).attr('data-src')); audio.play(); }); }); </script> |
21行目：audio_player_index[0]の意味はaudiojs playerの位置に関係し、例えばaudiojs playerが複数あった場合[0]で一番最初のaudiojs playerに対応します。上から２番目は[1]にします。
point
4 その他の注意事項
- WP Fastest Cache Premium プラグインを使っている場合：
Options設定の「除外」で、「JSを除外」からaudio.min.jsファイルを除外設定する必要があります。 JS除外しないと、当サイトの場合、Playerの再生マークが消失しました。 - 再生可能音声フォーマット：
mp3 , m4a, wav , flac 音源を確認し再生できました。 - audiojsに適する音源フォーマット：
mp3が最も最適の様です。 （ローディングが早い） - ネット環境：
ネット環境が悪いとエラーが発生し易いので、リロードボタンを付加するのが良い様です。
Audiojs を使ったplaylist（事例）
当サイトにあるサンプル音源ダウンロードコーナーにある多量な音源(曲目)をplaylist化した事例紹介です。
-
-
スマホで聴く・サンプル音源ダウンロードコーナー
注記）ネット環境が悪いと再生エラー（✗マーク）になる場合があります。その時は[ここ]をクリックして再読み込みした後、時間を置いて、ネット環境の回復を待ちください。 Play List （Title 選 ...
