Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 Conference 2015 鹿児島

1,218 views

Published on

[セッション中に使ったアプリ]
https://ryoyakawai.github.io/html5conference2015/

[HTML5Expert.jpでのチュートリアル]
https://html5experts.jp/ryoyakawai/12569/

[ソースコード]
https://github.com/ryoyakawai/html5conference2015/

Published in: Technology
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

HTML5 Conference 2015 鹿児島

  1. 1. Web Audio API、 Web MIDI API を使ったサウンドプログラミング ヤマハ 株式会社 かわい りょうや
  2. 2. 個人活動 ● HTML5Experts.jp #55 ● Web Music Developers JP 管理人 かわい りょうや google.com/+RyoyaKawai ヤマハ株式会社 NVPプロジェクト @ryoyakawai 得意技 ● Web Audio API, Web MIDI API ● Polymer (Web Components) ● 大外刈、クロール みでゃっぴー by @g200kg (Unofficial Web MIDI API Mascot)
  3. 3. Web Audio API
  4. 4. Webブラウザ上で 信号処理を可能にした API
  5. 5. ● API自体 ○ JavaScript で音そのものを作成&加工 ● Web Platformだから受ける特徴 ○ 出どころが確実でOpenな仕様(W3C) ○ Platform依存がない ● API策定の方針 ○ Developer 思考 ○ Native と同等な API を目指す ○ モジュール思考(Web Audioでは ”Node”と呼ぶ) 特徴:Web Audio API
  6. 6. モジュール(Node)思考 ● オシレーター ● オーディオバッファソース ● ゲイン ● フィルター ● ディレイ ● スクリプトプロセッサー ● パン ● コンプレッサー ● コンボルバー ● アナライザー ● ウェーブシェイパー 用意されているNode Node Graph オーディオ バッファソース ディレイゲイン
  7. 7. デ モ Node Graph ディレイゲイン ピッチシフト
  8. 8. ブラウザで音って楽しそうでしょ? ― 何だか分からないけどw
  9. 9. Web Audio APIを利用可能なブラウザ iOS Mini
  10. 10. やってみよう!
  11. 11. ● 音量と音階を変える 信号処理:その1 デ モ
  12. 12. 音色を変更 = 波形を変える
  13. 13. アナログ シンセサイザー
  14. 14. ● 波形を揺らしたり・削ったり・足したり 信号処理:その2 デ モ
  15. 15. 信号処理:その2:コードの解説 <script type="text/javascript"> var ctx=new AudioContext() || webkitAudioContect(); var osc0, osc1, lfo, vcf; osc0=ctx.createOscillator(), osc1=ctx.createOscillator(); lfo=ctx.createOscillator(); vcf=ctx.createBiquadFilter(); osc0.connect(vcf); osc1.connect(vcf); lfo.connect(osc0.frequency); lfo.connect(osc1.frequency); lfo.connect(vcf.detune); vco0.start(0), vco1.start(0); lfo.start(0); </script> ● VCO(Voltage Controlled Oscillator):発振機 ● LFO(Low Frequency Oscillator):低周波発振機 ● VCF(Voltage Controlled Filter):電圧制御フィルタ
  16. 16. FM シンセサイザー
  17. 17. ● 周波数をいじってみる 信号処理:その3 デ モ
  18. 18. 信号を扱う:その3:コードの解説 <script type="text/javascript"> var ctx=new AudioContext() || webkitAudioContect(); var mod, car; mod=ctx.createOscillator(), car=ctx.createOscillator(); mod.connect(car.frequency); mod.start(0), car.start(0); </script> 音色は以下の3つで決定 ● Carrier、Modulator の周波数の比率 ● Modulator のアウトプットレベル ● Moduator のフィードバック
  19. 19. Web MIDI API 5DIN (Deutsches Institut Fur Normung)
  20. 20. ブラウザがMIDIをサポート? @ITさん DTM Station:藤本健さん
  21. 21. 音源モジュール Webブラウザと MIDI機器を直接接続する 為のAPI MIDIコントローラ
  22. 22. ● API自体 ○ JavaScript で MIDI 機器と接続ができる ● Web Platformだから受ける特徴 ○ 出どころが確実でOpenな仕様(W3C) ○ APIについてはPlatform依存がない ● API策定の方針 ○ Developer 思考 ○ Native と同等な API を目指す 特徴:Web MIDI API
  23. 23. Web Audio APIを利用可能なブラウザ iOS Mini working on
  24. 24. 利用可能なブラウザ Google chrome Mac Windows Android Chromebook ● iOSでのWeb MIDI API ○ Web MIDI Browser 上で動作します!! web midi browser ios Opera
  25. 25. MIDIって? ● Musical Instrument Digital Interface ○ 演奏データを機器間でデジタル転送する規格 ■ 物理的な送受信回路 ■ インターフェイス ■ プロトコル ■ ファイルフォーマット、等 MIDI ● Musical Instrument Digital Interface ○ 演奏データを機器間でデジタル転送する規格 ■ 物理的な送受信回路 ■ インターフェイス ■ プロトコル ■ ファイルフォーマット、等
  26. 26. Status Byte (80h-FFh) Data Byte (00h-7Fh) MIDIメッセージ ● 16進数 ● 最低限知ってるとよいメッセージ ○ 音を出力 noteOn 9xh <noteNo> <velocity> ○ 音を停止 noteOff 8xh <noteNo> <velocity> ○ 音色変更 programChange Cxh <no> ○ SysEx System Exclusive 0xF0 … 0x7F midi メッセージ 約 452, 000件 (0.33秒) 残りのメッセージは検索で!
  27. 27. <script type="text/javascript"> var midiins=[], midiouts=[]; navigator.requestMIDIAccess.then({sysex:true})(function(access) { var inputIterator=access.inputs.values(); for(var o=inputIterator.next(); !o.done; o=inputIterator.next()) { midiins.push(o.value); } var outputIterator=access.outputs.values(); for(var o=outputIterator.next(); !o.done; o=outputIterator.next()) { midiouts.push(o.value); } }, function(msg){ console.log(msg);}); </script> <script type="text/javascript"> midiins[0].onmidimessage=function(event) { console.log(event.data); } midiouts[0].send([0x90, 0x55, 0x7f], 0); </script> MIDIデバイスの接続:コードの解説 ● デバイスを列挙する ● メッセージを処理する
  28. 28. “There’s an element for that!” ― 1時間前に小松さん曰く Extensible Web
  29. 29. x-webmidi 3秒でMIDIを使う準備を整えたい!
  30. 30. x-webmidi Web MIDI APIの Polymer Element - bower 対応 - 機器のリスト、接続 - 取得メッセージのParse - 16進数は覚える必要なし x-webmidi $ bower install x-webmidi;
  31. 31. やってみよう!
  32. 32. デ モ アナログ・シンセに接続してみる
  33. 33. FM シンセに接続してみる デ モ
  34. 34. Webブラウザ上に 楽器を作れちゃいました! Photo by Ed Christensen いや、ちょっと待てよ、、、
  35. 35. 昔からできたよね? <audio src=”hoho.ogg”> <embeded src=”gegege.mid”>
  36. 36. Photo by Giulia van Pelt 新しくないなら何か変わるの?
  37. 37. 標準化されたAPIを持つ Platformが増えた! Photo by Giulia van Pelt Web ブラウザ
  38. 38. ● 標準化された環境 ○ 安心して利用できる ○ オープン ● 開発環境 ○ ブラウザ & テキストエディタ ● 言語 ○ Web標準言語(HTML, CSS , JavaScript) ● その他 ○ APIが豊富で進化が速い ○ オープンだから情報が豊富!! WebというPlatformの特徴
  39. 39. ● User視点 ○ アプリのインストール不要 ○ Nativeと変わらない(まだ制限が多いかも・・・) ● Developer視点 ○ 格段に開発のハードルが下がった(自由化!) ○ モノゴトがオープンに進む ● マーケット ○ イノベーションが起きやすい ○ 進化のスピードもアップ 2つの視点とマーケット
  40. 40. イノベーションって言っても楽器界隈だけでしょ? って、疑問がありそうなので.....
  41. 41. ● 音楽以外の用途 ○ MIDI Show Control(MSC) ■ ステージの照明等の操作 ■ 96台の機材を制御可能 (照明、ビデオ、スモーク、爆発等) 音楽分野外でのMIDIの利用
  42. 42. 個人的なMIDIへの期待 Machine2Machine Interactive Digital Interface Musical Instrument Digital Interface
  43. 43. まずは触ってみよう!
  44. 44. ● Web Music Developers JPに相談だ!! ○ Google Groups ○ Google+ Web Music Developers JP Web Audio/MIDIで困ったら...
  45. 45. 日程:7月25日(土) 10:00 - 18:00 場所:京都リサーチパーク GDG京都・GDG神戸・Web Music Developers JP 共同開催 Web Music ハッカソン@京都 京都 Web Music Photo by Moyan Brenn goo.gl/juh2E2
  46. 46. アンケートにご協力お願いします。 http://bit.ly/html5C201507 ご静聴ありがとうございました!

×