「周回遅れでもWebGLを事始める！」で「WebGLの機はとっくに熟している」と書きました。
もう一つ、2018年事始めたいマイテーマに「Web Audio API」というものがあります。こちらも徐々に機が熟しています。
いっちょやってみっかー、と自分を奮い立たせるためにWeb Audio APIの概要と状況をまとめました。
目次：
JSの基本についてはこちら
※参考：【JSの基本-前編】書ける前に読む！HTML、CSS、JSの書式-4 - クモのようにコツコツと
【JSの基本-後編】書ける前に読む！HTML、CSS、JSの書式-5 - クモのようにコツコツと
Web Audio APIとは
Web Audio APIは、Audioを扱うためのJSのWeb API（Application Programming Interface）です。APIについてはこちらもご覧ください。
※参考：周回遅れでもWebGLを事始める！canvas大地に立つ!!
Web Audio APIはDOMと同じくW3Cが策定しています。下記の図のような位置付けになります。
Audioファイル再生についてはHTMLにaudio要素がありますね。こんな感じです。*1
<audio src="audio/audio.mp3"> <p>このブラウザはaudio要素に対応しておりません。</p> </audio>
Web Audio APIはaudioファイルをもっと細かく制御することができます。
そしてさらに！ブラウザに実装されているシンセサイザーのような電子音を鳴らすこともできます！！
かつて、IE（Intenet Explorer）にMIDI音源というものが内臓されておりまして…ピロピロと曲が流れるサイトがありました、ええ（遠い目）。
Web Audio APIはもっと本格的なDAWが作れるシンセ音源なのです！！昔はこういう音楽を作るには専用のDAWソフトが必要でしたよ。 しかも書き出されるのはオーディオファイルだからある程度容量があるしね。
Web Audio APIでできること
ではWeb Audio APIはどんなことができるのか？いくつかの事例を見ていき、テンションを上げていきましょう！
バーチャルシンセサイザー
ブラウザ上に再現されたアナログシンセサイザーです！
上のツマミをいじりって鍵盤を叩くと音色が変わります。
※参考：Webブラウザで動くシンセサイザーアプリ「WebSynth」 - ねとらぼ
※参考：WebAudioSynth
オリジナルの電子楽器1
こちらはオリジナルの電子楽器です。画面上でカーソルや指を動かすと、ポルタメント（滑らか）に音階が変わり、とても楽しい！幽霊が出そうな音を簡単に作れる。テルミンみたい。 指に合わせて残像が現れる輪っかもいいですね。
※参考：Web Audio API の Oscillator で楽器を作りたい話 - Mach3.laBlog
※参考：デモ
オリジナルの電子楽器2
こちらはスマホのジャイロ（傾き）で音階が変わります。ポルタメントはシンセらしさの特徴でもある。画面の色も同時に変わるのがキレイです。
ドラムマシン
ポチポチと音を指定するだけでリズムを作ることができて楽しい！
※参考：ブラウザからビートが生まれる。MIDI対応でパッドでもプレイできるRolandのTRライクなドラムマシン - soundrope
※参考：デモ
マトリックスシーケンサー
ドラムマシンのようにポチポチと音階を指定すると簡単にメロディを作ることができるシーケンサー。これも楽しい！
※参考：Web Audio でマトリックスシーケンサーを作ってみた - Mach3.laBlog
※参考：デモ
ピアノロールシーケンサー
本格的なDTM、DAWソフトのようなピアノロールでの打ち込みができる！！
※参考：WebSequencer | g200kg Music & Software
WebGL（ブラウザ3D）との融合
「周回遅れでもWebGLを事始める！」でも紹介したWebGLとWeb Audio APIが融合すると、このようなインタラクティブコンテンツが出来上がる！これは衝撃を受けた。私が最終的に目指す世界はここです！！
※参考：Three.jsとTone.jsによる肉の3Dビートマシーン | Music Theory Workshop Japan
※参考：デモ
Web Audio APIの実装状況
さて、Web Audio APIのブラウザの実装状況はどんなもんなんざんしょ。
ブラウザ対応状況
caniuseではこんな感じ。
※参考：Can I use... Support tables for HTML5, CSS3, etc
PCブラウザはEdge、Chrome、FireFox、Safariが対応！（IE11は未対応…くっ）
スマホブラウザはChrome、Safariが対応！（Androidブラウザは未対応）
ん？最後のSamsung Internetとは？前からあったっけ？
お、サムスンは独自にブラウザ開発しているのか。初めて知った。まあ、これも対応ということで。
※参考：サムスン、独自ブラウザ「Samsung Internet」の新ベータ--WebVR対応など - CNET Japan
ブラウザシェア
私はデフォルトブラウザの対応を重視してまして、なぜならライトユーザーにはブラウザのインストールはハードルになるためです。
なのでWindowsのデフォルトブラウザであるEdgeの対応はとても大きい。
ちなみにWindowsのデフォルトブラウザはもう１つあって、言わずと知れたIEです。
ブラウザシェアは…IEが17%に対してedgeは3%です。うーむ、まだまだだな…
※参考：Browser Market Share Japan | StatCounter Global Stats
IEをバージョン別表示にしてみる。
※参考：Browser Version (Partially Combined) Market Share Japan | StatCounter Global Stats
最新版のIE11は16%でIE全体の17%と1%しか変わらない。IE=IE11と思って良さそう。他のバージョンはサポートが終わっているしね。
思えばWeb Audio APIは当初Chromeしか対応しておらず、FireFoxはWeb MIDI APIという別の規格を開発していました。それがFireFoxが対応して、Safari、Edgeと広がってきた。
Webのだいたいの新技術はChrome、FireFoxが先行するが、この２つはPCのデフォルトブラウザではない。そのため少し敷居が高い。
PCのみのブラウザシェア
上記は全プラットフォームでの比率でした。では、PCのみで見るとどうでしょう。
※参考：Desktop Browser Market Share Japan | StatCounter Global Stats
それぞれさっきよりは増えた。IEが25%に対しEdgeは5%。PCユーザーの4人に一人はまだIE使っているのに対しEdgeは20人に一人かー。
IEは早く10%切ってもらいたいし、Edgeは逆に10%超えてもらわないとIEの後継ブラウザとは言えないでしょう。*2
こちらはIEのバージョン違いも表示。IE11は23%で、IE全体の25%と2%しか変わらない。やはりIE=IE11だ。
※参考：Desktop Browser Version (Partially Combined) Market Share Japan | StatCounter Global Stats
ちなみにIE11がWeb Audio APIに対応することはほぼ絶望的でしょう。IE11は旧IEとの後方互換のみを目的とした終活的ブラウザなので。
一方Edgeのナンバリングは15と進み続けていて、他のモダンブラウザと歩調を合わせています。 IEとEdgeのコンセプトについてはこちらがわかりやすいです。
※参考：Microsoft Edgeで サポートされる 新しい API について
スマホのみのブラウザシェア
スマホのデフォルトブラウザ、iOSはSafariです。Androidはデフォルトブラウザが２つあって、ChromeとAndroidブラウザです。
AndroidブラウザはWeb Audio API非対応だけど2%なので流石にもう無視していいでしょう。
※参考：Mobile Browser Market Share Japan | StatCounter Global Stats
タブレットのみのブラウザシェア
ついでにタブレットも見てみる。Safari圧勝。タブレットでもそうか。
こちらはAndroidブラウザがまだ11%でChrome14%とそこまで差がない。Chromeは微増しているのでAndroidブラウザは早く10%切ってほしい。
※参考：Tablet Browser Market Share Japan | StatCounter Global Stats
まあ全プラットフォームではAndroidブラウザは圏外なので、全体数から見たら少ないと思われる。
OSシェア
Windowsの最新版であるWindows10はIEとEdgeがデフォルトブラウザです。そのためWeb Audio APIコンテンツはEdgeで聴く、という選択肢があります。
しかしながら、それより昔のWindowsOSはIEだけがデフォルトブラウザです。では、WindowsOSのシェアはどんなもんでしょう。
まず全プラットフォームで見てみる。Windowsは54%。安定的だなー。
※参考：Operating System Market Share Japan | StatCounter Global Stats
PCのみでみると79%。さらに盤石の地位だな。ちなみにMacは16%。
※参考：Desktop Operating System Market Share Japan | StatCounter Global Stats
Windowsの中でのバージョンのシェア。10が48%に対し7は38%で10%の差になっている！でもまだ無視はできないな…。
参考：Desktop Windows Version Market Share Japan | StatCounter Global Stats
Windows7、IE11のサポート期間
Windows7のサポートは東京オリンピックの2020年。あと2年たてばWindows7ユーザー数は劇的に変わるかもしれない。期待大。
※参考：ご存じですか? OS にはサポート期限があります! - Microsoft atLife
すべてのユーザーがデフォルトブラウザでWeb Audio APIコンテンツを体験するにはあと2年ほどかかりそうです。
そういえばロングセラーだったWindows XPも（延長に延長を重ねた）サポートが切れたあとは、割と早く市場から去っていっていきました。
XPはレガシーブラウザIE8までしか対応しておらず、IE8もXPのコバンザメのごとくしぶとく生き残ってましたが、今は消え去りました。
ちなみにWindows10はIE11をなんと2025年までサポートするようです。そんなに頑張んなくていいんだよー、進化を止めたブラウザなのだから…。
※参考：一目で分かる、Internet Explorer（IE）のサポート終了時期：Tech TIPS - ＠IT
非Windows10のユーザー比率
現状でもWindowユーザーのうち半数近く、48%のWindwos10ユーザーにはWeb Audio APIコンテンツをデフォルトブラウザEdgeで体験してもらうことができます。
しかしながら、約1/3の38%のWindows7ユーザーを始めとした残り52%の非Windows10ユーザーは、Chrome、FireFoxなどのブラウザをインストールしないとWeb Audio APIコンテンツを体験できません。
なお、他のOSとの比率で考えるとこうなります。
- 全プラットフォーム：Windowsユーザー=54%。そのうち非Windows10ユーザーは54*0.52=28%
- PCのみ：Windowsユーザー=79%そのうち非Windows10ユーザーは79*0.52=41%
この比率がこれから今後2年の間にどう変わっていくか見守っていきましょう。
まとめ
ということで、Web Audio APIはデフォルトブラウザとしては今のところ全プラットフォームの28%、PCのみでは41%、つまり3人ないし4人に一人の非Windows10ユーザーが体験できません。
しかしながら、Windows10のユーザーがWindows7ユーザーを超えたこと、そしてあと2年でWindows7のサポートが終わることを考えると「機はもうすぐ熟しそう」と言えるのではないでしょうかね？
私としてはDAWソフト無しにシンセのような電子音楽が作れて、さらにインタラクティブな楽器や3Dとの連携など、ワクワクの方が大きいです。
時は来た！それだけだ！
※参考：ネイティブJSやってみたシリーズ
qiita.com
※参考：Tone.jsを習得するためにやった事まとめ qiita.com
