はじめに
今回の記事は、以下の wavesurfer.js を題材にしたものです。
●wavesurfer.js | audio waveform player JavaScript library
https://wavesurfer.xyz/
このライブラリは、以下の公式説明に書かれているとおり、インタラクティブな音声再生・波形の表示が行えるものです。
Wavesurfer.js is an interactive waveform rendering and audio playback library, perfect for web applications. It leverages modern web technologies to provide a robust and visually engaging audio experience.
公式サンプル
まず、どんなことができるか、以下の公式サンプルのページで確認してみます。
●wavesurfer.js | audio waveform player JavaScript library
https://wavesurfer.xyz/examples/
公式サンプル「Basic」
以下は、サンプルの 1つ「Basic」です。
内容を見てみると、MP3ファイルの読み込み元や設定を含んだオプションを設定した処理を書くだけで、簡単に波形の表示が行えるようです。
また、「その波形をクリックした時に、クリックした場所から再生を行う」というインタラクティブな処理を、以下の簡単な処理を付け足すだけで実現できるようです。
wavesurfer.on('click', () => {
wavesurfer.play()
})
な、上記のサンプルは、コードの部分を編集すると、その結果がすぐに画面右の表示部分に反映されるようです。
公式サンプル「Bars」
別の公式サンプルも見てみます。
「Bars」というものは、波形の見た目を変えるオプションを指定したサンプルになるようです。
以下の部分で、波形の見た目を変えているようです。
// Set a bar width
barWidth: 2,
// Optionally, specify the spacing between bars
barGap: 1,
// And the bar radius
barRadius: 2,
パラメータを変えてみると、ずいぶん印象が異なる見た目にできます。
波形表示を、こんな風に簡単にカスタマイズできるのは良さそうです。
公式サンプル「Envelope」
さらにプラグインを用いた高度な機能も提供されているようです。
プラグインの項目の 1つ「Envelope」を見てみると、以下のように、再生途中で音量を動的に変更するようなことも行えるようです。
公式のプラグインがいくつかあるようで、公式の GitHubリポジトリ（katspaugh/wavesurfer.js） を見てみると、Plugins という項目の部分を見ると、簡単な説明とともにプラグインの内容が列挙されています。
公式サンプルのページには、その他にもサンプルがたくさんありますが、次に進みたいと思います。
公式のクイックスタート
今度は公式のクイックスタートを見てみます。
以下は、トップページを下に進むと出てくるクイックスタートです。
基本的には、先ほど見た「Basic」のサンプルと同じような内容のようです。
違いは、コンテナになる HTML要素に関する記載があるのと、CDNからライブラリを読みこむ部分の記載があるくらいです。
あと、利用可能な設定や処理の大まかなところは、以下の日本語の記事を見るのが良いかもしれません。
●wavesurfer.js【保存版】音源の波形表示&プレイヤー機能を簡単に実装するライブラリのまとめ | Miyachi Labo
https://labo.kon-ruri.co.jp/wavesurfer-js/
合わせて、以下の公式のドキュメントも確認しておくと良いと思います。
●wavesurfer.js
https://wavesurfer.xyz/docs/
p5.js Web Editor上で試す
それでは p5.js Web Editor上で試してみます。
まず、HTML でライブラリをロードします。具体的には、以下の行を追加します。
<script src="https://unpkg.com/wavesurfer.js@7"></script>
また、
function setup() {
noCanvas();
const url = "https://【パス＋MP3ファイルのファイル名】.mp3";
const wavesurfer = WaveSurfer.create({
container: document.body,
waveColor: "rgb(200, 0, 200)",
progressColor: "rgb(100, 0, 100)",
url: url,
});
wavesurfer.on("click", () => {
wavesurfer.play();
});
}
これを実行すると、以下のように波形が表示されます。
さらに波形が表示された部分をクリックすると、クリックしたところを開始点として、MP3ファイルを再生できることが確認できました。
特に波形の表示の部分・それをインタラクティブなプレイヤーにする部分は、自前で音声処理ライブラリを使って実現するとなるとわりと大変そうに思いますが、それをこんなに簡単に実現できるのはありがたいです。