ffmpeg.wasmを使って、音声ファイルの変換をWebUI上で実施する
ffmpeg.wasmについて
以前whisper.cppに関するポストをしたが、whisper.cppへの入力として必要になる16kHzのwavファイル生成を簡単にできないかと考えていた。
16kHzへの変換については上のポストでも書いたように ffmege
を用いるが、最近wasm周りに興味があるので ffmpeg.wasm
的なものもあるのでは?と思い調べてみたところ、まさにそれがあった。
WebのフロントエンドやNode.jsなどのwasmが利用できるところであれば、これを用いることでffmpegを利用することができるようになるらしい。
16kHzのwavファイルへ変換する処理を書いてみた
まさにこれだと思い、早速 ffmpeg.wasm
を用いて16kHzへの変換機を作成してみたのがこちら。
git clone
してきて、
yarn install yarn dev
した後、localhost:3000
にアクセスすればWebUIが表示される。
そして変換したい音声ファイルを選択すれば勝手に変換処理が走り、変換後のファイルがダウンロードされる。
とりあえず実現できるかどうかをまずは見たかったので最低限の処理しか実装していないし、デザインもない。
実装する際には公式exampleの以下を実装した。Webフロントエンドで変換するような処理を実装したい場合は、まずはこちらあたりを参考にすると良さそうかも。
https://github.com/ffmpegwasm/ffmpeg.wasm/blob/master/examples/browser/transcode.html
ffmpeg.wasmでハマるかもしれないポイント
いくつかハマるかもしれないポイントがあるので、こちらにも書いておく。
といっても、そこについてはREADMEにも記載があるので、READMEを読んでおけば大丈夫というレベルではある。
SharedArrayBufferを用いるためHTTPヘッダーの設定が必要
ffmpeg.wasm
内の処理で SharedArrayBuffer
を用いているため、そのままでは SharedArrayBuffer is not defined
的なエラーが出て、処理に失敗する。
そこについては公式のREADMEや上のMDNにも書かれているように、HTTPヘッダーを設定する必要がある。
サクッとHTTPヘッダーに以下の設定を行うために、私は superstatic
を利用してみた。
Cross-Origin-Opener-Policy: same-origin Cross-Origin-Embedder-Policy: require-corp
こちらは初めて利用してみたが、いわゆるローカルサーバを立ち上げるやつで、設定をいじればサクッとHTTPヘッダーを設定できたので、かなり便利だった。
私は superstatic.json
というJSONファイルを作成し、以下の設定を加えた。
{ "headers": [ { "source": "**/*", "headers": [ { "key": "Cross-Origin-Opener-Policy", "value": "same-origin" }, { "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" } ] }, { "source": "/", "headers": [ { "key": "Cross-Origin-Opener-Policy", "value": "same-origin" }, { "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" } ] } ] }
Webに公開する際のパスについて
私が公開したものはローカルで利用する前提なので特に気にしていないが、Webに公開する際はffmpegを読み込みする際のパスを考慮する必要がある。
実際にここらへんは触れていないので詳細は公式ドキュメントを載せるだけにするが、Webフロントエンド触っている人であれば、ああ読み込むパスのことね...という感じで理解していただけるかと思う。
https://github.com/ffmpegwasm/ffmpeg.wasm/blob/master/docs/api.md#ffmpegload-promise
2GBまでの制限あり
これは WebAssembly
の制約だが、現在は2GBまでのファイルしか扱えない。今後4GBになるかも?と記載がある。
他にもいくつか注意事項があるが、READMEに記載があるので、後はそちらを読んで頂くのが良い。
Licenseのことや自分で ffmpeg.wasm
をビルドする手順なども載っているので、より詳しく知りたい人はそこらへんも見てみると良いのかも。
結論:ffmpeg.wasm、便利
ffmpeg.wasm、便利
— Yuki Shindo (@shinshin86) January 3, 2023
MP3ファイルを16kHzのwavファイルに変換するための処理を試しにこれで書いてみたけど、特につまるところなく実現できた。Webのフロントエンド側だけでこれを実現できるのは良いな〜https://t.co/xLzoKVSbVC