
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/
- 解凍して、3つのファイル『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を使って、3曲をリストアップしたPlay Listです。 第1曲と第2曲は連続して再生し最後の第3曲が終わると自動的に再生を停止します。 また、曲のタイトルをクリックするとその曲が再生されます。
この音源はランパルのフルートでミュンヒンガーが指揮した シュトゥットガルト室内管弦楽団の演奏です。 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> |
1行目:このコードがAudiojs Playerの本体です。 preload="none"をautoにすると自動で音源を先読みします。
2行目から6行目:リストを表示するコードです。
2行目: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;} |
1行目:Audiojs Playerの横幅を300pxにしています。
3行目:a タグの装飾を無くします。
4行目:再生中のタイトルを強調テーマします。
5行目:再生中のタイトルの前に♬マークを付加します。
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に対応します。上から2番目は[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 選 ...