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

                    更新: 2021/06/16   4019文字

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

今回は、以前すこしDJの練習をしていた管理人が、webサイト(wordpress)に、サウンドクラウドみたいな音声波形表示する方法をご紹介します

javascriptなどで実装する他に、WordPressということで、プラグインで波形表示機能をつけることもできます。ちょっとエラーがでてしまったときの対策も含め、みていってみましょう。

サウンドクラウドみたいな波形表示とは?あるとどんなメリットが?


まずは、管理人のサウンドクラウドの画面を見ていただきましょう。『サイトに音声波形表示』というのは、こういうイメージです(ギザギザの波形のこと。これを自分で作ったサイトにもつけたい。)。
音楽共有サイトのサウンドクラウドや、DJソフトウェア・サンプラーなどを使ったことがある方には、イメージがしやすいと思います。

メリットとしては、『見た目的に動きがあってリッチ』の他、『楽曲のデータで、盛り上がりポイントがどこかわかりやすい』という点が挙げられます

プラグインWaveSurfer-WPの使い方

まずは、いつものように管理画面のプラグイン新規追加から検索します。

この波形の絵が描いてあるプラグインです。その他、公式ディレクトリからダウンロードしてもOKです。

インストール・有効化が済むと

このように、設定に『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スクリプトが全ページに出る
WaveSurfer-WPをアクティブにした時の『SSF(管理人が作った著作権フリー曲サイト)トップページ』のソースです。WaveSurfer-WP関連スクリプトが出力されています。デフォルトの状態だと『全てのページに出力』という形になっています。

トップページや紹介・規約などのページでは、オーディオショートコードを貼っていないので、それらのページではなるべくスクリプト出力せず『表示を速く』みたいにしたいと考えました。

カスタマイズ方法→スクリプト出力プログラム(wavesurfer_register_ressources)に条件分岐を挟む


一番さっくり実装できる方法です。wavesurfer-wp.php内に『wavesurfer_register_ressources』というファンクションがあります。これが波形表示スクリプトやプラグインCSSを出力しています。この部分にWPの条件分岐『is_single』を挟んでみます。これで投稿ページだけスクリプトが出ます。

テーマアップデートを気にする場合、テーマfunctions.php側でフックを操作して『single以外のときはnullを返す』みたいなのもできると思うので、今度やってみます(単純にfunctions.phpに貼るだけだと、スコープの関係でエラーになる)。

表示例


投稿タイプ固定ページの表示です。スクリプトがでないので、普通のショートコードでオーディオプレーヤーが出ています。このページでは大量にダウンロード先をまとめており、広告も記事内に挟んでいるので、なるべくスクリプトは減らしたいかなというのがありました。


個別投稿の場合はwavesurfer-wpのスクリプトが出るので、このように波形表示がアクティブになります。

あとがき・まとめ

  • WordPressにサウンドクラウドみたいな波形表示つけたい→WaveSurfer-WPを使う
  • 特に難しい設定はない
  • デフォルトテーマTwenty Seventeenではきちんと表示
  • 相性が悪いテーマでは、原因究明さえできれば対処可能(javascript/cssなど)
  • スクリプト読み込みが増える分、複数のアドセンスと合わさると表示速度が厳しい
  • スクリプト読み込みに、条件分岐をかけることができる

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

 

WordPressサイト制作&リニューアル・機能開発サービス | アトリエSS


【カテゴリ】 - WordPressプラグイン情報
【タグ】 - , ,

  関連記事

【WPプラグイン無しでサイト構築&表示を速く】Really Simple SSLって無効化して大丈夫?→設定しとけば大丈夫、ただし混在に注意
車・不動産・カタログなどに使えそう!WordPressコンタクトフォームにidやタイトルを渡して自動挿入させる方法
【WP/contact form 7】$_POST変数の中身で判定して、『メール送信ありがとうページ』に遷移させる方法
【wpプラグイン】スライドショー実装でwebサイトをリッチにする『Slider by WD』
ワードプレスサイトを、プラグインでサクッとSSL化する方法
【WordPressショッピングサイト作成】Welcart概要・テーマ・プラグイン・設定例などを詳しく解説
【PHPでwpプラグインを改造】all in one seoで、og:descriptionを書かなかったときに、文章が全部出力されてしまうのを直したい
【phpでWPプラグイン改造】What’s New Generatorで、記事タイトル文字数を設定する
【WordPress&GitHub連動】WP Pusherプラグインで、テーマやプラグインをGitHubリポジトリから更新してみる
WordPressで絵や動画・オーディオのダウンロード販売しよう~Easy Digital Downloads使い方
フロントの『aioseo-admin-bar-css』を出力しないようにしたい→ログイン時のみ出るようになっているので大丈夫です
【WPプラグイン】Smart Custom FieldsとCustom Field Bulk Editorは相性悪い?(空リンク・真偽値フィールドに文字)