WordPressにサウンドクラウド風の波形表示WaveSurfer-WP・エラー/速度/出力のカスタマイズなど

今回は、以前すこし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で制御していた）などもありました。

表示速度について→やや重く、ＳＰで複数アドセンスと併用は厳しいか？

あとは、SSFのサイトでWaveSurfer-WP表示速度もチェックしました。固定ページ（複数のアドセンス広告＆オーディオが多い・ただしオーディオはプリロードしない/preload=”none”）では、spのスコアが厳しいですね～。アドセンス３枚だと厳しいかな～。

個別投稿ページではアドセンス枚数が少ないので、やや持ち直しました。ただし、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サイトには使えますが、静的htmlサイトではムリです。静的htmlサイトに波形表示をつけたいときはwavesurfer.jsを活用するとよいでしょう。