この記事はゆるWeb勉強会@札幌 Advent Calendar 2021の 3日目の記事です。
去年のアドベントカレンダーより…
自分は、去年のゆるWebアドベントカレンダーで書きました…
WebAssembly をウェブブラウザーで活用する(1)
次の回では、C/C++ もしくは Rust でかかれたプログラムを WebAssembly に移植して動作させるデモをやってみたいと思います！（続く
次の回になるまで 1年かかりました…（すいませんw
というわけで、今年の記事はここ数ヶ月取り組んでいました C/C++/Rust のプログラムを WebAssembly で動作させた顛末を例に、Wasm（WebAssembly の略です） の周辺技術事情やキーワードを書いていきたいと思います。
WebAssembly とは
WebAssembly はバイナリーの実行コード形式です。C/C++/Rust/AssemblyScript をはじめとするさまざまな言語を .wasm 拡張子のバイトコードにコンパイルすることができ、それらの言語でかかれたプログラムを、ウェブブラウザーや WebAssembly ランタイム上で動作させることができます。
特にウェブブラウザーは、これまでコンピュータ言語として JavaScript のみをネイティブでサポートしていましたが、WebAssembly の仕組みを使うことで、別の言語でかかれたソフトウェアやライブラリーを活用することができるようになりました。
中でも C/C++/Rust はシステムやミドルウェアよりのライブラリーの実装が多くありますので、画像・動画処理、文字列パーサー、仮想マシン、3D 処理、ファイル圧縮展開、そして今回取り上げる音声処理など従来 JavaScript で再実装が必要になっていた部分を、WebAssembly にビルドするという手順だけで手軽にウェブブラウザーに持ち込めます。
まずは、今年2021年に気になった WebAssembly の実装をいくつか紹介します。
⏩ Adobe Photoshop の WebAssembly による実装:
おそらく画像処理部分の C/C++ コードをクライアント版と共有していると思います。
Adobe PhotoshopにWebブラウザ版が登場。何ができる？
配信中では宇宙飛行士のヘルメットガラスの反射を修正ツールで取り除き、また色味を調整するなどの内容が披露。操作に伴うレスポンス遅延等もみられない、スムーズな編集を実現していることが示された。
ちなみに、Chromium 系のブラウザーの開発者ツールに、直接 C/C++ ソースのデバッグができる仕組み（と拡張）が追加されたのは、Web 版 Photoshop をつくっていたからという話がありました。
⏩ WebAssembly で動作可能な Rust でかかれた形態素解析 Goya:
日本語形態素解析がウェブブラウザー上で動作します。形態素解析系はビルドが大変だったりしますので、.wasm 版があるのは大変ありがたいです。
WebAssemblyの形態素解析器GoyaをRustで作った
Goyaという形態素解析器を Rust で作りました。本記事は利用者目線で Goya の紹介をします。技術的な詳細については別途記事を書きます。
⏩ Python の WebAssembly 版の Pyodide:
CPython が C/C++ で実装されていることを利用して、インタープリタ・ランタイムごと Wasm にビルドし、ウェブブラウザー上で Python を実行し、導入の操作なしに Python を使うことができます。
Try Pyodide (no installation needed)
Try Pyodide in a REPL directly in your browser. For further information, see the documentation.
⏩ PHP の WebAssembly 版:
Pyodide と同様に PHP のインタープリタも C/C++ ですので Wasm にビルドしてしまえば、あろうことか PHP がウェブブラウザーで動作します。 😀
PIB: PHP in Browser (and Node.js) aka php-wasm
https://seanmorris.github.io/php-wasm/
WebAssembly で実装されたシンセサイザー
今回の Wasm 実装例とするプログラムは WebAssembly にビルドされたシンセサイザーです。
次のリンクから動作を確認できます。（後述しますがマルチスレッド(SharedArrayBuffer) を使っている関係で iOS/Safari では現在動作しません）
https://chipstream.netlify.app/
画面をクリックするとサンプルの音楽が再生されたと思いますが、この音声波形生成（シンセサイズ）を C++/Rust でかかれた WebAssembly で行っています。
シンセサイザーとは “音” を電子機器を使って生成するハードウェア・ソフトウェアの総称です。
音を電子機器でつくる方式はいろいろあり、現在は PCM と呼ばれる録音した波形をコンピュータで変化させる方式が主流で、イメージとしてはピアノのラの音（440Hz）をマイクで収録し、それをコンピュータの演算で 880Hz にして高いラにして発音させるようなことをしています。（実際にはもっと複雑です）
ここで作成したシンセサイザーは FM 音源と呼ばれるシンセサイザーの方式で、サイン波（口で発声するのなら、”ポー”みたいな電子音）をサイン波で変調することで倍音を加え、デモのような電子音のような、そうでないような美しい不思議な音を発音させることができます。
1980年代に非常に多く使われたシンセサイザーの方式で、日本で一番なじみがあるのが山手線のホームで流れる発車音のエレピの音だと思います。また 1990年台のゲーム基板や、2000年台初頭のガラケーにも搭載されていましたので、ゲームセンターや着メロで聞き覚えがある方もいらっしゃるかもしれません。
WebAssembly でできること
よくWebAssembly は計算しかできないと言われますが、まずはその通りで今回のシンセサイザーの例でも波形の計算を C++/Rust で行っています。
音声波形計算の単純な例をあげると、1秒を 44100（サンプリング周波数）で割った配列をつくり、16bit（量子化ビット数）の -32768 〜 32767 の値で 440Hz のサイン波をつくれば”ポー（ラー）”波形の計算となります。このシンセサイザーに、ラを0.5秒鳴らせといった演奏データ（シーケンス）を渡すことで音楽となる手はずです。
WebAssembly が計算しかできないと言われるゆえんは、WebAssembly からホストとなる（この場合はウェブブラウザー）の機能には直接アクセスできないことで（ユーザと対話できない）、今回の場合も計算された波形はブラウザーの JavaScript を経由して WebAudio API に渡して発音してもらうようなプログラムとなっています。
ソースコードを以下に公開していますので興味がある方は覗いてみてください。
実際には ymfm という C++ でかかれた YAMAHA FM 音源チップのエミュレーションライブラリーを、演奏データの制御やサウンドチップのサンプリングレートのコンバートを行う Rust のプログラムとリンクする形で動作しています。
https://github.com/h1romas4/libymfm.wasm
This repository is an experimental WebAssembly build of the [ymfm](https://github.com/aaronsgiles/ymfm) Yamaha FM sound cores library.
使わせてもらっている ymfm ライブラリーのソースコードは一切触れることなく、そのまま WebAssembly にビルドしています。Rust と C++ をリンクして動作する Wasm の例としても見ることができるかもしれません。
その他、リアルタイム音声処理に関しては処理の遅れが音切れという形で現実世界に悪影響を及ぼしますので、マルチスレッド（WebWorker）を使っていたり、同期するために SharedArrayBuffer を使っていたり、従来から使われている ScriptAudioProcesser ではなく AudioWorklet を使っているなど、 WebAssembly との組み合わせもあまり見ないサンプルになっていますので、JavaScript 的にも、もしかすると参考になるかもしれません。
なお、スレッド同期に使っている SharedArrayBuffer の iOS/Safari での実装が 2021年 12月現在テクニカルプレビュー中です。次のリリースあたりで使えるようになると思いますが、現在は Safari で動作しません。そのうちに動作し始めると思います。
ウェブブラウザーを超えて
さて、JavaScript がウェブブラウザーから飛び出し Node.js や Deno といった形で取り出されたように、WebAssembly にも同様なランタイムがあります。
いろいろな実装があり群雄割拠している状態ですが、自分が使っているものをいくつか紹介します。
wasmtime
Standalone JIT-style runtime for WebAssembly, using Cranelift
Wasmer
Run any code on any client. With WebAssembly and Wasmer.
Wasm3
The fastest WebAssembly interpreter, and the most universal runtime
wasmtime がリファレンス実装的な印象で、Wasmer は高速で各言語バインディングが充実、Wasm3 は JIT を使わないインタープリタ型で JIT 禁止の iOS 環境でも動作可能、また最小構成で Arduino などのマイコンでも動作といった特徴があります。
WebAssembly ランタイムはもちろん単体で .wasm を動作させることができますが、さまざまな言語をホストとして .wasm を実行をする仕組みが備わっています。
“wasmer-python” を利用して、この記事でウェブブラウザーで呼び出したシンセサイザーの .wasm ファイルとまったく同じものを Python から呼び出してサウンドプログラミングした動作例が次の動画となります。（ソースコード: https://github.com/h1romas4/libymfm.wasm/tree/main/examples/python）
.wasm は OS を選びませんので、ランタイムと組み合わせることでウェブブラウザー(JavaScript)に限らずさまざまな言語から呼び出して活用することが可能です。
Wasmer の言語対応:
特に C/C++ でかかれたライブラリーのスクリプト言語からの呼び出しは、使われる範囲的にインターネット経由の入力が伴うことが多く、セキュリティーの面で気になる部分がでてきますが、Wasm をかぶせることでサンドボックスとなり安全性が高まり、また OS の依存もなくなりますので扱いが簡単です。 .wasm がひとつあればどこでも動作します。
PHP で画像処理したいと思ったら wasmer-php で Wasm ビルドした C/C++ ライブラリーを安全に使う…なんていうのもアイディアかもしれません。
最近ではソフトウェアのプラグインシステムとしても WebAssembly を活用し、そのソフトウェアがつくられた言語以外でプラグインをかけるようにしているしている例もみられるようになりました。
zellij
Zellij includes a layout system, and a plugin system allowing one to create plugins in any language that compiles to WebAssembly.
まとめ
- WebAssembly はいろいろな言語でつくられたソフトウェア・ライブラリーを、ウェブブラウザーやランタイム上で OS を選ぶことなく動作させることができる。
- WebAssembly のランタイムと各言語のバインディングを使うことで、言語を他の言語で拡張して使うこともできる。
WebAssembly の今後は「計算しかできない」を解決していく Interface Type や WASI といった仕様の策定・実装、GC やマルチスレッドの対応の強化が進み、活用範囲や対応言語も増え、目にする機会も増えるかなと思っています。クラウドの Lambda 的な部分での採用も増えていきそうです。
面白いことがあればぜひ教えてください。てなわけで、また来年(!?)…！
ツイッターやってます:
ゆるWeb勉強会
ゆるWeb勉強会とは札幌で開催している @tacck さん主催のWeb系勉強会で、現在はオンライン配信も行っていてどなたでも参加できます。いろんな方の発表を聴き、またわいわい質問もすることができますので、興味がある方は覗いてみてください!
ゆるWeb勉強会@札幌
主に「Web」というキーワードに関する、ゆるい勉強会です。 プログラムを始めたばかりの人も、仕事でバリバリやっている人も、どなたでも歓迎です！
「勉強し初めて、次に何をやればいいんだろう？」 「普段使っていない言語やフレームワーク、知っている人に導入部分を聞いてみたい。」 「いつもはバックエンドだけど、たまに触るフロントエンドの話も知りたい。」 「実際、みんな現場ではどうやって開発してるの？」
仕事・趣味を問わず、普段の仕事の内容も問わず、「Web系」に関することを、ゆるっとみんなで話してみたいです。
関連
