wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

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

   

こんにちは、管理人@SS_mshpです。

今回は、以前すこし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;
}』をカットで、プレイヤーがきちんと表示するようです。これは他のテーマなどの使用状況によって異なるかもしれません。

あとがき・まとめ

  • WordPressにサウンドクラウドみたいな波形表示つけたい→WaveSurfer-WPを使う
  • 特に難しい設定はない
  • デフォルトテーマTwenty Seventeenではきちんと表示
  • 相性が悪いテーマでは、原因究明さえできれば対処可能

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

 

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - wordpressプラグイン(拡張)情報 【タグ】 - , ,

Message

メールアドレスが公開されることはありません。

  関連記事

wordpressのリビジョンを、プラグインで制御する方法(revision control)【データベースを軽く】

今回は、wordpressで溜まりすぎるとデータベースを圧迫するリビジョ …

【WordPressとGoogleカレンダー連携プラグイン】Simple Calendarの設定・Calendar APIやID取得しての設定

今回は、WordPressサイトに、googleアカウントがある人ならみ …

【wordpressで教室・個別相談・サロン予約受付】プラグインEasy Appointmentsの設定・サイト実装方法を詳しく解説

今回は、特定の形態のビジネスで、『カレンダーつき予約フォームで、お客さん …

【wordpress限界高速化】Pjax技術を使ってサイトを高速表示するプラグインと、エラーの対処

今回は、『遅い』とされていた(過去形)wordpressサイトを『Pja …

【PHPでwpプラグインを改造】all in one seoで、og:descriptionを書かなかったときに、文章が全部出力されてしまうのを直したい

今回は、ワードプレスでよくつかわれるプラグイン『all in one s …

【WPプラグイン・サイト高速化】EWWW Image Optimizerで、画像をサクッと圧縮して表示を速くしよう

今回は、サイトの高速化で、画像を圧縮してくれるものを試します 画像サイズ …

【phpでWPプラグイン改造】What’s New Generatorで、記事タイトル文字数を設定する

今回は、ワードプレスサイトでよく使われる更新情報表示プラグイン『What …

【WPプラグイン】ページ読み込み画面(ローディングアニメ)をサクッと実装できるWP Smart Preloader

今回は、wordpressのサイトで、ページ読み込み時の画面(ローディン …

【wpプラグイン】ワードプレスサイトに、スマホで電話機能をつけられる『Really Simple Click To Call』

今回は、スマホで電話する機能を、ワードプレスサイトに実装できるプラグイン …

【WPプラグイン】月額無料でレストラン・カフェなど飲食店の予約に使える『Restaurant Reservations』

今回は、飲食店でワードプレスサイトを持ったときに効果を発揮する、月額無料 …

ワードプレスサイトに、コメント機能を実装しない/非表示に

今回は、ブログサイトによくある『コメント機能』を、実装しない方法を考えて …

【ワードプレスサイト製作】俺の最低限なインストールプラグイン晒す 

今回は、ねた準備中につき雑談です。 管理人はワードプレス勢ですが、なるべ …