ffmpeg.wasmを使って、音声ファイルの変換をWebUI上で実施する

ffmpeg.wasmについて

以前whisper.cppに関するポストをしたが、whisper.cppへの入力として必要になる16kHzのwavファイル生成を簡単にできないかと考えていた。

shinshin86.hateblo.jp

16kHzへの変換については上のポストでも書いたように ffmege を用いるが、最近wasm周りに興味があるので ffmpeg.wasm 的なものもあるのでは？と思い調べてみたところ、まさにそれがあった。

github.com

WebのフロントエンドやNode.jsなどのwasmが利用できるところであれば、これを用いることでffmpegを利用することができるようになるらしい。

16kHzのwavファイルへ変換する処理を書いてみた

まさにこれだと思い、早速 ffmpeg.wasm を用いて16kHzへの変換機を作成してみたのがこちら。

github.com

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 的なエラーが出て、処理に失敗する。

developer.mozilla.org

そこについては公式のREADMEや上のMDNにも書かれているように、HTTPヘッダーを設定する必要がある。

サクッとHTTPヘッダーに以下の設定を行うために、私は superstatic を利用してみた。

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

github.com

こちらは初めて利用してみたが、いわゆるローカルサーバを立ち上げるやつで、設定をいじればサクッと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、便利
MP3ファイルを16kHzのwavファイルに変換するための処理を試しにこれで書いてみたけど、特につまるところなく実現できた。Webのフロントエンド側だけでこれを実現できるのは良いな〜https://t.co/xLzoKVSbVC

— Yuki Shindo (@shinshin86) January 3, 2023