2016-12-21 04:02:12 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
2019-01-09 01:21:29 +00:00
< title > Analyser< / title >
2016-12-21 04:02:12 +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" >
2016-12-21 04:02:12 +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 >
2016-12-21 04:02:12 +00:00
2019-01-09 01:21:29 +00:00
< / head >
< body >
2016-12-21 04:02:12 +00:00
< style type = "text/css" >
#Notes{
width: 100%;
height: 20px;
position: relative;
2019-01-09 01:21:29 +00:00
margin-bottom: 10px;
2016-12-21 04:02:12 +00:00
}
.Note {
width: 20%;
height: 100%;
position: relative;
float: left;
background-color: black;
opacity: 0;
2019-01-09 01:21:29 +00:00
transition: opacity 0.5s;
}
.Note.active {
opacity: 1;
transition-duration: 0.1s;
2016-12-21 04:02:12 +00:00
}
< / style >
2020-07-18 00:36:42 +00:00
< tone-example label = "Synchronizing Visuals" >
< div slot = "explanation" >
2016-12-28 23:39:03 +00:00
Audio scheduling and rendering visuals should always be kept separate. Instead of triggering visuals from within a scheduled event callback, schedule a 'deferred' callback using Tone.Draw which will be invoked on an animation frame at the exact moment of the scheduled event.
2016-12-21 04:02:12 +00:00
< br > < br >
2016-12-28 23:39:03 +00:00
For more information see < a href = "https://github.com/Tonejs/Tone.js/wiki/Performance" > this wiki article< / a > .
2020-07-18 00:36:42 +00:00
< / div >
< div id = "content" >
2019-01-09 01:21:29 +00:00
< div id = "Notes" >
< div id = "C4" class = "Note" > < / div >
< div id = "E4" class = "Note" > < / div >
< div id = "G4" class = "Note" > < / div >
< div id = "B4" class = "Note" > < / div >
< div id = "D5" class = "Note" > < / div >
< / div >
< tone-play-toggle > < / tone-play-toggle >
2020-07-18 00:36:42 +00:00
< / div >
2019-01-09 01:21:29 +00:00
< / tone-example >
< script type = "text/javascript" >
2020-07-19 00:20:19 +00:00
const piano = new Tone.Synth({
oscillator: {
type: "fmsine4",
modulationType: "square"
2016-12-21 04:02:12 +00:00
}
2020-07-18 00:36:42 +00:00
}).toDestination();
2016-12-21 04:02:12 +00:00
2020-07-19 00:20:19 +00:00
const loop = new Tone.Pattern(((time, note) => {
2016-12-21 04:02:12 +00:00
piano.triggerAttackRelease(note, "16n", time);
// Draw.schedule takes a callback and a time to invoke the callback
2020-07-19 00:20:19 +00:00
Tone.Draw.schedule(() => {
// the callback synced to the animation frame at the given time
2019-01-09 01:21:29 +00:00
const noteElement = document.querySelector("#"+note);
noteElement.classList.add("active");
setTimeout(() => {
noteElement.classList.remove("active");
}, 100);
2016-12-21 04:02:12 +00:00
}, time);
2020-07-19 00:20:19 +00:00
}), ["C4", "E4", "G4", "B4", "D5"]).start(0);
2016-12-21 04:02:12 +00:00
loop.interval = "16n";
2019-01-09 01:21:29 +00:00
Tone.Transport.lookAhead = 0.5;
2016-12-21 04:02:12 +00:00
2020-07-18 00:36:42 +00:00
drawer().add({
tone: piano,
2020-07-19 00:20:19 +00:00
title: "Piano",
});
2020-07-18 00:36:42 +00:00
2020-07-19 00:20:19 +00:00
// connect the UI with the components
2020-07-18 00:36:42 +00:00
document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());
document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop());
2016-12-21 04:02:12 +00:00
< / script >
< / body >
2017-03-18 16:35:37 +00:00
< / html >
