2015-09-30 18:01:19 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > MICROPHONE< / title >
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" >
2015-12-08 05:06:58 +00:00
< link rel = "icon" type = "image/png" sizes = "174x174" href = "./style/favicon.png" >
2017-08-31 16:41:36 +00:00
2017-03-18 16:35:37 +00:00
< script src = "../build/Tone.js" > < / script >
< script src = "./scripts/jquery.min.js" > < / script >
< script src = "./scripts/draggabilly.js" > < / script >
< script src = "./scripts/StartAudioContext.js" > < / script >
< script src = "./scripts/Interface.js" > < / script >
< script src = "https://tonejs.github.io/Logo/build/Logo.js" > < / script >
2015-09-30 18:01:19 +00:00
< link rel = "stylesheet" type = "text/css" href = "./style/examples.css" >
2017-03-18 16:35:37 +00:00
< script >
2015-09-30 18:01:19 +00:00
// jshint ignore: start
< / script >
< / head >
< body >
< style type = "text/css" >
canvas {
width: 100%;
height: 200px;
background-color: black;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
< / style >
< div id = "Content" class = "FullScreen" >
< div id = "Title" > Microphone< / div >
< div id = "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.
2015-09-30 18:01:19 +00:00
< / div >
< / div >
2017-03-18 16:35:37 +00:00
< script >
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
2017-08-31 16:41:36 +00:00
var analyser = new Tone.Waveform(256);
2015-09-30 18:01:19 +00:00
mic.connect(analyser);
2017-03-26 20:39:19 +00:00
// GUI //
//indicate if the microphone is supported or not
if (!Tone.UserMedia.supported){
$("< div > ", {
"id" : "NotSupported",
"text" : "getUserMedia is not supported by your browser."
}).appendTo("#Content");
} else {
var canvas = $("< canvas > ").appendTo("#Content");
var context = canvas.get(0).getContext("2d");
context.canvas.width = canvas.width();
context.canvas.height = canvas.height();
function drawLoop(){
var canvasWidth = context.canvas.width;
var canvasHeight = context.canvas.height;
requestAnimationFrame(drawLoop);
//draw the waveform
context.clearRect(0, 0, canvasWidth, canvasHeight);
2017-08-31 16:41:36 +00:00
var values = analyser.getValue();
2017-03-26 20:39:19 +00:00
context.beginPath();
context.lineJoin = "round";
context.lineWidth = 6;
context.strokeStyle = "white";
2017-08-31 16:41:36 +00:00
context.moveTo(0, (values[0] + 1) / 2 * canvasHeight);
2017-03-26 20:39:19 +00:00
for (var i = 1, len = values.length; i < len ; i + + ) {
2017-08-31 16:41:36 +00:00
var val = (values[i] + 1) / 2;
2017-03-26 20:39:19 +00:00
var x = canvasWidth * (i / (len - 1));
var y = val * canvasHeight;
context.lineTo(x, y);
2016-12-17 21:26:55 +00:00
}
2017-03-26 20:39:19 +00:00
context.stroke();
2015-09-30 18:01:19 +00:00
}
2017-03-26 20:39:19 +00:00
drawLoop();
2017-08-31 16:41:36 +00:00
2017-03-26 20:39:19 +00:00
Interface.Button({
type : "toggle",
text : "Open Mic",
activeText : "Close Mic",
start : function(){
mic.open();
},
end : function(){
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 >
