【WPプラグイン】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や固定ページでは出さない』といった対応ができます。

あとがき・まとめ

今回の記事を簡潔にまとめるとこんなところです。プラグインということでWordPressサイトには使えますが、静的htmlサイトではムリです。静的htmlサイトに波形表示をつけたいときはwavesurfer.jsを活用するとよいでしょう。