Enviar búsqueda
Cargar
Web Audio API, Web MIDI API - 2015 html5 conference
•
23 recomendaciones
•
28,380 vistas
Ryoya Kawai
Seguir
スライドの中で使っているアプリケーションのコードです。 https://github.com/ryoyakawai/html5conference2015
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 40
Descargar ahora
Descargar para leer sin conexión
Recomendados
HTML5 Conference 2015 鹿児島
HTML5 Conference 2015 鹿児島
Ryoya Kawai
WEB MIDI APIをうまく使うための話
WEB MIDI APIをうまく使うための話
Shin Fujisawa
Web MIDI API 2nd WD
Web MIDI API 2nd WD
Ryoya Kawai
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
Ryoya Kawai
Web Audio APIの初歩
Web Audio APIの初歩
Shota Kubota
Web Audio API 入門
Web Audio API 入門
Sota Sugiura
Web Audio APIを使って可聴域を調べるアプリをつくってみた
Web Audio APIを使って可聴域を調べるアプリをつくってみた
Shota Kubota
Web audio control-webaudio.tokyo
Web audio control-webaudio.tokyo
Ryoya Kawai
Recomendados
HTML5 Conference 2015 鹿児島
HTML5 Conference 2015 鹿児島
Ryoya Kawai
WEB MIDI APIをうまく使うための話
WEB MIDI APIをうまく使うための話
Shin Fujisawa
Web MIDI API 2nd WD
Web MIDI API 2nd WD
Ryoya Kawai
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
Ryoya Kawai
Web Audio APIの初歩
Web Audio APIの初歩
Shota Kubota
Web Audio API 入門
Web Audio API 入門
Sota Sugiura
Web Audio APIを使って可聴域を調べるアプリをつくってみた
Web Audio APIを使って可聴域を調べるアプリをつくってみた
Shota Kubota
Web audio control-webaudio.tokyo
Web audio control-webaudio.tokyo
Ryoya Kawai
AngularとWeb Audio APIはじめてみました
AngularとWeb Audio APIはじめてみました
pastelInc
20141115 fx os-codereading
20141115 fx os-codereading
Noritada Shimizu
自作ウェブ楽器の紹介
自作ウェブ楽器の紹介
aike
Web Audio API と IBM Watson Speech to Text の話
Web Audio API と IBM Watson Speech to Text の話
K Kimura
Web Audio APIで作る各種ウェブ楽器
Web Audio APIで作る各種ウェブ楽器
aike
オープンデータ Web API
オープンデータ Web API
Hironori Sakamoto
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
Atsushi Tadokoro
Speech API の概要(Microsoft Cognitive Services)
Speech API の概要(Microsoft Cognitive Services)
Atsushi Yokohama (BEACHSIDE)
日本Androidの会発表スライド androidのメディア機能の話
日本Androidの会発表スライド androidのメディア機能の話
Tatsuya Matsumoto
20220518_ongaqjs.pdf
20220518_ongaqjs.pdf
Hiroyuki Takakura
OSC 2010 Tokyo/Fall MSセッション
OSC 2010 Tokyo/Fall MSセッション
Masaki Takeda
Dropbox APIなどを使って制作を効率化しよう@関西オープンフォーラム
Dropbox APIなどを使って制作を効率化しよう@関西オープンフォーラム
Masayuki Abe
WebIntentsにより拓かれる次のWeb
WebIntentsにより拓かれる次のWeb
Kensaku Komatsu
20220519_TechStreet_vol6_kitazaki_v1.pdf
20220519_TechStreet_vol6_kitazaki_v1.pdf
Ayachika Kitazaki
WebAudio APIでブラウザ上で動くDJアプリケーションは作れるか? (WebAudio API アプリケーション作成入門)
WebAudio APIでブラウザ上で動くDJアプリケーションは作れるか? (WebAudio API アプリケーション作成入門)
Ryo Koizumi
Api設計
Api設計
Yuto Suzuki
YouTube APIの紹介
YouTube APIの紹介
Yoshifumi Yamaguchi
9th nov2012 kof2012
9th nov2012 kof2012
Kensaku Komatsu
DEV-008_Developing on the Edge. ~Web プラットフォームと Cordova~
DEV-008_Developing on the Edge. ~Web プラットフォームと Cordova~
decode2016
20150118 firefoxos-handson-helloworld
20150118 firefoxos-handson-helloworld
Noritada Shimizu
Web musicdevelopersmeetup@sapporo
Web musicdevelopersmeetup@sapporo
Ryoya Kawai
Web MIDI meets DIY #0
Web MIDI meets DIY #0
Ryoya Kawai
Más contenido relacionado
Similar a Web Audio API, Web MIDI API - 2015 html5 conference
AngularとWeb Audio APIはじめてみました
AngularとWeb Audio APIはじめてみました
pastelInc
20141115 fx os-codereading
20141115 fx os-codereading
Noritada Shimizu
自作ウェブ楽器の紹介
自作ウェブ楽器の紹介
aike
Web Audio API と IBM Watson Speech to Text の話
Web Audio API と IBM Watson Speech to Text の話
K Kimura
Web Audio APIで作る各種ウェブ楽器
Web Audio APIで作る各種ウェブ楽器
aike
オープンデータ Web API
オープンデータ Web API
Hironori Sakamoto
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
Atsushi Tadokoro
Speech API の概要(Microsoft Cognitive Services)
Speech API の概要(Microsoft Cognitive Services)
Atsushi Yokohama (BEACHSIDE)
日本Androidの会発表スライド androidのメディア機能の話
日本Androidの会発表スライド androidのメディア機能の話
Tatsuya Matsumoto
20220518_ongaqjs.pdf
20220518_ongaqjs.pdf
Hiroyuki Takakura
OSC 2010 Tokyo/Fall MSセッション
OSC 2010 Tokyo/Fall MSセッション
Masaki Takeda
Dropbox APIなどを使って制作を効率化しよう@関西オープンフォーラム
Dropbox APIなどを使って制作を効率化しよう@関西オープンフォーラム
Masayuki Abe
WebIntentsにより拓かれる次のWeb
WebIntentsにより拓かれる次のWeb
Kensaku Komatsu
20220519_TechStreet_vol6_kitazaki_v1.pdf
20220519_TechStreet_vol6_kitazaki_v1.pdf
Ayachika Kitazaki
WebAudio APIでブラウザ上で動くDJアプリケーションは作れるか? (WebAudio API アプリケーション作成入門)
WebAudio APIでブラウザ上で動くDJアプリケーションは作れるか? (WebAudio API アプリケーション作成入門)
Ryo Koizumi
Api設計
Api設計
Yuto Suzuki
YouTube APIの紹介
YouTube APIの紹介
Yoshifumi Yamaguchi
9th nov2012 kof2012
9th nov2012 kof2012
Kensaku Komatsu
DEV-008_Developing on the Edge. ~Web プラットフォームと Cordova~
DEV-008_Developing on the Edge. ~Web プラットフォームと Cordova~
decode2016
20150118 firefoxos-handson-helloworld
20150118 firefoxos-handson-helloworld
Noritada Shimizu
Similar a Web Audio API, Web MIDI API - 2015 html5 conference
(20)
AngularとWeb Audio APIはじめてみました
AngularとWeb Audio APIはじめてみました
20141115 fx os-codereading
20141115 fx os-codereading
自作ウェブ楽器の紹介
自作ウェブ楽器の紹介
Web Audio API と IBM Watson Speech to Text の話
Web Audio API と IBM Watson Speech to Text の話
Web Audio APIで作る各種ウェブ楽器
Web Audio APIで作る各種ウェブ楽器
オープンデータ Web API
オープンデータ Web API
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
Speech API の概要(Microsoft Cognitive Services)
Speech API の概要(Microsoft Cognitive Services)
日本Androidの会発表スライド androidのメディア機能の話
日本Androidの会発表スライド androidのメディア機能の話
20220518_ongaqjs.pdf
20220518_ongaqjs.pdf
OSC 2010 Tokyo/Fall MSセッション
OSC 2010 Tokyo/Fall MSセッション
Dropbox APIなどを使って制作を効率化しよう@関西オープンフォーラム
Dropbox APIなどを使って制作を効率化しよう@関西オープンフォーラム
WebIntentsにより拓かれる次のWeb
WebIntentsにより拓かれる次のWeb
20220519_TechStreet_vol6_kitazaki_v1.pdf
20220519_TechStreet_vol6_kitazaki_v1.pdf
WebAudio APIでブラウザ上で動くDJアプリケーションは作れるか? (WebAudio API アプリケーション作成入門)
WebAudio APIでブラウザ上で動くDJアプリケーションは作れるか? (WebAudio API アプリケーション作成入門)
Api設計
Api設計
YouTube APIの紹介
YouTube APIの紹介
9th nov2012 kof2012
9th nov2012 kof2012
DEV-008_Developing on the Edge. ~Web プラットフォームと Cordova~
DEV-008_Developing on the Edge. ~Web プラットフォームと Cordova~
20150118 firefoxos-handson-helloworld
20150118 firefoxos-handson-helloworld
Más de Ryoya Kawai
Web musicdevelopersmeetup@sapporo
Web musicdevelopersmeetup@sapporo
Ryoya Kawai
Web MIDI meets DIY #0
Web MIDI meets DIY #0
Ryoya Kawai
Making Music on the Web with MIDI Technology - Music China
Making Music on the Web with MIDI Technology - Music China
Ryoya Kawai
Web music開発環境
Web music開発環境
Ryoya Kawai
Roppongi ArtTech Night #1
Roppongi ArtTech Night #1
Ryoya Kawai
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
Ryoya Kawai
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
Ryoya Kawai
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Ryoya Kawai
Chrome+HTML5 Developers Live Japan #8 - Web MIDI API
Chrome+HTML5 Developers Live Japan #8 - Web MIDI API
Ryoya Kawai
Chrome Packaged Apps
Chrome Packaged Apps
Ryoya Kawai
Más de Ryoya Kawai
(10)
Web musicdevelopersmeetup@sapporo
Web musicdevelopersmeetup@sapporo
Web MIDI meets DIY #0
Web MIDI meets DIY #0
Making Music on the Web with MIDI Technology - Music China
Making Music on the Web with MIDI Technology - Music China
Web music開発環境
Web music開発環境
Roppongi ArtTech Night #1
Roppongi ArtTech Night #1
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Chrome+HTML5 Developers Live Japan #8 - Web MIDI API
Chrome+HTML5 Developers Live Japan #8 - Web MIDI API
Chrome Packaged Apps
Chrome Packaged Apps
Último
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
Último
(9)
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
Web Audio API, Web MIDI API - 2015 html5 conference
1.
Web Audio API、
Web MIDI API を使ったサウンドプログラミング ヤマハ 株式会社 かわい りょうや
2.
かわい りょうや google.com/+RyoyaKawai pepper x
VOCALOID Open Research Forum @KeioWeb Music ハッカソン
3.
Web Audio API
4.
Webブラウザ上で 信号処理を可能にした API
5.
● API自体の特徴 ○ JavaScript
で音そのものを作成&加工 ● Web Platformだから受ける特徴 ○ 出どころが確実でOpenな仕様(W3C) ○ APIについてはPlatform依存がない ● API策定の方針 ○ Developer 思考 ○ Native と同等な API を目指す ○ モジュール思考(Web Audioでは ”Node”と呼ぶ) 特徴
6.
モジュール(Node)思考 ● オシレーター ● オーディオバッファソース ●
ゲイン ● フィルター ● ディレイ ● スクリプトプロセッサー ● パン ● コンプレッサー ● コンボルバー ● アナライザー ● ウェーブシェイパー 用意されているNode Node Graph オーディオ バッファソース ディレイゲイン
7.
デ モ Node Graph ディレイゲイン ピッチシフト
8.
変更点 AudioWorker (旧:ScriptProcessor) ● 遅延の軽減を目的 ○
worker thread で動作させる
9.
利用可能なブラウザ Ready! NOT yet...Prepearing!
10.
やってみよう!
11.
● 音量と音階を変える 信号処理:その1 デ モ
12.
音色を変更 = 波形を変える
13.
アナログ シンセサイザー
14.
● 波形を揺らしたり・削ったり・足したり 信号処理:その2 デ モ
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.
FM シンセサイザー
17.
● 周波数をいじってみる 信号処理:その3 デ モ
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の周波数の比率 ● Carrierのアウトプットレベル ● Carrierのフィードバック
19.
Web MIDI API 5DIN
(Deutsches Institut Fur Normung)
20.
音源モジュール Webブラウザと MIDI機器を直接接続する 為のAPI MIDIコントローラ
21.
● API自体の特徴 ○ JavaScript
で MIDI 機器と接続ができる ● Web Platformだから受ける特徴 ○ 出どころが確実でOpenな仕様(W3C) ○ APIについてはPlatform依存がない ● API策定の方針 ○ Developer 思考 ○ Native と同等な API を目指す 特徴
22.
利用可能なブラウザ ● iOSでのWeb MIDI
API ○ Web MIDI Browser 上で動作します!! web midi browser ios
23.
MIDIって? ● Musical Instrument
Digital Interface ○ 演奏データを機器間でデジタル転送する規格 ■ 物理的な送受信回路 ■ インターフェイス ■ プロトコル ■ ファイルフォーマット、等 MIDI ● Musical Instrument Digital Interface ○ 演奏データを機器間でデジタル転送する規格 ■ 物理的な送受信回路 ■ インターフェイス ■ プロトコル ■ ファイルフォーマット、等
24.
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メッセージ midi メッセージ 約 487, 000件 (0.37秒) 残りのメッセージは検索で!
25.
<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デバイスの接続:コードの解説 ● デバイスを列挙する ● メッセージを処理する
26.
x-webmidi 3秒でMIDIを使う準備を整えたい!
27.
x-webmidi WebMIDIのPolymerコンポーネント - 機器のリスト、入力、出力を行うことが可能。 x-webmidi
28.
やってみよう!
29.
デ モ アナログ・シンセに接続してみる
30.
FM シンセに接続してみる デ モ
31.
Webブラウザ上に 楽器を作れちゃいました! Photo by Ed
Christensen いや、ちょっと待てよ、、、
32.
昔からできたよね?! <embeded src=”gegege.mid”> <audio src=”hoho.ogg”>
33.
Photo by Giulia
van Pelt
34.
音楽系アプリが動作する Platformが増えた! Photo by Giulia
van Pelt
35.
● 開発環境 ○ ブラウザ(debug
環境付き&実行環境) ○ テキストエディタ ● 言語 ○ Web標準言語(HTML, CSS , JavaScript) ○ コンパイルなし! ● その他 ○ APIが豊富 ○ 進化が速い ○ オープンだから情報が豊富!! WebというPlatformの特徴
36.
● User視点 ○ アプリのインストール不要 ○
Nativeと変わらない(まだ制限が多いかも・・・) ● Developer視点 ○ 開発のハードルが格段に下がった(自由化!) ○ 知識、ノウハウも得やすくなった ● マーケット ○ 音楽以外の分野との親和性が高まり、イノベー ションが起きやすく、またそのスピードも上る 2つの視点とマーケット
37.
まずは触ってみよう!
38.
● Web Music
Developers JPに相談だ!! ○ Google Groups ○ Google+ Web Music Developers JP 実装に困ったら...
39.
ご静聴ありがとうございました!
40.
アンケートにご協力お願いします。 http://bit.ly/html5C201501
Descargar ahora