広告 WordPress関連

WordPress環境でAudiojs Playerを使ったplaylistの作成

スポンサーリンク

 

WordPressで音声Playlistを作るには「メディアの追加」から音声ファイル(ID)を選択して音声Playlistを作成するのが簡単ですが、仕様上から音声ファイルのURLでは作成出来ず、またエンドレスで曲目が再生されてしまうという問題もあります。

その為、例えば、当サイトにあるサンプル音源ダウンロードコーナーにある多量な音源(曲目)をplaylist化してWebに掲載するのが困難です。

そこで、HTML(静的)ページでは問題無く動作するaudiojsを使うことを思い立ちましたが、単純にWordpressで使うと、Wordpress自身やテーマ更にキャッシュプラグインなどが原因でコンフリクトが生じてaudiojsを上手く動作させることが出来ませんでした。 今回はWordpressでaudiojsを使う方法の紹介です。

audiojsのplaylistは以下のサイト記事を参考にさせて頂きました。 
サイト記事:「audio.js を使ってみる(クリックして参照)

 

当サイトのWordpress環境

  • WordPress :バージョン 6.2.2
  • テーマ・Affinger6:バージョン20230807
  • WP Fastest Cache Premium(有料版):バージョン 1.6.9

 

Audiojsのダウンロードとインストール(事前準備)

  1. 下のURLをクリックして、「audio.js」のzipファイルをダウンロードします。http://kolber.github.io/audiojs/
  2. 解凍して、3つのファイル『audio.min.js 、audiojs.swf、player-graphics.gif』をWordpressが入っている場所に適当なフォルダーを作り解凍したファイルをアップロードします。
  3. WordPressのheadに以下のコードを記述して「audio.min.js」を読み込みます。

 

説明のため、このページに単純なPlay Listを埋め込んでみました。

この例は、Audiojsを使って、3曲をリストアップしたPlay Listです。 第1曲と第2曲は連続して再生し最後の第3曲が終わると自動的に再生を停止します。 また、曲のタイトルをクリックするとその曲が再生されます。

この音源はランパルのフルートでミュンヒンガーが指揮した シュトゥットガルト室内管弦楽団の演奏です。 1961年に録音されたレコードをAAC 160kbpsで収録しました。

 

オペレータ
オペレータ
上に表示されている「単純なPlay List」の設置を説明をしますね。

 

point
1
HTML要素の記述

WordPress投稿ページの編集画面で、旧エディタの場合はテキストモードにして、以下のコードを記述します。 ブロックエディタの場合は、「カスタムHTML」ブロックを使用します。

HTMLコードの説明
1行目:このコードがAudiojs Playerの本体です。 preload="none"をautoにすると自動で音源を先読みします。
2行目から6行目:リストを表示するコードです。
2行目:olタグにclass="audio"を記述しないと、Wordpressのテーマとコンフリクトします。
音源1〜音源3:絶対パスで音源を指定します。(ex. https//...../音源.mp3)
liタグのclass="last":クラスにlastを記述することで、楽曲が終わると再生を停止します。 lastを記述しないと、次の楽曲が自動で開始します。

point
2
CSSの記述

以下のコードを「カスタマイズ」>「追加CSS」に記述します。

CSSコードの説明
1行目:スマホの場合、Audiojs Playerの横幅を300pxにしています。
4行目:a タグの装飾を無くします。
5行目:再生中のタイトルを強調テーマします。
6行目:再生中のタイトルの前に♬マークを付加します。
10行目:Playerのスキン色の指定です。(無指定でデフォルト黒)

point
3
jQueryの記述

WordPressのheadに以下のコードを記述します。

なお、Affinger6の場合、投稿編集画面の下に「head / footer に出力するコード」欄がありますので、wp_headの欄に2行目ののjQueryコードを、wp_footerの欄に4行目からのjQueryコードを記述します。 (他の投稿ページには影響しないので便利です。)

jQueryコードの説明
21行目:audio_player_index[0]の意味はaudiojs playerの位置に関係し、例えばaudiojs playerが複数あった場合[0]で一番最初のaudiojs playerに対応します。上から2番目は[1]にします。

 

point
4
その他の注意事項

  • WP Fastest Cache Premium プラグインを使っている場合:
    Options設定の「除外」で、「JSを除外」からaudio.min.jsファイルを除外設定する必要があります。 JS除外しないと、当サイトの場合、Playerの再生マークが消失しました。
  • 再生可能音声フォーマット:
    mp3 , m4a,  wav , flac 音源を確認し再生できました。
  • audiojsに適する音源フォーマット:
    mp3が最も最適の様です。 (ローディングが早い)
  • ネット環境:
    ネット環境が悪いとエラーが発生し易いので、リロードボタンを付加するのが良い様です。

 

Audiojs を使ったplaylist(事例)

 

以上、「Wordpress環境でAudiojs Playerを使ったplaylistの作成」でした。

 

スポンサーリンク

 

スポンサーリンク

 

Hi-Reco Blog オススメ

をクリック(タップ)してご覧ください。)