Web Music 開発環境

かわい りょうや

突然ですが、「自宅で手っ取り早くラーメン！」な気分のときどうしますか？

小麦粉買ってきて麺を作って、ガラ、とんこつ買ってきてスープ...

険し過ぎ.....(´・ω・`)これは考えないですよね。。。

思いつくのは、きっとこっち。

袋入り生ラーメン！

インスタントラーメン！

トッピングに、

もやし！ハム！たまご！

完 成 ！

では、「自前で手っ取りWebMusic！」な気分のときどうしますか？

Soundtrap!!!

詳しくは HTML5Expert JP！

「html5experts soundtrap」で　　　　　　　検索　

DTMStationでもどうぞ！

「DTM Station soundtrap」で　　　　　　　検索　

もう少しDeveloper寄りで行きますね。。

Web Musicなアプリを書きたい！

例えばこんなの、

インタラクティブにフィルターをいじれるアプリ

＆操作はMIDIコントローラで！

XHRでゴニョゴニョ、

Web Audioでフィルターを書いて

Web MIDIでMIDI入力で....

(*´Д`)ﾊｧﾊｧ

険し過ぎ.....(´・ω・`)でも、それしか手段が、、、

そこで、作りました！

Web Music PlatformDemo

● Web Audio/MIDI を使ってCustom Element Node同士をGUIを接続することのできるPlatform

● それぞでのNodeはPolymer Element

Web Music Platform

Polymer

movie

● Web Componentsに便利機能を追加○ 詳細は、

「Polymer と Web Components の違い9選」

とかで 検索！！

● Web Components？○ HTMLタグを自由に作成できる○ HTMLタグ内に CSS / JavaScript を埋め込める○ 外部要素を汚さない○ 再利用可能

Polymer

構成に関して

Web ブラウザ

Web ComponentsWeb Audio / MIDI API

Web Music Platform

Polymer

Custom Element Node

Custom Element NodeCustom Element

NodeCustom Element

NodeCustom Element

NodeCustom Element

Node

movie

デザイン

Material Design 使ってます！出来る限り

すぐに使えるの？

ヤマハの公式Githubアカウントで

公開済です！

https://github.com/yamaha-webmusic/webmusicplatform

Polymer● Web Music Platformはお手軽な環境です

○ Web Musicをハックできる○ Web MusicのPlaygroundともなる○ すでに公開されている

● 自宅でラーメンに例えると○ 袋入り生ラーメン、インスタントラーメン○ トッピングは、

■ 公開されてるのをそのまま使うもよし■ 自分でハックするもよし

movie

まとめ

お手軽に Web Music ハックしませんか？

● 主催　Google、Web Music Developers JP● 日程　2014年9月13日(土) 10:00〜● 場所　Google Japan オフィス● 共催　AMEI Web MIDI WG● コラボレーション　http://jsfest.berlin/● 詳細はこちら　http://goo.gl/h1XIQy

Web Music ハッカソン #3

村井 純先生 及川 卓也さん

● Special Guest

● さらにORF（SFC Open Research Forum2014）のW3Cのセッションにて、優秀作品を紹介する予定です！！！