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 >
2017-03-18 16:35:37 +00:00
< script src = "../build/Tone.js" > < / script >
2019-01-09 01:21:29 +00:00
< script src = "./js/tonejs-ui.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 >
2019-01-09 01:21:29 +00:00
< tone-example >
< tone-explanation label = "Microphone" >
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.
2019-01-09 01:21:29 +00:00
< / tone-explanation >
< tone-content >
< tone-oscilloscope > < / tone-oscilloscope >
< tone-microphone > < / tone-microphone >
< / tone-content >
< / 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
2019-01-09 01:21:29 +00:00
//bind the interface
document.querySelector("tone-microphone").bind(mic);
document.querySelector("tone-oscilloscope").bind(mic);
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 >
