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
2020-07-18 00:58:09 +00:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/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:58:09 +00:00
< script src = "./js/tone-ui.js" > < / script >
< script src = "./js/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" >
2020-07-19 00:20:19 +00:00
// you probably DONT want to connect the microphone
// directly to the master output because of feedback.
const mic = new Tone.UserMedia();
2015-09-30 18:01:19 +00:00
2020-07-19 00:20:19 +00:00
const micFFT = new Tone.FFT();
mic.connect(micFFT);
2020-07-18 00:36:42 +00:00
fft({
tone: micFFT,
2020-07-19 00:20:19 +00:00
parent: document.querySelector("#content")
});
// bind the interface
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 >
