WebAudioAPIとcanvasで音声波形動画を出力するサイトを作ってみた

WebAudioAPI canvas JavaScript

はじめに

YouTubeなどで見かけるよくあるミュージックビデオに音声波形が動いて表示されたりするのがあります。
そういう動画は調べてみると、大抵はWindowsのAviUtlという無料の動画編集ソフトの拡張機能で作られてるようです。
最近では、daniwell氏によりMusic Visualization GeneratorがWindows/Macのフリーソフトがリリースされ、簡単に音声波形動画が作れるようになりました。
そういった中で、Web上でも作って共有できたら便利だなと思い、調べてみたところ、どうやらHTML5のWebAPIとJavascriptでできるようなのでやってみました。

作ったもの

Music Waves Visualizer

コード

komura-c/music-waves-visualizer

実装した機能

WebAPIとCanvas、Next.jsを駆使して以下を実装しました。
・画像と音声の読み込み、表示
・音声波形表示
・動画として出力

画像と音声の読み込み

FileReader.onload - Web API | MDN
を参考にして、画像を読み込むと同時にcanvasに描画しています。
音声も同様ですが、読み込み時にbase64としてデコードすることでWebAudioAPIに渡した上で、FileReaderに読み込ませています。

// audioLoad
const LoadSample = (audioCtx, audioDataUrl) => {
  fetch(audioDataUrl)
    .then((response) => {
      return response.arrayBuffer();
    })
    .then((arrayBuffer) => {
      audioCtx.decodeAudioData(arrayBuffer).then((decodedData) => {
        buffer = decodedData;
      });
    })
};

音声波形表示

canvas に絵を描く - Web API | MDNを参考にしました。
モード別に描画方法を変えることで周波数バー・折れ線・円形を実現しています。

動画として出力

以下の記事を参考に実装しました。
MediaRecorder APIをつかってCanvas/WebAudioなゲーム画面を録画する
 JavaScriptでcanvasを録画して動画ファイルに保存する方法

また、上記の対応だとwebpでしか動画の出力ができませんでした。
そのため、ffmpeg.wasmを使いmp4で書き出せるように対応しました。
https://github.com/ffmpegwasm/ffmpeg.wasm

import { createFFmpeg } from "@ffmpeg/ffmpeg";

export async function generateMp4Video(
  binaryData: Uint8Array,
  webmName: string,
  mp4Name: string
) {
  const ffmpeg = createFFmpeg({ log: true });
  await ffmpeg.load();
  ffmpeg.FS("writeFile", webmName, binaryData);
  await ffmpeg.run("-i", webmName, "-vcodec", "copy", mp4Name);
  return ffmpeg.FS("readFile", mp4Name);
}