wavesurfer.js で音データの波形表示

筆者のブログでは音を再生するとき、HTML5標準のオーディオプレイヤーを使ってますが、今回はwavesurfer.js で波形表示されるオーディオプレイヤーを作ってみました。

目次

wavesurfer.js とは

wavesurfer.js はウェブブラウザ上で音声の波形表示と再生を行うオープンソースのJavaScript ライブラリです。

図：wavesurfer.js 公式ページ
図：wavesurfer.js 公式ページ

筆者の認識としては波形表示できるオーディオプレイヤーを簡単に作成できるツールです。

公式ページには参考例がいくつかあり、WEBページにレコーダーを作る例やスペクトログラムを表示する例などがあったりします。

Quick startを試す

公式のトップページにクイックスタートがあるので、それを試してみます。

クイックスタートのソースコードは以下です（編集可）。音声ファイルのURLだけ筆者のものに差し替えています。

<div id="waveform">
  <!-- the waveform will be rendered here -->
</div>

<div id="waveform">で波形表示する位置を決定しています。

const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#4F4A85',
  progressColor: '#383351',
  url: 'https://dl.dropboxusercontent.com/scl/fi/lhmzkmxvy1pm4qlo8zzx8/heartbeatx.mp3?rlkey=89qc4wsuycnnb36z7qkmocitz&st=esx8m8z0&dl=0',
})

WaveSurfer.createで"waveform"のIDに波形を作成しているっぽいです。また、ここで波形の色や再生ファイルの指定もできるみたい。

wavesurfer.on('interaction', () => {
  wavesurfer.play()
})

波形クリックで再生するプログラムの位置がここになります。

オーディオプレイヤー作成

クイックスタートを確認したところで、ブログで使えるオーディオプレイヤーを実装していきます。

オシャレなものを作るのは大変そうでしたので、たたき台は ChatGPT に作っていただきました。

おわりに

本記事のサンプルコードは Wavesurfer.js（MIT License）の公式ページを参考にしています。