making music on the web with midi technology - music china

18
Photo by Takuya Oikawa Web Music Apps & Actvites in Japan Ryoya Kawai (Yamaha)

Upload: kawai-ryoya

Post on 01-Dec-2014

167 views

Category:

Technology


3 download

DESCRIPTION

[Keynote] Making Music on the Web with MIDI Technology@Music China

TRANSCRIPT

Page 1: Making Music on the Web with MIDI Technology - Music China

Photo by Takuya Oikawa

Web MusicApps & Actvites in Japan

Ryoya Kawai (Yamaha)

Page 2: Making Music on the Web with MIDI Technology - Music China

Ryoya KAWAI> From < - Yamaha Corporation

> Community < - Web Music Developers JP (260members)

google.com/+RyoyaKawai

Page 3: Making Music on the Web with MIDI Technology - Music China

Web Audio API&

Web MIDI API

Web Audio API&

Web MIDI API

Page 4: Making Music on the Web with MIDI Technology - Music China

>> Web Audio API <<

Web Browser & Signal Processing

Page 5: Making Music on the Web with MIDI Technology - Music China

>> Web MIDI API <<

Connect between

Web Browser & MIDI Devices

Page 6: Making Music on the Web with MIDI Technology - Music China

Signal Processing Apps, MIDI Apps??

● Possible to develop these apps on....o Mac, Windows, iOS, Android...

>> What do we develop those apps?

SDK :

Collaboraton : Library, Wrapper ...

Page 7: Making Music on the Web with MIDI Technology - Music China

How about on Web Platorm??

SDK :

Collaboraton : no Library, no Wrapper !.

ex) Media Capture, Speech Recogniton, Sensors, Graphics, and more!!

Page 8: Making Music on the Web with MIDI Technology - Music China

Big Idea With

Less Work, Less Code!

Page 9: Making Music on the Web with MIDI Technology - Music China

Source CodeSource Code

Page 10: Making Music on the Web with MIDI Technology - Music China

● Only 5 lines of JavaScript!!

<script type="text/javascript"> var midiins=[], midiouts=[]; navigator.getMIDIAccess(function(access) { midiins=access.inputs(); midiouts=access.outputs(); }, function(msg){ console.log(msg);}); </script>

midiins[0].onmidimessage=function(data){ // write code what you want to do }

midiouts[0].send([0x90, 0x45, 0x7f], 0);

How to connect to MIDI devices

Page 11: Making Music on the Web with MIDI Technology - Music China

Pocket-Miku & Web MIDI App

URL

Page 12: Making Music on the Web with MIDI Technology - Music China

Web MIDI is Ready

Actvites in JapanActvites in Japan

Page 13: Making Music on the Web with MIDI Technology - Music China

Hack-a-thon

Page 14: Making Music on the Web with MIDI Technology - Music China

VJ App with Tenorion

Page 15: Making Music on the Web with MIDI Technology - Music China

Google Spreadsheet Sequencer

Page 16: Making Music on the Web with MIDI Technology - Music China

Face Tracking Efector

Page 17: Making Music on the Web with MIDI Technology - Music China

Why don't we start play with music on

Web Platorm!

Why don't we start play with music on

Web Platorm!

Page 18: Making Music on the Web with MIDI Technology - Music China

Web MIDI is Ready

Thanks!Thanks!