Wavesurfer.js - Web上で美しい音声波形を表示できるライブラリ

はじめに

Webアプリで音声を扱う機会、増えてきましたよね。ポッドキャストの再生画面とか、音楽プレイヤーとか、音声メッセージの表示とか。そういうときに「波形表示があったらかっこいいな」と思ったことありませんか。

個人的には、SoundCloudみたいな波形UIを見るたびに「これどうやって実装してるんだろう」と思ってました。自前でCanvas描画するのは正直しんどい。そこで見つけたのがWavesurfer.jsです。

Wavesurfer.jsは、Web AudioとCanvasを活用したオーディオ波形表示ライブラリ。GitHubスター数は10,000を超えていて、14年以上の歴史がある安定したプロジェクトなんですよね。

特徴・メリット

軽量で高機能

バンドルサイズが11.9KB（gzip圧縮後）というのは、この手のライブラリとしてはかなり軽い部類です。それでいて機能は充実しているので、コスパ的にはかなり良いと思います。

プラグインが豊富

標準で7つのプラグインが用意されています。

Regions - 区間選択・ループ再生
Timeline - 時間軸の表示
Minimap - 全体像のミニマップ
Envelope - 音量エンベロープ
Record - マイク録音
Spectrogram - スペクトログラム表示
Hover - ホバー時の情報表示

必要な機能だけ追加できるので、バンドルサイズを抑えつつ拡張できるのが良いですね。

TypeScript対応

型定義が最初から含まれているので、TypeScriptプロジェクトでもスムーズに使えます。30代になって思うのは、型があると安心感が違うということ。補完も効くし、バグも減るし。

カスタマイズ性が高い

波形の色、進捗バーの色、高さ、バーの幅など、見た目は細かく調整できます。Shadow DOMを採用しているので、CSSの競合も起きにくい設計になってます。

インストール方法

NPM経由（推奨）

npm install --save wavesurfer.js

CDN経由

サクッと試したいときはCDNが便利です。

<script src="https://unpkg.com/wavesurfer.js@7"></script>

基本的な使い方

最小構成

まずはシンプルに波形を表示してみます。

import WaveSurfer from 'wavesurfer.js'

const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#4F4A85',
  progressColor: '#383351',
  url: '/audio.mp3',
})

// 波形クリックで再生/停止
wavesurfer.on('interaction', () => {
  wavesurfer.playPause()
})

HTMLはこれだけ。

<div id="waveform"></div>

これだけで波形が表示されて、クリックで再生できるようになります。正直、初めて動かしたときは「え、これだけ？」ってなりました。

再生コントロールの追加

実際のアプリでは再生ボタンとか必要ですよね。

import WaveSurfer from 'wavesurfer.js'

const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#4F4A85',
  progressColor: '#383351',
  url: '/audio.mp3',
  height: 80,
  barWidth: 2,
  barGap: 1,
  barRadius: 2,
})

// 再生/停止ボタン
document.querySelector('#playButton').addEventListener('click', () => {
  wavesurfer.playPause()
})

// 再生位置の表示
wavesurfer.on('timeupdate', (currentTime) => {
  document.querySelector('#currentTime').textContent =
    formatTime(currentTime)
})

// 再生終了時
wavesurfer.on('finish', () => {
  console.log('再生終了')
})

function formatTime(seconds) {
  const min = Math.floor(seconds / 60)
  const sec = Math.floor(seconds % 60)
  return `${min}:${sec.toString().padStart(2, '0')}`
}

Regionsプラグインで区間ループ

ポッドキャストの編集とか、特定区間をリピートしたいときに便利です。

import WaveSurfer from 'wavesurfer.js'
import RegionsPlugin from 'wavesurfer.js/dist/plugins/regions.js'

const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#4F4A85',
  progressColor: '#383351',
  url: '/audio.mp3',
})

const regions = wavesurfer.registerPlugin(RegionsPlugin.create())

// 波形読み込み完了後にリージョン追加
wavesurfer.on('ready', () => {
  regions.addRegion({
    start: 10,
    end: 20,
    color: 'rgba(79, 74, 133, 0.3)',
    drag: true,
    resize: true,
  })
})

// リージョン内ループ再生
regions.on('region-clicked', (region, e) => {
  e.stopPropagation()
  region.play()
})