Audio Player
WordPressのAudio Playerに囲みショートコード【plyer_with_skip_btn】で「15秒戻る」「30秒進む」ボタン を追加
↑↑↑ ↑↑↑
「15秒戻る」「30秒進む」ボタン
以前の記事では、WordPressのネイティブAudioプレーヤーをカスタマイズできる
Post Snippetsプラグインを使った [Audio_player]とプレイリスト用[Audio_playList]ショートコードを紹介しました。（※詳細は下の参照記事をご覧ください）
-
-
参照記事WordPressのネイティブ Audio player（ショートコード）をカスタマイズする（Post Snipetsプラグイン利用）
WordPress 3.6 からメディアプレイヤー機能（MediaElement.js）が正式に組み込まれ 、エディターに音声ファイルを追加すると、WordPress が自動的に[audio]ショート ...
[Audio_player]や[Audio_playList]に囲み型ショートコード【plyer_with_skip_btn】で囲うことで「↺15秒戻る」 「30秒進む↻」 スキップボタンを配置出来る様にしてみました。
今回は、”WPCode Liteプラグイン”を活用した【player_with_skip_btn】囲み型ショートショートコードの作成方法を紹介します。
shortcode [plyer_with_skip_btn top_position="20" color="blue"][Audio_player][/plyer_with_skip_btn]
30秒進む・15秒戻るボタン・機能の実装について
以下に示す、3つのセクション（[Sect.1]〜[Sect.3】）を連携させることで、「15秒戻る ↺」 「↻ 30秒進む」 のスキップ操作用ボタンの配置と機能を実現しています。
今回は、各セクションをWordPressへ効率的に配置するために”WPCode Liteプラグイン”を活用しました。 詳細は、下記参照ページをご覧ください。
- [Sect.1] ショートコード：「30秒進む」「15秒戻る」ボタンをHTMLに配置する囲み型ショートコード作成
- [Sect.2] jQuery：「30秒進む」「15秒戻る」を実行する jQuery スクリプトコードの作成
- [Sect.3] CSS：ボタン用CSSの作成
[Sect.1] 「30秒進む」「15秒戻る」ボタンを配置する囲み型ショートコード【plyer_with_skip_btn】作成
ショートコード名を 「plyer_with_skip_btn」にしました。 WPCode Liteプラグインで新規追加から、PHPスニペットを選択し以下のコードをコードプレビューエリアに貼り付けます。 スニペットのタイトルに分かり易い名前を付けて、場所を「あらゆる場所で実行」に設定した後、【スニペットの保存】を押下します。
|
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 |
function my_audio_shortcode($atts, $content = null) { // ① top_position 属性を受け取り（デフォルト 0） $atts = shortcode_atts( array( 'top_position' => 0, 'color' => 'default', //btn の背景色 brown,blue,green,redを指定する。 ), $atts, 'plyer_with_skip_btn' ); // ② 囲みショートコード内の p や br を除去し、内部のショートコードも実行 $content = do_shortcode(shortcode_unautop($content)); // ③ HTML を生成 $html = ' <div class="wp-audio-wrap">' . $content . ' <div class="audio-controls" style="transform: translateY(' . intval($atts["top_position"]) . 'px);"> <div class="skip-btn-' .$atts["color"] . ' audio-back-15 skip-btn">↺ 15s</div> <div class="skip-btn-' .$atts["color"] . ' audio-forward-30 skip-btn">30s ↻</div> </div> </div>'; return $html; } add_shortcode('plyer_with_skip_btn', 'my_audio_shortcode'); |
[Sect.2] jQuery スクリプトコードの作成
ショートコード【plyer_with_skip_btn】の各ボタンが押された時に動作するjQueryです。 WPCode Liteプラグインで新規追加から、JavaScriptスニペットを選択し以下のコードをコードプレビューエリアに貼り付けます。 スニペットのタイトルに分かり易い名前を付けて、場所を「サイト全体のフッター」に設定した後、【スニペットの保存】を押下します。
|
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 |
jQuery(function($){ function getActiveAudio(wrap) { // MediaElement.js が作るプレイヤー本体を取得 const container = wrap.find('.mejs-container'); if (container.length === 0) return null; // container 内の audio を取得（プレイリストの場合はここに再生成される） const audio = container.find('audio')[0]; return audio || null; } function attachButtons() { $('.wp-audio-wrap').each(function(){ const wrap = $(this); // 現在アクティブな audio を取得 const audio = getActiveAudio(wrap); if (!audio) return; // 既存イベント削除 wrap.find('.audio-back-15').off('click'); wrap.find('.audio-forward-30').off('click'); // 15秒戻る wrap.find('.audio-back-15').on('click', function(e){ e.preventDefault(); audio.currentTime = Math.max(0, audio.currentTime - 15); }); // 30秒進む wrap.find('.audio-forward-30').on('click', function(e){ e.preventDefault(); audio.currentTime = Math.min(audio.duration, audio.currentTime + 30); }); }); } // 初期化時に実行 setTimeout(attachButtons, 500); // プレイリストで曲が切り替わった時 $(document).on('playlisttrackchange', function(){ setTimeout(attachButtons, 200); }); // ページ読み込み後、MediaElement.js が完全に初期化されたときに再実行 $(document).on('mejsplayerloaded', function(){ setTimeout(attachButtons, 300); }); }); |
[Sect.3] ボタン用CSSの作成
ショートコード【plyer_with_skip_btn】のclass=".skip-btn" に対するボタン用のCSSです。 WPCode Liteプラグインで新規追加から、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 |
.audio-controls { display: flex; justify-content: center; gap: 40px; } .skip-btn { /* all: unset; buttonタグのdefaultデザイン消去 */ display: inline-flex; /* 中央揃えのため */ justify-content: center; /* 横方向中央 */ align-items: center; /* 縦方向中央 */ width: 50px; height: 20px; border-radius: 6px; background: gray; color: white; font-size: 11px; cursor: pointer; /* ボタンらしく */ user-select: none; } .skip-btn:hover { background: #444; } .skip-btn:active { transform: scale(0.93); } |
上記の[Sect.1]〜[Sect.3]におけるWPCode Liteの設定が完了したら、各ステータスボタンを右方向にスライドさせて有効化することで、【plyer_with_skip_btn】ショートコードの利用が可能となります。
完成した【plyer_with_skip_btn】ショートコードの使い方
[Audio_player]の場合
shortcode 下に示す様に、[Audio_player]を[plyer_with_skip_btn]で囲みます。 [plyer_with_skip_btn top_position="20" color="red"][Audio_player pre="none" src="URL" width="500px" margin="20px auto 0px auto" color="red" radius="r8"][/plyer_with_skip_btn]
【plyer_with_skip_btn】オプション
- top_position="20"：ボタンの上下方向・位置をpxで指定します。 例えば、-30 にするとボタンの位置が上方に30px上がります。 defaultは0pxです。 なお、上下位置は、[Sect.1] のショートコード19行目のtransform: translateY() で下の要素に影響させない様に、見た目の位置を指定しています。
- color="red"：ボタンの背景色を指定します。 default（グレー）、bule,red,brown,greenを選択
[Audio_playList]の場合
shortcode 下に示す様に、[Audio_playList]を【plyer_with_skip_btn】で囲みます。 [plyer_with_skip_btn top_position="-175" color="blue"][Audio_playList ids="123,456,789" color="blue" back_color="on" width="500px" margin="0 auto 0px auto"][/plyer_with_skip_btn]
使用した音源について
この音源は、1962年に録音された「オイストラフが弾くJ.S.バッハ： ヴァイオリン協奏曲第1番イ短調 BWV.1041」のレコードからVinylstudioでハイレゾ録音（FLAC 24bit 192khz）したものを、AAC変換した音源です。