今まで「サンプル音源・DLコーナー」は罫線の中にMP3（又はAAC）とFlacハイレゾ音源を埋め込んでいましたがもう少しわかり易くするために、Affinger5のスライドボックス機能を利用した「サンプル音源・DLコーナー」にリニューアルしました。 このスライドボックスを利用するに当たって行った作業内容を中心に紹介します。
「サンプル音源・DLコーナー」Befor & After
Befor 外観
After 外観
ポイント
以前の「サンプル音源・DLコーナー」は、全体が俯瞰できますが、判り難く、今後サンプル音源が多くなった時を考慮して作曲者別に分類しました。 宜しければ、リニューアルした「サンプル音源・DLコーナー」をご覧ください。
チョット工夫したこと
step
1作曲者別にサンプル音源リストを表示するようにしました。
TOC（Table of Contents Plus）プラグインを利用して、作曲者名を目次に設定しました。
TOCプラグインは、記事の見出しから目次を自動生成できるWordPressプラグインです。
見出しを作曲者名にすれば、その見出しが作曲者の目次になりますので、ユーザーが目次の作曲者をクリックすれば、作曲者の見出しへジャンプします。
step
2AFFINGER５のスライドボックスを使ったサンプル音源表示
WordPressテーマのAffinger５（有料）にあるスライドボックスは、「通常は表題のみを残して閉じていて、表題をクリックするとコンテンツが（下に）展開し、再度 表題をクリックすると閉じる（＝トグル動作）」というものです。 この機能を利用して、表題を曲名にして、曲名（表題）をクリックするとサンプル音源（コンテンツ）が展開する様にしました。 例を下に示します。
曲名をクリックするとサンプル音源が下に展開されます。
|
PHILIPS
|
サウンドを聴く ♫
MP3 160kbps |
ハイレゾ音源DL
96Khz 24bit |
step
3曲名表題を展開させた時にサウンドを停止さる。
問題発覚
曲名をクリックして展開されたサンプル音源を再生中に、再度、曲名をクリックすると、楽曲が鳴ったままでサンプル音源（コンテンツ）が閉じてしまいます。 これでは、どこのサンプル音源が鳴っているか判らなくなるという問題が生じてしまいますね！
解決策
そこで、曲名をクリックしてコンテンツを開・閉させた時に、jQueryを用いてサウンドを停止させる様な機能を持たせることにしました。
jQueryのポイント
スライドボックスの表題（曲名）要素をchromeプラウザでの「検証モード」で調べてみると、以下のコードになっていて、classはst-btn-open でした。
<p class="st-btn-open" style="color:#1a1a1a;">曲名（表題）</p>
よって、曲名（表題）要素のクリック・イベントが生じたら、サウンドを停止させれば良いことがわかりましたので、後はサウンドを停止させる方法を見つければ良いだけです。
サウンドを停止するために参考にさせて頂いたURL
- javascript – 現在再生中のMediaElementプレーヤーをすべて停止する方法
https://codeday.me/jp/qa/20190324/470229.html - jQueryだけでiframeを再読み込み(reload)させる方法とプレーンなjavascriptを使った方法
https://9-bb.com/jqueryだけでiframeを再読み込みreloadさせる方法とjavascriptを使っ/
最終的にjQueryは以下のコードになりました。 Affinger５管理 ＞ 「その他」 へ行き、「headに出力するコード※wp_head()にエスケープせずにそのまま出力されます」の入力欄にこのコードを設置しています。
|
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 |
<!-- DLコーナでスライドボックスをクリックしたときにサウンドを停止させる --> <script type="text/javascript"> $(function(){ var src1 = $("#playListframe1").attr("src"); var src2 = $("#playListframe2").attr("src"); var src3 = $("#playListframe3").attr("src"); var src4 = $("#playListframe4").attr("src"); $(".st-btn-open").click(function(){ //Playerの停止（sound pause） $('audio').each(function() { $(this)[0].pause(); }); // iframeのリロード（sound stop） $("#playListframe1").attr("src",""); $("#playListframe1").attr("src",src1); $("#playListframe2").attr("src",""); $("#playListframe2").attr("src",src2); $("#playListframe3").attr("src",""); $("#playListframe3").attr("src",src3); $("#playListframe4").attr("src",""); $("#playListframe4").attr("src",src4); }); }) </script> |
jQueryの説明
- 11行は、曲名（表題）要素がクリックされたら、以下のプロセスへ進みます。
- 14,15行は、オーディオプレーヤの一時停止の命令です。
- 19行以降は、IFRAME（インラインフレーム）のオーディオプレーヤを停止させるために、IFRAMEをリロードすることで、初期状態（サウンド停止）に戻しています。
step
4更に曲名（表題）を枠線で囲みました。（2019/7/12 追記）
曲名（表題）を枠線で囲むために、以下のCSSコードをAffinger5のChild: Stylesheetに追記しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/*DLコーナー頁（page-id-369）・限定のスライドボックス・タイトル CSS */ .page-id-369 .st-btn-open{ padding: 0.5em 1em; font-weight: bold; color: navy !important;/*文字色*/ background: #FFF; border: solid 1px #6091d3;/*線*/ border-radius: 5px;/*角の丸み*/ } .page-id-4567 .st-btn-open:hover { color: brown !important; /* マウスオーバーした時に色を変える */ } |
CSSの説明
- 3行〜9行： .page-id-369（DLコーナー頁を示すID）を併記することでDLコーナ頁に限定した枠線囲みのCSSになります。
- 13,14行：上記と同じで、DLコーナ頁限定で、マウスオーバーした時に色を変えています。
- 上記CSS以外で、スライドボックス属性のmargin_bottom="15"からmargin_bottom="1"に変えています。
以上、「サンプル音源・DLコーナー」（固定ページ）のリニューアルについての紹介でした。 宜しければ下の「サンプル音源・DLコーナー」をご参照ください。
サンプル音源・DLコーナ
ここをクリックしてサンプル音源を聴いてみてください