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(http://kolber.github.io/audiojs/)をクリックして、「audio.js」のzipファイルをダウンロードします。
注記）2025/3/31現在、「audio.js」ページにある[Download auddio.js]ボタンはリンク切れになっており、ダウンロードできません。 対応方法は「audiojs Player用のJavaScriptライブラリがダウンロード出来ない時の対応策」を参照してください - 解凍して、３つのファイル『audio.min.js 、audiojs.swf、player-graphics.gif』をWordpressが入っている場所に適当なフォルダーを作り解凍したファイルをアップロードします。 必要なファイルは、audio.min.jsです。 audio.min.jsファイルは次節point3のjQueryコード 第2行目にフルパスで配置します。
説明のため、このページに単純なPlay Listを埋め込んでみました。
この例は、Audiojsを使って、３曲をリストアップしたPlay Listです。 第１曲と第２曲は連続して再生し最後の第３曲が終わると自動的に再生を停止します。 また、曲のタイトルをクリックするとその曲が再生されます。
Audiojs player with Play List
point
1 HTML要素の記述
WordPress投稿ページの編集画面で、旧エディタの場合はテキストモードにして、以下のコードを記述します。 ブロックエディタの場合は、「カスタムHTML」ブロックを使用します。
|
1 2 3 4 5 6 7 |
<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 6 7 8 9 10 11 |
@media screen and (max-width: 481px) { .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 {background-image: linear-gradient(#242473, #415c9d, #242473);} |
１行目：スマホの場合、Audiojs Playerの横幅を300pxにしています。
４行目：a タグの装飾を無くします。
５行目：再生中のタイトルを強調テーマします。
６行目：再生中のタイトルの前に♬マークを付加します。
10行目：Playerのスキン色の指定です。（無指定でデフォルト黒）
point
3 jQueryの記述
WordPressのfooterに以下のコードを記述します。
なお、Affinger6の場合、投稿編集画面の下に「head / footer に出力するコード」欄がありますので、wp_footerの欄に以下の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 37 |
<!--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 オススメ関連記事
WordPressの[audio]ショートコードとの衝突を避ける方法
-
-
コンフリクト回避策jQueryのeach() を使って、audiojs Playerの衝突を避ける
WordPressでオーディオファイルを埋め込む際、多くの場合はWordPressに付属している標準のaudio Player（[audio] ショートコード）や、プレイリスト機能を使用していると思い ...
当サイトにあるサンプル音源をplaylist化しました。
-
-
事例紹介スマホで聴くサンプル音源ストリーミングコーナー
ＬＰレコードからハイレゾ録音したサンプル音源をスマホでストリーミング試聴するコーナーです。 ♬ music Play List の中からお好みの楽曲を選びます。   ...