Tone.js/examples/stepSequencer.html

92 lines
2.2 KiB
HTML
Raw Normal View History

2024-05-15 19:24:20 +00:00
<!doctype html>
2014-06-23 21:00:51 +00:00
<html>
2024-05-15 19:24:20 +00:00
<head>
<meta charset="utf-8" />
<title>Step Sequencer</title>
2014-06-23 21:00:51 +00:00
2024-05-15 19:24:20 +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"
/>
2014-09-06 19:35:31 +00:00
2024-05-15 19:24:20 +00:00
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link
href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
rel="stylesheet"
/>
<script src="../build/Tone.js"></script>
<script src="./js/tone-ui.js"></script>
<script src="./js/components.js"></script>
<style type="text/css">
tone-transport {
margin-bottom: 10px;
}
</style>
</head>
<body>
<tone-example label="Step Sequencer">
<tone-loader></tone-loader>
<div slot="explanation">
<a
href="https://tonejs.github.io/docs/latest/functions/getTransport.html"
>Tone.Transport</a
>
2024-09-09 15:05:15 +00:00
is the application-wide timekeeper. Its clock source enables
2024-05-15 19:24:20 +00:00
sample-accurate scheduling as well as tempo-curves and
automation. This example uses Tone.Sequence to invoke a callback
every 16th note.
</div>
2019-01-09 01:21:29 +00:00
2024-05-15 19:24:20 +00:00
<div id="content">
<tone-play-toggle></tone-play-toggle>
<tone-slider
label="tempo"
units="bpm"
min="60"
max="240"
value="120"
></tone-slider>
<tone-step-sequencer></tone-step-sequencer>
</div>
</tone-example>
2019-01-09 01:21:29 +00:00
2024-05-15 19:24:20 +00:00
<script type="text/javascript">
const keys = new Tone.Players({
urls: {
0: "A1.mp3",
1: "Cs2.mp3",
2: "E2.mp3",
3: "Fs2.mp3",
},
fadeOut: "64n",
baseUrl: "https://tonejs.github.io/audio/casio/",
}).toDestination();
2024-05-15 19:24:20 +00:00
document
.querySelector("tone-play-toggle")
.addEventListener("start", () => Tone.Transport.start());
document
.querySelector("tone-play-toggle")
.addEventListener("stop", () => Tone.Transport.stop());
document
.querySelector("tone-slider")
.addEventListener(
"input",
(e) =>
(Tone.Transport.bpm.value = parseFloat(e.target.value))
);
document
.querySelector("tone-step-sequencer")
.addEventListener("trigger", ({ detail }) => {
keys.player(detail.row).start(detail.time, 0, "16t");
});
</script>
</body>
</html>