webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

【WPプラグイン】WordPressにサウンドクラウドみたいな波形表示つけたい→WaveSurfer-WPをどうぞ

      2021/02/25

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や固定ページでは出さない』といった対応ができます。

あとがき・まとめ

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

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

 

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

  関連記事

【WordPress】WP-Membersプラグインによる、会員向けコンテンツサイトの構築(カスタマイズ必須?)

今回は、現在管理人が検討している(まだ実装はしません)『WP-M ...

フロントの『aioseo-admin-bar-css』を出力しないようにしたい→ログイン時のみ出るようになっているので大丈夫です

今回はAll_in_One_SEO(WordPressプラグイン ...

管理画面からFTP操作『WP File Manager』~過去の脆弱性ver・機能・使用例(テーマ消えないなど)の紹介

今回はWordPressプラグイン情報です。都合によりFTPが使 ...

WordPressで車販売サイトが作れる『Car Dealer, Classifieds & Listing』・英語なのでネックも

今回は、もはや何でもある感じのWordPressプラグインで、『 ...

functions.phpエディットできない(orテーマファイル変更しない)場合の機能追加は?→Code Snippetsプラグインで

今回は、環境のせいで、WordPressのfunctions.p ...

車・不動産・カタログなどに使えそう!WordPressコンタクトフォームにidやタイトルを渡して自動挿入させる方法

今回は、管理人が以前、お仕事でサイトを作ったときに使ったカスタマ ...

【WPプラグイン】Smart Custom FieldsとCustom Field Bulk Editorは相性悪い?(空リンク・真偽値フィールドに文字)

今回は、管理人がカスタムフィールド系の案件で使っているプラグイン ...