Affinger5のスライドボックスを使って「サンプル音源・DLコーナー」(固定ページ)をリニューアルしました。

更新日:

今まで「サンプル音源・DLコーナー」は罫線の中にMP3(又はAAC)とFlacハイレゾ音源を埋め込んでいましたがもう少しわかり易くするために、Affinger5のスライドボックス機能を利用した「サンプル音源・DLコーナー」にリニューアルしました。 このスライドボックスを利用するに当たって行った作業内容を中心に紹介します。

 

スポンサーリンク

「サンプル音源・DLコーナー」Befor & After

Befor 外観

After 外観


ポイント

以前の「サンプル音源・DLコーナー」は、全体が俯瞰できますが、判り難く、今後サンプル音源が多くなった時を考慮して作曲者別に分類しました。 宜しければ、リニューアルした「サンプル音源・DLコーナー」をご覧ください。

 

チョット工夫したこと

 

step
1
作曲者別にサンプル音源リストを表示するようにしました。

TOC(Table of Contents Plus)プラグインを利用して、作曲者名を目次に設定しました。

TOCプラグインは、記事の見出しから目次を自動生成できるWordPressプラグインです。

見出しを作曲者名にすれば、その見出しが作曲者の目次になりますので、ユーザーが目次の作曲者をクリックすれば、作曲者の見出しへジャンプします。

Table of Contents Plus

 

step
2
AFFINGER5のスライドボックスを使ったサンプル音源表示

WordPressテーマのAffinger5(有料)にあるスライドボックスは、「通常は表題のみを残して閉じていて、表題をクリックするとコンテンツが(下に)展開し、再度 表題をクリックすると閉じる(=トグル動作)」というものです。 この機能を利用して、表題を曲名にして、曲名(表題)をクリックするとサンプル音源(コンテンツ)が展開する様にしました。 例を下に示します。

曲名をクリックするとサンプル音源が下に展開されます。

♫ ヘンデル バイオリン・ソナタ 第4番 ニ長調 作品1の13(Vn:グリュミオー /チェンバロ : ラクロワ )
(▼クリックしてON/OFF表示)

PHILIPS
1966

サウンドを聴く ♫

MP3 160kbps

ハイレゾ音源DL

Flac Down load

96Khz 24bit

レコードのハイレゾ録音はADD!!(DDD-CDの苦い経験)

 

step
3
曲名表題を展開させた時にサウンドを停止さる。

問題発覚


曲名をクリックして展開されたサンプル音源を再生中に、再度、曲名をクリックすると、楽曲が鳴ったままでサンプル音源(コンテンツ)が閉じてしまいます。 これでは、どこのサンプル音源が鳴っているか判らなくなるという問題が生じてしまいますね!

解決策


そこで、曲名をクリックしてコンテンツを開・閉させた時に、jQueryを用いてサウンドを停止させる様な機能を持たせることにしました。

jQueryのポイント

スライドボックスの表題(曲名)要素chromeプラウザでの「検証モード」で調べてみると、以下のコードになっていて、classはst-btn-open でした。

<p class="st-btn-open" style="color:#1a1a1a;">曲名(表題)</p>

よって、曲名(表題)要素のクリック・イベントが生じたら、サウンドを停止させれば良いことがわかりましたので、後はサウンドを停止させる方法を見つければ良いだけです。

サウンドを停止するために参考にさせて頂いたURL

最終的にjQueryは以下のコードになりました。 Affinger5管理 > 「その他」 へ行き、「headに出力するコード※wp_head()にエスケープせずにそのまま出力されます」の入力欄にこのコードを設置しています。

jQueryの説明

  • 11行は、曲名(表題)要素がクリックされたら、以下のプロセスへ進みます。
  • 14,15行は、オーディオプレーヤの一時停止の命令です。
  • 19行以降は、IFRAME(インラインフレーム)のオーディオプレーヤを停止させるために、IFRAMEをリロードすることで、初期状態(サウンド停止)に戻しています。

 

step
4
更に曲名(表題)を枠線で囲みました。(2019/7/12 追記)

曲名(表題)を枠線で囲むために、以下のCSSコードをAffinger5のChild: Stylesheetに追記しました。

CSSの説明

  • 3行〜9行: .page-id-369(DLコーナー頁を示すID)を併記することでDLコーナ頁に限定した枠線囲みのCSSになります。
  • 13,14行:上記と同じで、DLコーナ頁限定で、マウスオーバーした時に色を変えています。
  • 上記CSS以外で、スライドボックス属性のmargin_bottom="15"からmargin_bottom="1"に変えています。

 

以上、「サンプル音源・DLコーナー」(固定ページ)のリニューアルについての紹介でした。 宜しければ下の「サンプル音源・DLコーナー」をご参照ください。

サンプル音源・DLコーナ

ここをクリックしてサンプル音源を聴いてみてください

 


スポンサーリンク

〜〜〜〜〜〜〜〜〜〜〜

おすすめ記事

1

  レコードのハイレゾ録音へのヒント(Tips)   ハイレゾ録音のヒントになればと、 今までのレコードのハイレゾ録音を通して、思いつくまま必要と思われることを書き留めましたのでご ...

2

  これまでの当ブログ記事(テストレコードなどのブログ)の知見を通して、アナログ・レコードが音質的に不利な点が多々見つかりました。 アナログレコードの音質を好ましく思っている一人で、本当はあ ...

3

年代モノのレコードプレーヤTRIO(KP-51F)を使ってレコードのハイレゾ録音を行っていますが、このプレーヤの実力を知るためにテストレコード(AD-1)使って定性的な特性を調べ、断片的な記事を投稿し ...

4

eonkyoからDL購入したハイレゾファイルを基準音源にして、基準音源と同一録音のレコードをMCカートリッジとMMカートリッジでハイレコした音源の音質比較を試みました。 MCカートリッジは、オルトフォ ...

5

「HAP-Z1ESのDSEEとDSDリマスタリングエンジンの効果検証」(以前のブログ記事)は、 実際のLPレコードからハイレゾ化したリアルサウンドでDSEEを評価したものでした。 今回は、正弦波の組 ...

Copyright© ハイレコのブログ , 2019 All Rights Reserved Powered by AFFINGER5.