Web Music – HTML5Experts.jp https://html5experts.jp 日本に、もっとエキスパートを。 Sat, 07 Jul 2018 03:14:05 +0000 ja hourly 1 https://wordpress.org/?v=4.7.19 Web Music Developer Meetup@札幌レポート /ryoyakawai/17532/ Fri, 25 Dec 2015 00:00:02 +0000 /?p=17532 本記事は2015年10月25日に札幌で行われたWeb Music Developer Meetup@札幌のレポートです。
sapporo00

Meetupを「札幌」で行うキッカケ

2015年10月末はなぜか札幌でのイベントが多かったと思いますが、これ実はW3C Technical Plenary / Advisory Committee(通称：TPAC、てぃーぱっく)というMeetingが札幌で行われたからなのです。

詳細はWeb技術の最新動向と未来を知る！〜Leading the way to W3C TPAC 2015〜【TPAC紹介編】にも書かれていますが、ここでも軽くご説明します。TPACとはWebの標準化団体であるW3Cが年に1回行う全体会合で、通常10月最終週の5日間で北米、ヨーロッパ、アジアのどこかで開催されます。

全体会合とはいえ、5日間通して全体会議をしている訳ではなくて、実際に全体で集まるのはたいて中間日のTechnical Plenary Dayと呼ばれる日。この日だけはアンカンファレンス形式で進められ、当日の朝に話したい内容がある人が場所を確保して分科会(Breakout Session)を行う、という流れになっています。

breakout00
分科会の場所を確保する様子

この日以外は、W3Cにある43のワーキング・グループ（2015年11月6日現在）からそれぞれが議論したい内容、メンバーのスケジュールから日程設定してFace to Faceでのミーティングを行っています。たいていの場合メンバーは世界各国に散らばっているため、普段は電話での会議をしているので顔を合わせてミーティングを行うのは、非常に貴重な時間となっています。

前段が長くなりましたが、ここから本題です。Web Audio API、Web MIDI API（Web Music）の仕様を策定しているのはW3Cのオーディオ・ワーキンググループ(Audio WG)。今回のTPACでは26日、27日にミーティングを行うことになりましたので、せっかくのこの機会に「Audio WGのメンバーとイベントやろう！」と思い立ったのが、今回のMeetupのキッカケです。

「札幌」でWeb Musicは初めて

今まで日本で開催されたWeb Music関連イベントは、東京と京都でのハッカソンとMeetup1回だったので、北海道では初めて。そこで、Meetupにして「Web Musicとはなんぞ？」を中心に伝えられるように、以下の方々に登壇していただきました。

セッションの内容

かわい りょうや

Web Audio、Web MIDIとは何か、何ができるのか、どのブラウザで使えるのかを中心に話をしましたブラウザで電子楽器を作ってみよう！でご紹介したWeb Audioで作ったアナログ・シンセ、FMシンセの紹介とデモを行い、基本的な使い方とできることの説明、またそれに加えて今回はServiceworkerを使ったオフラインでの動作のデモ、またデスクトップからアプリを起動できるWebApp Manifestのデモも実施。モバイル上でもWebアプリは進化していてNativeアプリに近づいていることの説明を行いました。
▶ スライド

Chris Wilson 氏

cwilso Making the Web RockというタイトルでDrum Machine、ボコーダー、Audio Input Effect、DJと次々にデモを披露していただき、「Web Audio API、Web MIDI APIを使うとWebブラウザ上でここまでできます」という点を幅広く説明してくれました。また「このWebアプリのチューナができたおかげでOSネイティブなチューナーアプリ（iOSやAndroidのアプリ）は全部消した」という実話も披露していただきました。チューナーとは音の周波数（音程）を正しく調整する為に使う器具のことです。
▶ スライド

ここでChris氏の発表の中から「Webアプリのチューナ以外のOSネイティブなチューナーアプリを削除できた」という点について、旬な話題ですので少しだけご紹介します。

どのようにWebアプリのチューナーが実装されているか
チューナーは例えばギターの弦1本1本を正しく調整（チューニング）する為に、1本の弦を弾いた時に発せられる音声を入力して周波数を正しく表示します。この表示に従って、弦毎にあるべき周波数にチューニングをすることで常に正しい音で演奏しています。このチューニングは演奏する間に必ず行うので、自宅のみならず、あらゆる場所で動作することが求められます。ここでまとめるとチューナーという器具には最低限以下の2つの要件を満足することが求められます。

  • 入力した音声の周波数を正しく表示する
  • 携帯性に優れている

モバイル・デバイスのアプリ（iOSアプリケ、androidアプリ；以後「モバイルアプリ」と略します）で製作したチューナーはこれらの2つの要件を満足します。チューニングに関してはマイクから入力した音の周波数を正しく表示するよく知られたアルゴリズムがありますし、携帯性に関してもチューナーアプリを一度ダウンロードしてインストールしてしまえばネットワークへの接続に左右されることなく携帯端末上で動作することが可能ですので、 場所を選ばずどこでも動作します。
前置きが長くなりましたが、ここからがこの2つの要件をどうやってWebアプリとして再現するのか？という点です。1つ目の「入力した音声の周波数を正しく表示する」に関しては、getUserMedia()を使いマイク入力をWeb Audio APIを使って周波数を割り出せばなんとか出来そうだと、とお気づきになると思います。しかしながら「携帯性に優れている」の点はいかがでしょうか？ネットワーク接続なしにどうやってWebアプリを動作させるのでしょうか？
その解決には Service Worker を使います。Webアプリを最初に起動した時に、アプリ全体をキャッシュしてしネットワーク接続のに場合はそのキャッシュを利用してアプリを動かすのです。WebアプリのチューナのService Workerの実装はココにされています。詳しい解説はここでは割愛しますが、Servive Workerインストール時（最初にサイトを表示した時と考えていただいて問題ありません）に、以下の部分でWebアプリのチューナーに必要なファイルをキャッシュしていることが分かります。

self.oninstall = function(event) {

  var urls = [

    '/',
    '/images/chrome-touch-icon-192x192.png',

    '/scripts/guitartuner-core.js',

    '/elements/audio-processor/audio-processor.html',
    '/elements/audio-visualizer/audio-visualizer.html',
    '/elements/tuning-instructions/tuning-instructions.html',
    '/elements/tuning-instructions/tick.svg',
    '/elements/tuning-instructions/up-down.svg',

    '/third_party/polymer.html',
    '/third_party/webcomponents-lite.min.js',

    '/third_party/Roboto/Roboto-100.woff2',
    '/third_party/Roboto/Roboto-300.woff2',
    '/third_party/Roboto/Roboto-400.woff2',

    '/favicon.ico',
    '/manifest.json'

  ];

  urls = urls.map(function(url) {
    return new Request(url, {credentials: 'include'});
  });

  event.waitUntil(
    caches
      .open(CACHE_NAME + '-v' + CACHE_VERSION)
      .then(function(cache) {
        return cache.addAll(urls);
      })
  );

};

もう1点は起動に関してです。Webアプリとして再現できたのに、起動がブラウザのブックマークからだったり、URLバーが表示されていては少しガッカリです。androidであれば、Webアプリであっても、ホーム画面のアイコンから起動し、URLバーを表示しないことが可能です。また起動時のデバイスの向き、スプラッシュ画面（起動処理中に表示する画像）を設定することも可能です。これを Web App Manifest と呼ばれる機能になります。Webアプリのチューナではココに実装されています。

{
  "short_name": "Guitar Tuner",
  "name": "Guitar Tuner",
  "start_url": "./?utm_source=web_app_manifest",
  "icons": [
    {
      "src": "/images/chrome-touch-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "display": "standalone",
  "orientation": "portrait"
}

この数行のJSONを設置して、メインとなるHTMLには以下の1行を追加して読み込ませたらモバイルアプリと同じユーザー体験（ホーム画面からの起動）を提供することが可能になります。 

<link rel="manifest" href="/manifest.json">

詳細な説明は割愛してしまいましたが、こういった技術を使ってProgressive Web Appsを作ってみてはいかがでしょうか？

藍 圭介 氏

aike Web Audio API Creative Codingというタイトルで、moogのアナログシンセのWeb版の2D版、3D版、それ以外にもセンサーを使うことでWahペダルだったり、ライトセーバーのような動きに反応するアプリケーションも作ることが可能というデモを実施。Web Audio/MIDI以外のAPIとの親和性も高く、手軽に使えることから「Web Audio/MIDIは音楽のためのみならず、表現メディアのプラットフォームになり得る」という点をご説明してくださいました。
▶ スライド

豊島 隆志 氏

toyoshim Chrome Web MIDI 2015というタイトルで発表。実際にChromeに実装をしているので、今までのWeb MIDIの実装の歴史、AndroidのWeb ViewでもOperaでもElectronでもChromeと同じようにWeb MIDIが使えるようになっていること、Firefoxでの実装状況、Web MIDI APIの使われる頻度等、APIを実装するという視点から発表をしてくれました。
▶ スライド

Joe Berkovitz 氏

joe Music Notation and W3C: Framing the Futureというタイトルでの発表。Audio WGの共同議長でもあり、また2015年7月にW3CでMusic Notation Community Group(楽譜に関するグループ)の立ち上げも行っており、普段はnoteflight Inc.にてブラウザ上で楽譜を表示、演奏するアプリケーションを開発しています。今回の発表では、Noteflightが実際に楽譜表示を軸にどういった機能を実装しているのか、またWeb上で表示できるようになるとどう変わるのかをデモを交えながらの発表でした。
▶ スライド(PDF)

渡邊 正和 氏

watanabe ライブパフォーマンス、その他（例えば教育）でのWeb Audio/MIDIの活用事例を紹介。Audio/MIDIがWeb上で使えることで拡がった、音楽の世界を語ってくれました。リサジューのデモも披露。

Lightning Talk

3名、1団体からの発表がありました。

Meetupを終えて

今回Audio WGでコアに動いている方のほとんどがMeetupに足を運んでくれたこともあって、日本の皆さんにはもとより、Audio WGの皆様には「こういう使われ方もしている」という現状を見ていただけて、とてもよい機会になったと思っています。今後もこういう機会があったら企画したいと考えています。
▶ 写真等

おまけ：Web Audio、Web MIDIの進捗に関して

W3Cが定める仕様策定までの5段階のうち、Web Audio/MIDI共に、現在は1つ目の段階（WD:Working Draft）です。しかし、Web Audioは次の段階（LC:Last Call）へと進む気配があります。早くて年内、遅くとも来年4月（Web Audio Conference 2016があります）ではないでしょうか。またWeb MIDIに関してもFirefoxに実装が進んでいてMac OSでは動いているとのことですので、こちらも次の段階へ進むことへの期待ができるでしょう。

audiowg
Audio WGのミーティングの様子

それでは、今後もWeb Musicをよろしくお願いします！

]]>