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を使用する）
|
1 2 3 4 5 6 7 8 9 10 |
<html> <audio preload="none" src="sound.mp3"></audio> </html> <script> audiojs.events.ready(function() { audiojs.createAll(); }); </script> |
After（jQueryのeach文で衝突を回避）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
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
HTMLコード
WordPressの場合：テキストエディタにして記述
|
1 2 3 4 5 6 7 8 9 10 |
<div class="js_player blue player_center"> <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="last">のlastを削除すると、最終曲から最初の曲にループ再生できます。
CSS スタイルコード
WordPressの場合：Stylesheet (style.css)に記述
|
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 |
/*******************************/ /** js_player audiojs の CSS **/ /*******************************/ .audiojs { border-radius: 8px; /*プレーヤの角R付加*/ padding: 3px 0; /*player 高さ調整 max:6pix*/ margin:10px 0;box-shadow: 5px 10px 10px #c96;/*影を付ける*/ } /* player 横幅サイズ max-300px固定 */ .px300 .audiojs { max-width:300px;} .px300 .audiojs .scrubber { width:calc(46% - 16px ); } .px300 .audiojs .time {margin-right:-7px;} /* 標準 player 横幅サイズ メディアクエリ・レスポンシブ */ .audiojs{max-width:460px ;} @media screen and (max-width: 480px){ .audiojs { width:300px;} .audiojs .scrubber { width:calc(46% - 16px ); } .audiojs .time {margin-right:-7px;} } /* スキン色 [AudioJS_player]ショートコード用 色の切り替え */ .red .audiojs {background-image: linear-gradient(to top, #4d192b 0%, #792d3f 38%, #74182e 100%);} .blue .audiojs{background-image: linear-gradient(to top, #4B79A1 0%, #283E51 50%, #4B79A1 100%); } .green .audiojs{background: linear-gradient(to bottom, #627d4d 0%,#1f3b08 100%); } /* audiojs_palayerのセンタリング audioタグの囲み要素 */ .player_center .audiojs { margin: 0 auto; display: block; /* 念のため明示 */ } /* [AudioJS_player]ショートコードのPlayList用 CSS */ ol.audio a {color:#424242; text-decoration: none; } ol.audio li.playing a {padding-left: 0.8em; background-color: #FFFF99; color: black; font-weight:bold; } ol.audio li.playing:before { content: '♬'; margin-left:-20px; color:red;} |
jQuery コード（Playe単体とPlayList兼用）
WordPressの場合：</body>の直前に記述
|
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!--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> |
Post Snippets でaudiojs Player単体と PlayListを兼用するショートコードの作成
こちらのページに移動しました。
今回のまとめ
- each()文を使用することで、audiojs PlayerとWordPress標準のaudio Playerを同一ページに複数配置しても、衝突を回避できます。
- Post Snippetsプラグインで作成した【AudioJS_player】ショートコードを使えば、投稿ページにaudiojsの単体プレーヤーまたはプレイリストを簡単に挿入できます。
- forEach()文の適用により、複数配置されたaudiojs Player（or PlayList）の中で、再生ボタンを押したプレーヤーのみが優先されるようになり、排他的な動作が行える様に改善できました。