jQueryのeach() を使って、WordPress付属のaudio Playerとaudiojs Playerの衝突を避ける

WordPressでオーディオファイルを埋め込む際、多くの場合はWordPressに付属している標準のaudio Player（[audio] ショートコード）や、プレイリスト機能を使用していると思います。　ただし、プレイリストの場合は、再生がエンドレスループになるなど、オプションに乏しいという仕様上の制約があります。

そのため、過去記事で紹介したような、カスタマイズが容易な「audiojs」を使ったプレイリストを利用したくなる場合もあります。
ところが、どちらも<audio>タグをラップして動作しているため、同一ページ内で両者を併用すると衝突（コンフリクト）が発生し、表示の不具合などによって正常に動作しないことがあります（※下記に衝突事例を掲載）。

そこで今回は、WordPressの同一ページ内でaudiojs PlayerとWordPress標準のaudio Playerを混在させるために、audiojs要素に対してjQueryのeach()文を適用し、コンフリクトを回避する方法を備忘録としてまとめました。

さらに、Post Snippetsプラグインを使って、audiojsプレーヤー用とプレイリスト用を簡単に切り替えられるショートコードの作成方法もあわせて紹介します。

Playerの衝突・事例

Playerが２重に表示されてしまう！(^_^;)

WordPress標準のaudio Playerとaudiojs Playerの衝突を避ける

ここでは、div.js_player 要素内に <audio> タグを配置し、jQuery の each() を使って一意のindex（連番）を割り振ることで、audiojs ライブラリを複数のプレイヤー間で使い回すことができます。　

ヒント：複数配置したaudiojs PlayerをChromeブラウザの「検証」で要素を見てみると、夫々のaudiojs Player のdiv.js_player 要素には、上から順番にid="audiojs_wrapper0" 、id="audiojs_wrapper1"・・・id="audiojs_wrappern"が自動的に付与されているのが確認出来ました。　つまりこの、一意のidにより衝突を避けることが出来るのですね！

これで、標準のaudio Playerとaudiojs Playerの衝突を簡単に回避できます。　下にBefore、Afterで示します。

Before（今迄の方法でaudiojsを使用する）

<html>
<audio preload="none" src="sound.mp3"></audio>
</html>
<script>
audiojs.events.ready(function() {
audiojs.createAll();
});
</script>

<html>

</html>

audiojs.events.ready(function() {

audiojs.createAll();

});

</script>

After（jQueryのeach文で衝突を回避）

<html>
<div class="js_player">
<audio preload="none" src="sound.mp3"></audio>
</div>
</html>
<script>
audiojs.events.ready(function() {
jQuery('.js_player audio').each(function(index) {//indexは不記載OK
　　audiojs.create(this);
});
});
</script>

<html>

</div>

</html>

audiojs.events.ready(function() {

jQuery('.js_player audio').each(function(index) {//indexは不記載OK

　　audiojs.create(this);

});

</script>

オペレータ

audiojs Playerを jQueryのeach()で衝突を回避すると、下に示すように、問題なく両者のプレーヤが混在できました。

WordPress標準のaudio Player

audiojs Player(Default)

次にjQuery の each() 利用して audiojs PlayList へ展開してみます。

WordPress標準のPlayListは、メディアIDを指定すると簡単にプレイリストが作成できますが、オプションの指定が乏しく全曲が終了しても最初の曲にループしてエンドレスに再生が継続するという難点があります。　一方 audiojsですと、外観のカスタマイズも容易で、ループをOFFにすることも出来るようになります。　下に今回のjQuery の each() を使った audiojs PlayList を示します。

ヘンデルのバイオリン・ソナタ第４番ニ長調作品１の１３

（Vn：グリュミオー /チェンバロ：ラクロワ） 1966年録音の音源
MP3 160kbps 44.1khz

第１楽章:Affettuoso (02:54)
第２楽章:Allegro (02:33)
第３楽章:Larghetto (02:59)
第４楽章:Allegro (02:49)

オペレータ

jQueryのeach() を利用したPlayListのコードを下に示します。

HTMLコード

WordPressの場合：テキストエディタにして記述

<div class="JS_player js_center blue">
<audio src="" preload="none" ></audio> 
<ol class="audio" style="list-style: none;"> 
<li class=""><a href="#!" data-src="Sound1.mp3">第１楽章:Affettuoso (02:54)</a></li> 
<li class=""><a href="#!" data-src="Sound2.mp3">第２楽章:Allegro (02:33)</a></li> 
<li class=""><a href="#!" data-src="Sound3.mp3">第３楽章:Larghetto (02:59)</a></li> 
<li class="last"><a href="#!" data-src="Sound4.mp3">第４楽章:Allegro (02:49)</a></li> 
</ol> 
</div>

<li class=""><a href="#!" data-src="Sound1.mp3">第１楽章:Affettuoso (02:54)</a></li>

<li class=""><a href="#!" data-src="Sound2.mp3">第２楽章:Allegro (02:33)</a></li>

<li class=""><a href="#!" data-src="Sound3.mp3">第３楽章:Larghetto (02:59)</a></li>

<li class="last"><a href="#!" data-src="Sound4.mp3">第４楽章:Allegro (02:49)</a></li>

</ol>

</div>

<li class="last">のlastを削除すると、最終曲から最初の曲にループ再生できます。

CSS スタイルコード

WordPressの場合：Stylesheet (style.css)に記述

/*******************************/
/** js_player audiojs の CSS **/
/*******************************/
.js_player .audiojs {
border-radius: 8px; /*プレーヤの角R付加*/
padding: 3px 0; /*player 高さ調整 max:6pix*/
margin:10px 0;box-shadow: 5px 10px 10px #c96;/*影を付ける*/
} 
/* player 横幅サイズ max-300px固定 */
.js_player.px300{max-width:300px;} 
.js_player.px300 .audiojs { width:100%;} 
.js_player.px300 .audiojs .scrubber { width:calc(46% - 16px ); } 
.js_player.px300 .audiojs .time {margin-right:-7px;}
/* 標準 player 横幅サイズ 　メディアクエリ・レスポンシブ */
.js_player{max-width:460px ;}
@media screen and (max-width: 480px) {
.js_player{max-width:300px;}
.js_player .audiojs { width:100%;}
.js_player .audiojs .scrubber { width:calc(46% - 16px ); } 
.js_player .audiojs .time {margin-right:-7px;}
}
/* スキン色 &nbsp;[AudioJS_player]ショートコード用 色の切り替え */
.js_player.red .audiojs {background-image: linear-gradient(to top, #4d192b 0%, #792d3f 38%, #74182e 100%);}
.js_player.blue .audiojs{background-image: linear-gradient(to top, #4B79A1 0%, #283E51 50%, #4B79A1 100%); }
.js_player.green .audiojs{background: linear-gradient(to bottom, #627d4d 0%,#1f3b08 100%); }
/* [AudioJS_player]ショートコードのPlayList用 CSS */	
.js_player ol.audio a {color:#424242;  text-decoration: none; }
.js_player ol.audio li.playing a {padding-left: 0.8em; background-color: #FFFF99; color: black; font-weight:bold; }
.js_player ol.audio li.playing:before { content: '♬'; margin-left:-20px; color:red;}

/*******************************/

/** js_player audiojs の CSS **/

/*******************************/

.js_player .audiojs {

border-radius: 8px; /*プレーヤの角R付加*/

padding: 3px 0; /*player 高さ調整 max:6pix*/

margin:10px 0;box-shadow: 5px 10px 10px #c96;/*影を付ける*/

}

/* player 横幅サイズ max-300px固定 */

.js_player.px300{max-width:300px;}

.js_player.px300 .audiojs { width:100%;}

.js_player.px300 .audiojs .scrubber { width:calc(46% - 16px ); }

.js_player.px300 .audiojs .time {margin-right:-7px;}

/* 標準 player 横幅サイズ　メディアクエリ・レスポンシブ */

.js_player{max-width:460px ;}

@media screen and (max-width: 480px) {

.js_player{max-width:300px;}

.js_player .audiojs { width:100%;}

.js_player .audiojs .scrubber { width:calc(46% - 16px ); }

.js_player .audiojs .time {margin-right:-7px;}

}

/* スキン色  [AudioJS_player]ショートコード用色の切り替え */

.js_player.red .audiojs {background-image: linear-gradient(to top, #4d192b 0%, #792d3f 38%, #74182e 100%);}

.js_player.blue .audiojs{background-image: linear-gradient(to top, #4B79A1 0%, #283E51 50%, #4B79A1 100%); }

.js_player.green .audiojs{background: linear-gradient(to bottom, #627d4d 0%,#1f3b08 100%); }

/* [AudioJS_player]ショートコードのPlayList用 CSS */

.js_player ol.audio a {color:#424242; text-decoration: none; }

.js_player ol.audio li.playing a {padding-left: 0.8em; background-color: #FFFF99; color: black; font-weight:bold; }

.js_player ol.audio li.playing:before { content: '♬'; margin-left:-20px; color:red;}

jQuery コード（Playe単体とPlayList兼用）

WordPressの場合：</body>の直前に記述

<!--audio.min.js を読み込む-->
<script src="https://〜/audio.min.js"></script>
<script>
jQuery(function ($) {
$('.js_player').each(function () { //indexは不要
var $player = $(this);
// この .js_player の中の audio 要素を取得
var $audio = $player.find('audio');
// audiojs をこの audio 要素にのみ適用
var audiojsInstance = audiojs.create($audio[0], {
trackEnded: function () {
// player単体使用時には <ol class="audio"> が存在しないので再生を停止
　　     if ($player.find('ol.audio').length === 0) {
audio.stop(); return; }
// PlayListに class="last"があれば再生停止
var $playing = $player.find('ol.audio li.playing');	
if ($playing.hasClass('last')) {
audio.stop();
return;
}
var $next = $playing.next();
if (!$next.length) {
$next = $player.find('ol.audio li').first();
}
$next.addClass('playing').siblings().removeClass('playing');
audio.load($next.find('a').attr('data-src'));
audio.play();
//再生中のタイトルを表示 要素の文字列をresult1に取得
const result1 =$next.find('a').html();
$('div.track-details').html( '<p style="color:#006688;">- playing  ♬ Title - </br><b>' + result1 + '</b></p>' );
}
});
var audio = audiojsInstance;
// 最初の曲を読み込み
var firstSrc = $player.find('ol.audio a').first().attr('data-src');
if (firstSrc) {
$player.find('ol.audio li').first().addClass('playing');
audio.load(firstSrc);
}
// 曲がクリックされたときの処理
$player.find('ol.audio li').click(function (e) {
e.preventDefault();
var src = $(this).find('a').attr('data-src');
if (!src) return;
$(this).addClass('playing').siblings().removeClass('playing');
audio.load(src);
audio.play();
});
});
});
</script>

jQuery(function ($) {

$('.js_player').each(function () { //indexは不要

var $player = $(this);

// この .js_player の中の audio 要素を取得

var $audio = $player.find('audio');

// audiojs をこの audio 要素にのみ適用

var audiojsInstance = audiojs.create($audio[0], {

trackEnded: function () {

// player単体使用時には <ol class="audio"> が存在しないので再生を停止

　　 if ($player.find('ol.audio').length === 0) {

audio.stop(); return; }

// PlayListに class="last"があれば再生停止

var $playing = $player.find('ol.audio li.playing');

if ($playing.hasClass('last')) {

audio.stop();

return;

}

var $next = $playing.next();

if (!$next.length) {

$next = $player.find('ol.audio li').first();

}

$next.addClass('playing').siblings().removeClass('playing');

audio.load($next.find('a').attr('data-src'));

audio.play();

//再生中のタイトルを表示要素の文字列をresult1に取得

const result1 =$next.find('a').html();

$('div.track-details').html( '<p style="color:#006688;">- playing ♬ Title - </br><b>' + result1 + '</b></p>' );

}

});

var audio = audiojsInstance;

// 最初の曲を読み込み

var firstSrc = $player.find('ol.audio a').first().attr('data-src');

if (firstSrc) {

$player.find('ol.audio li').first().addClass('playing');

audio.load(firstSrc);

}

// 曲がクリックされたときの処理

$player.find('ol.audio li').click(function (e) {

e.preventDefault();

var src = $(this).find('a').attr('data-src');

if (!src) return;

$(this).addClass('playing').siblings().removeClass('playing');

audio.load(src);

audio.play();

});

</script>

+ 排他的に再生する機能追加 script

複数のaudiojs Player を配置した時に、再生を排他的に制御する「jQuery コード」を示します。　当ページは、このコードを採用しています。

<script>
jQuery(function ($) {
var allPlayers = [];
$('.js_player').each(function () {
var $player = $(this);
var $audio = $player.find('audio');
// audiojs をこの audio 要素に適用
var audio = audiojs.create($audio[0], {
trackEnded: function () {
// player単体使用時には <ol class="audio"> が存在しないので再生を停止
　　if ($player.find('ol.audio').length === 0) {
audio.stop();
return; }
// PlayListに class="last"があれば再生停止
var $playing = $player.find('ol.audio li.playing');
if ($playing.hasClass('last')) {
audio.stop();
return; }
var $next = $playing.next();
if (!$next.length) {
$next = $player.find('ol.audio li').first();
}
$next.addClass('playing').siblings().removeClass('playing');
audio.load($next.find('a').attr('data-src'));
audio.play();
}
});
// 全プレイヤーを保持しておく（後で停止用に使う）
allPlayers.push(audio);
// 最初のトラックを読み込む（自動再生なし）
var firstSrc = $player.find('ol.audio a').first().attr('data-src');
if (firstSrc) {
$player.find('ol.audio li').first().addClass('playing');
audio.load(firstSrc);
}
// プレイリストの曲をクリックしたとき
$player.find('ol.audio li').click(function (e) {
e.preventDefault();
var src = $(this).find('a').attr('data-src');
if (!src) return;
// 他のすべてのプレイヤーを停止
allPlayers.forEach(function (ap) {
if (ap !== audio) ap.pause();
});
$(this).addClass('playing').siblings().removeClass('playing');
audio.load(src);
audio.play();
});
// ▶︎/❚❚ ボタンが押されたときも、他のプレイヤーを停止
$player.find('.play-pause').click(function () {
allPlayers.forEach(function (ap) {
if (ap !== audio) ap.pause();
});
});
});
});
</script>

jQuery(function ($) {

var allPlayers = [];

$('.js_player').each(function () {

var $player = $(this);

var $audio = $player.find('audio');

// audiojs をこの audio 要素に適用

var audio = audiojs.create($audio[0], {

trackEnded: function () {

// player単体使用時には <ol class="audio"> が存在しないので再生を停止

　　if ($player.find('ol.audio').length === 0) {

audio.stop();

return; }

// PlayListに class="last"があれば再生停止

var $playing = $player.find('ol.audio li.playing');

if ($playing.hasClass('last')) {

audio.stop();

return; }

var $next = $playing.next();

if (!$next.length) {

$next = $player.find('ol.audio li').first();

}

$next.addClass('playing').siblings().removeClass('playing');

audio.load($next.find('a').attr('data-src'));

audio.play();

}

});

// 全プレイヤーを保持しておく（後で停止用に使う）

allPlayers.push(audio);

// 最初のトラックを読み込む（自動再生なし）

var firstSrc = $player.find('ol.audio a').first().attr('data-src');

if (firstSrc) {

$player.find('ol.audio li').first().addClass('playing');

audio.load(firstSrc);

}

// プレイリストの曲をクリックしたとき

$player.find('ol.audio li').click(function (e) {

e.preventDefault();

var src = $(this).find('a').attr('data-src');

if (!src) return;

// 他のすべてのプレイヤーを停止

allPlayers.forEach(function (ap) {

if (ap !== audio) ap.pause();

});

$(this).addClass('playing').siblings().removeClass('playing');

audio.load(src);

audio.play();

});

// ▶︎/❚❚ ボタンが押されたときも、他のプレイヤーを停止

$player.find('.play-pause').click(function () {

allPlayers.forEach(function (ap) {

if (ap !== audio) ap.pause();

});

</script>

〜〜〜〜〜〜〜〜

「閉じる」

Post Snippets でaudiojs Player単体と PlayListを兼用するショートコードの作成

Post Snippetsプラグインのインストールや使い方は、「小技・事例集」を参照してください。

Post Snippets（バージョンは3.1.6）設定画面は以下の通りで、番号を振ったエリアに従って説明します。　（Post Snippets の最新バージョンは4.xになっていますが、一部不具合と使い勝手が悪く3.1.6バージョンを使っています。）

先ず、「Add New Snippet」ボタンを押します。

① エリアのUntitledにショートコードの名称を記入します。　ショートコード名を、【AudioJS_player】にしました。

② エリアに下のHTMLコードをコピペします。

{src}：Player単体で使用する時の音声ファイルアドレスを入力する変数（オプション）
{pre}：preloadの略、音声ファイルを先読みするか否かを指定する変数（オプション）
{my_color}、{position}、{my_size} ：div.js_playerのclassを追加してPlayerのデザインを変更する変数（オプション）
{content}：囲み型ショートコードになり、PlayList用のリストを終点の[[/AudioJS_player]]で囲む

<div class="js_player {my_color} {my_size} st-list-border" style="{my_style}">
<p><audio src="{src}" preload="{pre}"  ></audio>
{content}</p>
</div>

{content}</p>

</div>

③ Variables（変数）をカンマ区切りで記述し、「 =」の後がデフォルト値になります。　下で示す内容を ③ エリアに記述します。

pre=none,src=url.mp3,my_style=margin: 0 auto;,my_color,my_size=px300

④ エリアにショートコード化するので、レ点を入れます。　 ⑤ エリアにはPHPを使っていないので無記入のままです。

⑥ エリアにショートコードの簡単な説明を記載します。（下記は参考です）

audiojs用のplayer：preはpreloadで、autoで先読み込み　単体使用時にsrcに音源ファイルURLを記入　my_size：px300で横幅300px固定　終点を【/AudioJS_player】で囲む

以上で、【AudioJS_player】ショートコードの完成です。　

【AudioJS_player】ショートコードを使う

audiojs Player単体で使用する場合

第３楽章:Larghettoの再生

 shortcode
[AudioJS_player pre="none" src="Sound3.mp3" my_style="" my_color="blue" my_size="px300"][/AudioJS_player]

第４楽章:Allegroの再生

 shortcode
[AudioJS_player pre="none" src="Sound4.mp3" my_style="" my_color="red" my_size="px300"][/AudioJS_player]

audiojs PlayListで使用する場合

 shortcode
[AudioJS_player pre="none" src="url.mp3" my_style="" my_color="green" my_size=""]
<ol class="audio" style="list-style: none;">
<li class=""><a href="#!" data-src="Sound1.mp3">第１楽章:Affettuoso (02:54)</a></li>
<li class=""><a href="#!" data-src="Sound2.mp3">第２楽章:Allegro (02:33)</a></li>
<li class=""><a href="#!" data-src="Sound3.mp3">第３楽章:Larghetto (02:59)</a></li>
<li class="last"><a href="#!" data-src="Sound4.mp3">第４楽章:Allegro (02:49)</a></li>
</ol>
[/AudioJS_player]

前記、PlayList参照（ここをクリック）

今回のまとめ

each()文を使用することで、audiojs PlayerとWordPress標準のaudio Playerを同一ページに複数配置しても、衝突を回避できます。
Post Snippetsプラグインで作成した【AudioJS_player】ショートコードを使えば、投稿ページにaudiojsの単体プレーヤーまたはプレイリストを簡単に挿入できます。
forEach()文の適用により、複数配置されたaudiojs Player（or PlayList）の中で、再生ボタンを押したプレーヤーのみが優先されるようになり、排他的な動作が行える様に改善できました。

iPhoneのボイスメモで撮った音を大きく、クリアーにするには

ハイレゾ音源をエンコードするならMP３かAACか

M1 MacBook Airで、Apple Intelligenceの作文ツールを使うと「作文ツールは使用できません」とエラーになる？

レコードのハイレゾ化のススメ

低ビットレートでも高音質と言われるOpus音声コーデックの音質評価を試みました。（スペクトル絶対誤差・評価）

ハイレコのブログ

jQueryのeach() を使って、WordPress付属のaudio Playerとaudiojs Playerの衝突を避ける

WordPress標準のaudio Playerとaudiojs Playerの衝突を避ける

次にjQuery の each() 利用して audiojs PlayList へ展開してみます。

Post Snippets でaudiojs Player単体と PlayListを兼用するショートコードの作成

【AudioJS_player】 ショートコードを使う

audiojs PlayListで使用する場合

今回のまとめ

以上、jQueryのeach() を使ったaudiojs PlayerとWordPress標準のaudio Playerの衝突を避ける方法でした。 jQueryのeach()は非常に有用です。

【AudioJS_player】ショートコードを使う

以上、jQueryのeach() を使ったaudiojs PlayerとWordPress標準のaudio Playerの衝突を避ける方法でした。　jQueryのeach()は非常に有用です。