mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-16 08:38:00 +00:00
113 lines
No EOL
3 KiB
HTML
113 lines
No EOL
3 KiB
HTML
<!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">
|
|
<link rel="icon" type="image/png" sizes="174x174" href="./style/favicon.png">
|
|
|
|
<script type="text/javascript" src="../build/Tone.js"></script>
|
|
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
|
|
<script type="text/javascript" src="./scripts/draggabilly.js"></script>
|
|
<script type="text/javascript" src="./scripts/StartAudioContext.js"></script>
|
|
<script type="text/javascript" src="./scripts/Interface.js"></script>
|
|
<script type="text/javascript" src="https://tonejs.github.io/Logo/build/Logo.js"></script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="./style/examples.css">
|
|
|
|
<script type="text/javascript">
|
|
// 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">
|
|
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.
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
|
|
//you probably DONT want to connect the microphone
|
|
//directly to the master output because of feedback.
|
|
var mic = new Tone.UserMedia();
|
|
|
|
var analyser = new Tone.Analyser({
|
|
"type" : "waveform",
|
|
"size" : 256
|
|
});
|
|
|
|
mic.connect(analyser);
|
|
|
|
</script>
|
|
|
|
<script id="GUI" type="text/javascript">
|
|
$(function(){
|
|
|
|
//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);
|
|
var values = analyser.analyse();
|
|
context.beginPath();
|
|
context.lineJoin = "round";
|
|
context.lineWidth = 6;
|
|
context.strokeStyle = "white";
|
|
context.moveTo(0, (values[0] / 255) * canvasHeight);
|
|
for (var i = 1, len = values.length; i < len; i++){
|
|
var val = values[i] / 255;
|
|
var x = canvasWidth * (i / (len - 1));
|
|
var y = val * canvasHeight;
|
|
context.lineTo(x, y);
|
|
}
|
|
context.stroke();
|
|
}
|
|
drawLoop();
|
|
|
|
Interface.Button({
|
|
type : "toggle",
|
|
text : "Open Mic",
|
|
activeText : "Close Mic",
|
|
start : function(){
|
|
mic.open();
|
|
},
|
|
end : function(){
|
|
mic.close();
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |