WordPressにサウンドクラウド風の波形表示WaveSurfer-WP・エラー/速度/出力のカスタマイズなど
| 更新: 2024/02/16 | 4019文字
今回は、以前すこしDJの練習をしていた管理人が、webサイト(wordpress)に、サウンドクラウドみたいな音声波形表示する方法をご紹介します。 javascriptなどで実装する他に、WordPressということで、プラグインで波形表示機能をつけることもできます。ちょっとエラーがでてしまったときの対策も含め、みていってみましょう。
目次
サウンドクラウドみたいな波形表示とは?あるとどんなメリットが?
まずは、管理人のサウンドクラウドの画面を見ていただきましょう。『サイトに音声波形表示』というのは、こういうイメージです(ギザギザの波形のこと。これを自分で作ったサイトにもつけたい。)。 音楽共有サイトのサウンドクラウドや、DJソフトウェア・サンプラーなどを使ったことがある方には、イメージがしやすいと思います。
メリットとしては、『見た目的に動きがあってリッチ』の他、『楽曲のデータで、盛り上がりポイントがどこかわかりやすい』という点が挙げられます。
プラグインWaveSurfer-WPの使い方
まずは、いつものように管理画面のプラグイン新規追加から検索します。 この波形の絵が描いてあるプラグインです。その他、公式ディレクトリからダウンロードしてもOKです。
■WaveSurfer-WP プラグイン公式ページ https://ja.wordpress.org/plugins/wavesurfer-wp/
インストール・有効化が済むと このように、設定に『WaveSurfer-WP』の項目が表示されます。
設定の画面です。 プラグインのページに『replaces the default WordPress audio player with a player capable of displaying audio waveforms(デフォでついているwpのオーディオプレイヤーを波形付きのプレイヤーに置き換える)・It works with all your previous posts(すべての過去投稿にも作用する)』とあるので、特に設定はしなくても大丈夫そうです。 プレイヤーを見てから、お好みで色は変えてください。
表示例はこのようになりました。管理人作のフリー曲素材サイトにつけてみました(オーディオデータがいっぱいアップされているから) 『波形の横幅を太く』というところで10くらいに設定すると、このくらいの太さになります。
管理人の環境で、WaveSurfer-WPエラー(波形が表示されない)の原因究明
WPプラグインでよくあるのが、テーマと相性がわるいなどで、正しく動かないケース。管理人の環境でもエラーが発生したので、原因究明をしてみます。
親llorix-one-lite・子clarinaカスタマイズテーマで、波形プレイヤーが表示されない
管理人作のフリー曲素材サイトでは、『親llorix-one-lite・子clarinaカスタマイズ)』を使用していましたが、プラグインをアクティブにしても、再生ボタンなどが表示されるだけで、音声波形の部分が表示されないというエラーになりました。 このような時は、プラグインがおかしいか・テーマがおかしいか、を判別するために、デフォルトテーマ・親だけで表示、というものをやってみます。
Twenty Seventeenや、llorix-one-liteでの表示チェック
デフォルトテーマTwenty Seventeenで試したところ、特に問題なく表示。
子clarinaを使わないで、親のllorix-one-lite単体使用でも、問題なく表示。これで、WaveSurfer-WPと相性が悪いのは『clarinaテーマ』とわかりました。あとは、このテーマの『functions.php/header.php/css/』をひとつずつチェックすれば原因がわかります。
原因:html5 canvasが、CSSの干渉で、外部に吹っ飛んでいた
結果からいうと『clarinaテーマのCSS干渉』でした。 Twenty Seventeenやllorix-one-lite単体のときは、波形が出るhtml5 canvasの部分が、きちんと枠内に収まっています。
エラーになったclarinaテーマの場合だと、html5 canvasをくくっている部分が、干渉して外に吹っ飛んでしまっています。 初期版clarinaテーマCSS内にあった『.controls-wrap {display: none; }』をカットで、プレイヤーがきちんと表示するようです。これは他のテーマなどの使用状況によって異なるかもしれません。他のケースだと、javascript関連で表示しない(jqueryの読み込みをfunctions.phpで制御していた)などもありました。
表示速度について→やや重く、SPで複数アドセンスと併用は厳しいか?
あとは、SSFのサイトでWaveSurfer-WP表示速度もチェックしました。固定ページ(複数のアドセンス広告&オーディオが多い・ただしオーディオはプリロードしない/preload=”none”)では、spのスコアが厳しいですね~。アドセンス3枚だと厳しいかな~。
個別投稿ページではアドセンス枚数が少ないので、やや持ち直しました。ただし、SSFは動画作成者などPCユーザーが多いので、割り切るというのも必要かもしれません。
気になる場合は、『スクリプト読み込み部分に条件分岐をつけて、spや固定ページでは出さない』といった対応ができます。
wavesurfer-wpカスタマイズ→特定のページだけ、波形生成スクリプト・CSSを出力したい
WaveSurfer-WPには、管理画面でCSS・見栄えに関するエディット項目がありました。しかし、『スクリプト出力制御』まではできませんでした。この段落では、WaveSurfer-WPのスクリプトを、ページごと出力制御してみます。
wavesurfer-wpカスタマイズしたい理由→スクリプトが全ページに出るので、読み込み速度に影響
WaveSurfer-WPをアクティブにした時の『SSF(管理人が作った著作権フリー曲サイト)トップページ』のソースです。WaveSurfer-WP関連スクリプトが出力されています。デフォルトの状態だと『全てのページに出力』という形になっています。
トップページや紹介・規約などのページでは、オーディオショートコードを貼っていないので、それらのページではなるべくスクリプト出力せず『表示を速く』みたいにしたいと考えました。
カスタマイズ方法→スクリプト出力プログラム(wavesurfer_register_ressources)に条件分岐を挟む
一番さっくり実装できる方法です。wavesurfer-wp.php内に『wavesurfer_register_ressources』というファンクションがあります。これが波形表示スクリプトやプラグインCSSを出力しています。この部分にWPの条件分岐『is_single』を挟んでみます。これで投稿ページだけスクリプトが出ます。
テーマアップデートを気にする場合、テーマfunctions.php側でフックを操作して『single以外のときはnullを返す』みたいなのもできると思うので、今度やってみます(単純にfunctions.phpに貼るだけだと、スコープの関係でエラーになる)。
■関数リファレンス/is_single(WordPress) https://ja.wordpress.org/plugins/wavesurfer-wp/
表示例
投稿タイプ固定ページの表示です。スクリプトがでないので、普通のショートコードでオーディオプレーヤーが出ています。このページでは大量にダウンロード先をまとめており、広告も記事内に挟んでいるので、なるべくスクリプトは減らしたいかなというのがありました。
個別投稿の場合はwavesurfer-wpのスクリプトが出るので、このように波形表示がアクティブになります。
あとがき・まとめ
- WordPressにサウンドクラウドみたいな波形表示つけたい→WaveSurfer-WPを使う
- 特に難しい設定はない
- デフォルトテーマTwenty Seventeenではきちんと表示
- 相性が悪いテーマでは、原因究明さえできれば対処可能(javascript/cssなど)
- スクリプト読み込みが増える分、複数のアドセンスと合わさると表示速度が厳しい
- スクリプト読み込みに、条件分岐をかけることができる
今回の記事を簡潔にまとめるとこんなところです。プラグインということでWordPressサイトには使えますが、静的htmlサイトではムリです。静的htmlサイトに波形表示をつけたいときはwavesurfer.jsを活用するとよいでしょう。
【カテゴリ】- WordPressプラグイン情報
【タグ】- CSSエディット, PHP, WordPress