AudioContextで使用するAudioBufferをwavにして保存

やりたいこと

JavaScriptで音を使う場合よく出てくるAudioContextで使用するAudioBufferをwavにしてローカルにファイルとして保存します。

環境

以下の環境を使用しています。

NodeJS　+　Vite

audiobuffer-to-wav

環境構築

NodeJSはインストールされている前提です。

作成するプロジェクト名を聞かれるので入力します。

（この記事ではwavとしました）

使用するフレームワークを聞かれるのでVanillaを選択します。

続いて言語はJavaScriptを選択します。

上記でプロジェクトの作成は完了です。

ライブラリのインストール

プロジェクトの作成が完了したら必要なライブラリのインストールを行います。

cd wav
npm install
npm install audiobuffer-to-wav

以上で準備完了です。

コード修正

インポート

インポートは以下のように記載します。

import audioBufferToWav from "audiobuffer-to-wav"

audioBufferからwavに変換

audioBufferからwavへの変換は次の一行です。

 const wav = audioBufferToWav(audioBuffer)

audioBufferToWavの引数に関して

audioBufferToWavの引数はaudioBufferです。

コード上でみるとAudioBufferSourceNodeのbufferに設定される値です。

const source = audiocontext.createBufferSource();
source.buffer = audioBuffer;

変換したWavの保存

以下のコードでwavをout.wavの名前で保存することができます。

const audioBlob = new Blob([wav]);
const url = URL.createObjectURL(audioBlob);
const a = document.createElement("a")
a.href = url
a.download = "out.wav"
a.click()

TypeError: Failed to construct 'Blob': The object must have a callable @@iterator property.

結果

AudioBufferをwavにしてローカルにファイルとして保存することができました。

参考にさせていただいたサイト

GitHub - Experience-Monks/audiobuffer-to-wav: convert an AudioBuffer to .wav format

convert an AudioBuffer to .wav format. Contribute to Experience-Monks/audiobuffer-to-wav development by creating an account on GitHub.

github.com