I want to be a web guitar player

簡報於前端魔法師十一月份小聚

====
簡介
====

這場 talk 分享「如何與瀏覽器一起成為 rocker 的故事」；
你需要使用現有的 Web API 和一顆 rocker 的心...

=======
參考連結
=======

關於如何讓瀏覽器接收吉他音訊：

1. MDN - Navigator.getUserMedia() -
https://developer.mozilla.org/zh-TW/docs/Web/API/Navigator/getUserMedia
2. Capturing Audio & Video in HTML5
 -
https://www.html5rocks.com/en/tutorials/getusermedia/intro/

關於如何讓瀏覽器玩轉音樂效果：

1. MDN - Web Audio API -
https://developer.mozilla.org/zh-TW/docs/Web_Audio_API
2. Paul Adenot: Elements of Dance Music - JSConf.Asia 2015
 -
https://www.youtube.com/watch?v=Ww0jTafmd_w
3. Getting Started with Web Audio API
 -
https://www.html5rocks.com/en/tutorials/webaudio/intro/

關於效果器：

1. 效果器研究室 -
https://www.youtube.com/watch?v=ywNJiM6oin8

======
關於我
======

I'm Jason Chung,
a front-end developer 🖥
and a junior guitar player 🎸
in Positive Grid.

Email：
shiningjason1989@gmail.com

Website：
https://shiningjason1989.github.io

GitHub：
https://github.com/shiningjason1989

===================================
廣告：想玩音樂，想玩科技，也餵飽肚子嗎？
===================================

Positive Grid 是我目前的公司 -
https://www.positivegrid.com

我們正在用創新思維和最新科技，改變世界做音樂的方式。

如果你喜愛音樂，喜愛吉他，擁有搖滾的心，想加入改變世界的行列。

Join us -
https://www.positivegrid.com.tw/join-us/

Transcript

1. I want to be a web guitar player
2. + =
3. How to let browsers capture my guitar audio?
4. window.navigator.getUserMedia =
 window.navigator.getUserMedia || window.navigator.webkitGetUserMedia;
5. window.navigator.getUserMedia =
 window.navigator.getUserMedia || window.navigator.webkitGetUserMedia;
 
 window.navigator.getUserMedia( { audio: true }, (stream) => {}, (err) => console.err(err) );
6. window.navigator.getUserMedia =
 window.navigator.getUserMedia || window.navigator.webkitGetUserMedia;
 
 window.navigator.getUserMedia( { audio: true }, (stream) => {
 const context = new AudioContext();
 
 }, (err) => console.err(err) );
7. window.navigator.getUserMedia =
 window.navigator.getUserMedia || window.navigator.webkitGetUserMedia; window.AudioContext = window.AudioContext || window.webkitAudioContext;
 
 window.navigator.getUserMedia( { audio: true }, (stream) => {
 const context = new AudioContext();
 
 }, (err) => console.err(err) );
8. window.navigator.getUserMedia =
 window.navigator.getUserMedia || window.navigator.webkitGetUserMedia; window.AudioContext = window.AudioContext || window.webkitAudioContext;
 
 window.navigator.getUserMedia( { audio: true }, (stream) => {
 const context = new AudioContext();
 const source = context.createMediaStreamSource(stream); 
 }, (err) => console.err(err) );
9. window.navigator.getUserMedia =
 window.navigator.getUserMedia || window.navigator.webkitGetUserMedia; window.AudioContext = window.AudioContext || window.webkitAudioContext;
 
 window.navigator.getUserMedia( { audio: true }, (stream) => {
 const context = new AudioContext();
 const source = context.createMediaStreamSource(stream); source.connect(context.destination);
 }, (err) => console.err(err) );
10. DEMO
11. Reference • MDN - Navigator.getUserMedia()
 https://developer.mozilla.org/zh-TW/docs/Web/API/Navigator/getUserMedia • Capturing Audio & Video in HTML5
 https://www.html5rocks.com/en/tutorials/getusermedia/intro/
12. How to let browsers be a rocker?
14. Such as processing audio effects
17. const context = new AudioContext();
 const source = context.createMediaStreamSource(stream); source.connect(context.destination);
18. const context = new AudioContext();
 const source = context.createMediaStreamSource(stream); const distortion = context.createWaveShaper(); source.connect(context.destination);
19. const context = new AudioContext();
 const source = context.createMediaStreamSource(stream); const distortion = context.createWaveShaper(); source.connect(distortion);
20. const context = new AudioContext();
 const source = context.createMediaStreamSource(stream); const distortion = context.createWaveShaper(); source.connect(distortion); distortion.connect(context.destination)
22. DEMO
23. Reference • MDN - Web Audio API
 https://developer.mozilla.org/zh-TW/docs/Web_Audio_API • Paul Adenot: Elements of Dance Music - JSConf.Asia 2015
 https://www.youtube.com/watch?v=Ww0jTafmd_w • Getting Started with Web Audio API
 https://www.html5rocks.com/en/tutorials/webaudio/intro/
24. Summary
25. How to make the web rock?
26. How to make the web rock? 1. Navigator.getUserMedia()
27. How to make the web rock? 1. Navigator.getUserMedia() 2. Web Audio API
28. How to make the web rock? 1. Navigator.getUserMedia() 2. Web Audio API 3. Your rocker heart
29. Who am I?
30. I’m Jason Chung
31. I’m Jason Chung A front-end developer
32. I’m Jason Chung A front-end developer and a junior guitar player
33. I’m Jason Chung A front-end developer and a junior guitar player in Positive Grid
34. Positive Grid 䧮⦛姻㖈欽ⶾ倞䙼笞ㄤ剓倞猰䪮
    佖隶⚆歲⨞갉坿涸倰䒭
35. Want to rock?
36. Join us! https://www.positivegrid.com.tw/join-us/
37. End @shiningjason