2015-09-30 18:01:19 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
2019-01-09 01:21:29 +00:00
< title > Microphone< / title >
2015-09-30 18:01:19 +00:00
2019-01-09 01:21:29 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1" >
< link rel = "icon" type = "image/png" sizes = "174x174" href = "./favicon.png" >
2017-08-31 16:41:36 +00:00
2019-01-09 01:21:29 +00:00
< script src = "https://unpkg.com/@webcomponents/webcomponentsjs@^2/webcomponents-bundle.js" > < / script >
2020-07-18 00:36:42 +00:00
< link href = "https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel = "stylesheet" / >
2017-03-18 16:35:37 +00:00
< script src = "../build/Tone.js" > < / script >
2020-07-18 00:36:42 +00:00
< script src = "../../examples/dist/tone-gui.js" > < / script >
< script src = "../../examples/dist/components.js" > < / script >
2015-09-30 18:01:19 +00:00
< / head >
< body >
< style type = "text/css" >
2019-01-09 01:21:29 +00:00
tone-oscilloscope {
2015-09-30 18:01:19 +00:00
width: 100%;
background-color: black;
2019-01-09 01:21:29 +00:00
height: 40px;
border-radius: 20px;
margin-bottom: 10px;
2015-09-30 18:01:19 +00:00
}
< / style >
2020-07-18 00:36:42 +00:00
< tone-example label = "Microphone" >
< div slot = "explanation" >
2016-12-17 21:26:55 +00:00
If supported, Tone.UserMedia uses < code > getUserMedia< / code > to open the user's microphone where it can then be processed with Tone.js. Only works on https domains.
2020-07-18 00:36:42 +00:00
< / div >
2019-01-09 01:21:29 +00:00
2020-07-18 00:36:42 +00:00
< div id = "content" >
< tone-mic-button > < / tone-mic-button >
< / div >
2019-01-09 01:21:29 +00:00
< / tone-example >
< script type = "text/javascript" >
2015-09-30 18:01:19 +00:00
//you probably DONT want to connect the microphone
//directly to the master output because of feedback.
2016-12-17 21:26:55 +00:00
var mic = new Tone.UserMedia();
2015-09-30 18:01:19 +00:00
2020-07-18 00:36:42 +00:00
const micFFT = new Tone.FFT()
mic.connect(micFFT)
fft({
tone: micFFT,
parent: document.querySelector('#content')
})
2019-01-09 01:21:29 +00:00
//bind the interface
2020-07-18 00:36:42 +00:00
const micButton = document.querySelector('tone-mic-button')
micButton.supported = Tone.UserMedia.supported
micButton.addEventListener('open', () => mic.open())
micButton.addEventListener('close', () => mic.close())
2015-09-30 18:01:19 +00:00
< / script >
2017-08-31 16:41:36 +00:00
2015-09-30 18:01:19 +00:00
< / body >
2017-03-18 16:35:37 +00:00
< / html >
