ブラウザーだけでレコーディングできる時代がやってくる！：ものになるモノ、ならないモノ（65）（2/2 ページ）

[山崎潤一郎，＠IT]

MIDI接続した鍵盤でブラウザー内のシンセサイザーを演奏できるWeb MIDI API

　一方のWeb MIDI APIは、Web Audio APIの可能性をさらに広げるために策定された規格だ。「ブラウザー内でシンセサイザーが弾ける」とはいっても、文字入力用のキーボードとマウスでは「演奏」は無理だ。やはり楽器として楽しむためには、楽器のインターフェースは必要だ。

　30余年の歴史を誇るMIDI規格だけに、世の中にはMIDIに準拠した入力装置、つまり鍵盤やドラム系のパッドなどが溢れ返っている。それらをブラウザーでも利用できるようにしようというのは当然の流れであろう。Web MIDI APIはそうやって誕生した。

　特に、Web MIDI APIの標準化を推進しているのが、AMEI（一般社団法人音楽電子事業協会）の有志の人たちというのだから、それもうなずける。AMEIは、電子楽器メーカーの業界団体だ。楽器メーカーの人たちからすると、このような新しいテクノロジに対しても、ハードウエアとしてのMIDI製品のポジションを確保しておきたいと考えるのは当然であろう。おかげで、MIDI接続した鍵盤でブラウザー内のシンセサイザーを弾ける、という夢のような体験ができるのだ。

　この動画は、Safariでアクセスした「Web Audio Drum Machine 10」というサイトでリズムを刻みながら、Chromeに立ち上げた前述の「Web Audio MIDI Synthesizer」をUSB接続のMIDI鍵盤で弾いているところだ。今となっては非力な2009年のMacBook Proだけに、さすがに音が途切れ途切れになるが、それでも楽しめてしまうところが恐るべしWeb MIDI API。鍵盤を弾きながらツマミを回すことで波形が連続的に変化しているのが分かるだろうか。マウスなどのPC系の入力装置だけではここまで楽しめない。

　ちなみに、SafariはWeb Audio APIには対応しているのだが、Web MIDI APIには非対応だ。この動画の場合、逆に非対応であることで、このような演奏が成り立っている。もしSafariがWeb MIDI API対応だったら、鍵盤でメロディを弾くと同時にドラムマシンのパッドを叩く信号も流れてしまうので、ハイハットの音だけでリズムを刻むことができなくなってしまうからだ。

驚愕！ Web上でマルチトラックレコーディングが可能に

　今回のコラムの締めくくりに、Web Audio API、Web MIDI APIをフルに活用した強力なサイトをご紹介しておこう。「Soundtrap」は、ブラウザー上でマルチトラックレコーディングができるサイトだ。PCのマイクやオーディオインターフェース経由で楽器やボーカルを録音したり、MIDI機器を接続して演奏データを録音することができる。ギターアンプのシミュレーター、リバーブなどのエフェクト類がそろっており、このサイトにアクセスすれば、PCにレコーディングソフトをインストールすることなく、ちょっとしたマルチトラックレコーディングが楽しめる。

　試しに、筆者が制作中のマルチトラック音源をSoundtrapにアップロードしてプロジェクトを作ってみた。無料のユーザー登録を行った上で「Junichiro Yamasaki」をフォローし「＠ITの記事読んだ」などのメッセージをくれれば、マルチトラック画面にアクセスできる招待状をお送りする（期間限定）。ぜひ、Web Audio API、Web MIDI APIの高度な音処理の世界を堪能してほしい。レベルの上げ下げや任意のトラックを単体で再生するなど、ちょっとしたレコーディングエンジニア気分を味わってもらえると思う。ちなみに、ここで歌っているアーティストは、萬木忍（まきしのぶ）という沖縄県の竹富島という星の砂で有名な島を拠点に活動している人だ。iTunes Storeで何枚かのアルバムを出しているので、機会があればぜひ聴いてほしい。

筆者が制作途中のレコーディング音源をSoundtrapにパート別にアップロードしたので、マルチトラック画面でバランスなどの操作が可能。左上の「EDITOR」をクリックすると各トラックの波形を見ることができる（期間限定リンク）。

「ものになるモノ、ならないモノ」バックナンバー

• 能登半島地震、延べ1万人以上が通信インフラ復旧に従事　NTTドコモとKDDIが語る、復旧秘話
• 音楽生成AI「Suno」「Udio」「Sonauto」を制作者視点でレビュー。音楽制作のカタチは変わるのか
• 「SDV」がもたらすクルマ→モビリティへの変化　「クルマのソフトウェアアップデート」が楽しみになる時代がやってくる
• 「Apple Vision Pro」が採用した空間オーディオがもたらす没入感　Appleが凝らした工夫を考える
• テスラ車オーナーによる、衛星インターネット「Starlink」導入レポート！　気になる使い心地は？
• NFT市場は“うさんくさい”のか“夢がある”のか――NFTマーケットプレース Adam byGMOにクリエイター目線で聞いてみた
• 投資額別に「松・竹・梅」で見る、理想のリモートミーティング環境――数千円＋Zoom設定変更から数万円コースまで
• タイトーに聞く、データ分析基盤の導入効果――スマホ向けゲームで年間480時間の工数削減
• ビッグデータ活用時代に再注目　進化を遂げた「磁気テープストレージ」の実力とは
• 「ローカル5G」は、エリアカバレッジがお寒い状況の「5G」を救い、日本のデジタル化を進めるか
• RSS、ライブドア、Weblio、7notes、FREETEL、神エクセル、みちびき――結局、モノになったのか？　ならなかったのか？
• リモートワークの増加で日本のトラフィックはどう変わったのか？　動画サービスは？
• プライバシーは？　消費電力は？　エストニアで成功した「医療ブロックチェーン」が日本でも実現可能な理由
• 「真のP2Pを実現した完全な水平分散型社会」を目指すNeukindの未来は、Libraか？　Winnyか？
• 米英で疾病の「診断」を下すAIドクターが登場。日本ではどうなるのか
• 「IoTの導入＝コストダウンや効率化」でこぢんまりしてていいの？――IoTネットワーク、LoRaWANビジネスの現状
• 固定回線でも「ギガ不足」におびえる時代が到来か、トラフィック急増により現場で起きている悲劇とは
• 日本版GPS“みちびき”が本格始動したら位置情報取得はどう変わる？――2018年AI IoT系記事閲覧数ランキング
• 機械翻訳は、翻訳家の仕事を奪うのか――「人工知能」を作る上での良質な栄養素とは？
• 成功した人が幸せになるのではなく、幸せな人が成功する――IoTで幸福度は定量化できるのか
• 「日本版GPS“みちびき”本格始動で数センチ級精度の位置情報取得が可能」は本当か
• 「スマートスピーカー」の中にある「人工知能」は何をしているのか、作り方から理解する
• なぜ人工知能研究でNVIDIAのGPUが使われるのか――安くて速いGeForceが尊ばれる理由
• ITエンジニアの副業はあり寄りのなし？　なし寄りのあり？
• ボーカロイド教育版と「プログラミング的思考」は“AIリテラシー”を育むか
• スマホやIoT機器が生成するデータをお金に換える「IoTデータの証券取引所」と日本経済の行く末
• 「神エクセル」が役所ではびこる理由
• 日本の存亡を懸けた政府のIoT戦略。要は「セキュリティ」にあり
• 日本発の定額制音楽ストリーミングサービスは黒船勢をどう迎え撃つか
• ボランティアWi-Fiネットワーク構築集団「CONBU」の正体に迫る
• 今ならランキング上位が狙える？ Apple TVアプリ開発のススメ
• 日本型シェアリングエコノミーのカタチ
• 情報サイトのマネタイズの難しさ。その光と影
• 作り手のモチベーションから見た「Apple Music」のカタチ
• ブラウザーだけでレコーディングできる時代がやってくる！
• 実機を触って分かった、“使われる”Apple Watchアプリのキモ
• “子持ちの働く主婦が2年の間に70のアプリを開発して得た収入でMacBook Proを購入した話”
• ニコ動のコミック版？ 動いてしゃべってアフレコできる「モーションコミック」を追う
• 個人でもOKのLINE@、達人に聞く活用の極意
• 「ゲームギフト」とリワード広告アプリの違いは？
• 「KMDの森」で触る、感じる、描くを体験してきた
• 開発者視点で見る、あのドデカい「iPhone 6／6 Plus」
• Apple Watchが殺すかもしれないもの、それは……？
• アイデアを世に問う試金石？ クラウドファンディングの可能性
• 固定回線とのセット割引、NTTドコモを縛るのは……
• 脱「1億総縛り」を目指すスマホメーカー
• スルー防止も？ BLEがもたらすビジネスチャンス
• MVNOは死滅するのか？ 大臣裁定申請を機に考えるその意義
• Amazonガチャ騒動から考える、サービス名と商標の関係
• タタミ12畳分の領域を「さあどうぞ、ご自由に」
• シンプルなUIにしたたかさも兼ね備えた世界に誇りたくなる日本発の音楽系サービス「nana」
• スマートフォン普及で爆発するトラフィックをさばけ！
• auスマートパスはAndroidアプリビジネスに新風を吹き込むか？
• ものになるモノ、ならないモノ
• エモーショナルな文字入力を可能にした「7notes」の秘密
• 「韓ドロイド」に見る1年後のAndroidアプリビジネス
• 年末でJetty（絶対）にできる Android携帯サーバ活用
• インディ開発者よ、「ドコモマーケット」で稼ごうぜ！
• フェムトセル無料配布で浮上した「ただ乗り」問題
• iPad発売記念!モバイルルータや電子書籍へのインパクトは？
• 5分で絶対に分かるリスティング広告＋運用テクニック
• App Storeの運営方針は第2ステージへ
• 電子出版をめぐる4つの疑問
• Androidアプリはビジネスになるのか
• iPhoneアプリにアプリ内課金を導入してガッチリもうけるのだ
• マッシュアップを超えたマッシュアップを−Mashup Awards 5表彰式レポート
• iPhoneアプリに広告を挿入してガッチリもうけるのだ
• 2012年、2000万ユーザーのアクセスが2カ所の接続ポイントに集中するのか？
• 検索全盛の時代だから、ドメインの有用性を考えよう
• iPhone Skypeとケータイ、通話に向いてるのはどっちだ
• WiMAXの人口カバー率が7割になった2010年を想像してみよう
• ニッポンのiPhoneアプリヒットメーカーたちに続け！
• 霞ヶ関も導入する！？クラウドコンピューティングの本質を理解する
• Androidのオープン性でガラパゴスから脱出しよう
• 2010年、本当にプロバイダビジネスは崩壊するのか？
• Mashup Awards授賞式レポート マッシュアップ＋ひとひねり＝MA4の受賞作
• モバイル「レイヤ2」の付加価値がもたらすメリットとは
• 「着うた」とiTunes Storeの直接対決はあるのか
• iPhone 3Gでソフトバンクモバイルのネットワークが心配だ
• ニッポンのインディよ！iPhoneの「予想外」にカワイイ系で打って出よ
• ECネットワークは、ネット紛争の“遠山の金さん”
• モバイルビジネスのオープン化はこれからが本番
• マッシュアップの落とし穴。誰がために結び付けるのか
• Google Android用携帯アプリ作成のための基礎知識
• ケータイメールポータビリティは開国を迫る黒船となるか？
• 「はてな」を作り出す人的ネットワークの仕組みとは
• そろそろブログ＋RSSアプリでも作ってみませんか？
• プロバイダが考える安全なファイル転送のかたち
• 次々と中小企業がネットビジネスから脱落する理由
• セカンドライフと実社会の経済格差＝100倍の価値は
• FONはアクセスポイント持ち寄り型コミュニティを形成するか
• 電力線というありモノでLAN構築！の現在過去未来
• マイクロフォーマット＝Web2.0の真打ちとなるか？
• 集合知を独自に検索して真実を導く、kizasi
• 国内の総合辞書検索屋への挑戦者、ウェブリオとは？
• Webちらし、国産RSSリーダーのいきさつと人工知能化の野望
• API公開のずいぶん前からすでにWeb2.0でした
• Pマークは暗黒な大人社会の印籠以上になれるか？
• ネットの“あちら側”から迫り来るスパイウェアという見えない亡霊にどう対処する？
• 一家に1つのレイヤ2ネットワークの時代はやってくるか
• 月額1000万円が300万になる新・映像配信って？
• IrDA、Bluetoothを反面教師にしたZigBeeの実力は？
• ライブドアの無線LANに疑問をぶつけてみました
• 1ギガ、本当に「現時点ではそんなもん不要」なのか？
• 社内ブログはナレッジマネジメントツールとして機能するか？

著者紹介

山崎潤一郎

音楽制作業に従事しインディレーベルを主宰する傍ら、IT系のライターもこなす。大手出版社とのコラボ作品で街歩き用iPhoneアプリ「東京今昔散歩」「スカイツリー今昔散歩」のプロデューサー。また、ヴィンテージ鍵盤楽器アプリ「Super Manetron」「Pocket Organ C3B3」の開発者でもある。音楽趣味はプログレ。近著に、「コストをかけずにお客さまがドンドン集まる！LINE@でお店をPRする方法」（KADOKAWA中経出版刊）がある。TwitterID: yamasaki9999