mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-16 16:48:00 +00:00
148 lines
No EOL
4.1 KiB
HTML
148 lines
No EOL
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Analyser</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/Logo.js"></script>
|
|
<script type="text/javascript" src="./scripts/Interface.js"></script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="./style/examples.css">
|
|
|
|
<script type="text/javascript">
|
|
// jshint ignore: start
|
|
</script>
|
|
<style type="text/css">
|
|
canvas {
|
|
margin-top: 2px;
|
|
width: 100%;
|
|
height: 255px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="Content" class="FullScreen">
|
|
<div id="Title">Analyser</div>
|
|
<div id="Explanation">
|
|
<a href="http://tonejs.org/docs/#Analyser" target="_blank">Tone.Analyser</a>
|
|
analyses the incoming audio to produce a TypedArray of either the
|
|
<a href="https://en.wikipedia.org/wiki/Fast_Fourier_transform" target="_blank">FFT data</a>
|
|
or the waveform. The default <code>returnType</code> is "byte" which returns values
|
|
in the range 0-255.
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
//analyse the frequency/amplitude of the incoming signal
|
|
var fft = new Tone.Analyser(32, "fft");
|
|
|
|
//get the waveform data for the audio
|
|
var waveform = new Tone.Analyser(1024, "waveform");
|
|
|
|
var player = new Tone.Player({
|
|
"url" : "./audio/FWDL.mp3",
|
|
"loop" : true
|
|
}).fan(fft, waveform).toMaster();
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
$(function(){
|
|
|
|
//start button
|
|
new Interface.Button({
|
|
key : 32,
|
|
type : "toggle",
|
|
text : "Start",
|
|
activeText : "Stop",
|
|
start : function(){
|
|
player.start();
|
|
},
|
|
end : function(){
|
|
player.stop();
|
|
}
|
|
});
|
|
|
|
//drawing the FFT
|
|
var fftContext = $("<canvas>",{
|
|
"id" : "fft"
|
|
}).appendTo("#Content").get(0).getContext("2d");
|
|
|
|
function drawFFT(values){
|
|
fftContext.clearRect(0, 0, canvasWidth, canvasHeight);
|
|
var barWidth = canvasWidth / fft.size;
|
|
for (var i = 0, len = values.length; i < len; i++){
|
|
var val = values[i] / 255;
|
|
var x = canvasWidth * (i / len);
|
|
var y = val * canvasHeight;
|
|
fftContext.fillStyle = "rgba(0, 0, 0, " + val + ")";
|
|
fftContext.fillRect(x, canvasHeight - y, barWidth, canvasHeight);
|
|
}
|
|
}
|
|
|
|
//the waveform data
|
|
var waveContext = $("<canvas>", {
|
|
"id" : "waveform"
|
|
}).appendTo("#Content").get(0).getContext("2d");
|
|
var waveformGradient;
|
|
|
|
function drawWaveform(values){
|
|
//draw the waveform
|
|
waveContext.clearRect(0, 0, canvasWidth, canvasHeight);
|
|
var values = waveform.analyse();
|
|
waveContext.beginPath();
|
|
waveContext.lineJoin = "round";
|
|
waveContext.lineWidth = 6;
|
|
waveContext.strokeStyle = waveformGradient;
|
|
waveContext.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);
|
|
var y = val * canvasHeight;
|
|
waveContext.lineTo(x, y);
|
|
}
|
|
waveContext.stroke();
|
|
}
|
|
|
|
//size the canvases
|
|
var canvasWidth, canvasHeight;
|
|
|
|
function sizeCanvases(){
|
|
canvasWidth = $("#fft").width();
|
|
canvasHeight = $("#fft").height();
|
|
waveContext.canvas.width = canvasWidth;
|
|
fftContext.canvas.width = canvasWidth;
|
|
waveContext.canvas.height = canvasHeight;
|
|
fftContext.canvas.height = canvasHeight;
|
|
|
|
//make the gradient
|
|
waveformGradient = waveContext.createLinearGradient(0, 0, canvasWidth, canvasHeight);
|
|
waveformGradient.addColorStop(0, "#ddd");
|
|
waveformGradient.addColorStop(1, "#000");
|
|
}
|
|
|
|
sizeCanvases();
|
|
$(window).resize(sizeCanvases);
|
|
|
|
function loop(){
|
|
requestAnimationFrame(loop);
|
|
//get the fft data and draw it
|
|
var fftValues = fft.analyse();
|
|
drawFFT(fftValues);
|
|
//get the waveform valeus and draw it
|
|
var waveformValues = waveform.analyse();
|
|
drawWaveform(waveformValues);
|
|
}
|
|
loop();
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |