2024-05-15 19:24:20 +00:00
|
|
|
<!doctype html>
|
2017-08-26 19:38:56 +00:00
|
|
|
<html>
|
2024-05-15 19:24:20 +00:00
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title>Sampler</title>
|
2017-08-26 19:38:56 +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"
|
|
|
|
|
/>
|
2017-08-26 19:38:56 +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>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<style>
|
|
|
|
|
tone-piano {
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<tone-example label="Sampler">
|
|
|
|
|
<tone-loader></tone-loader>
|
2019-01-09 01:21:29 +00:00
|
|
|
|
2024-05-15 19:24:20 +00:00
|
|
|
<div slot="explanation">
|
|
|
|
|
<a
|
|
|
|
|
href="https://tonejs.github.io/docs/latest/classes/Sampler"
|
|
|
|
|
target="_blank"
|
|
|
|
|
>Tone.Sampler</a
|
|
|
|
|
>
|
|
|
|
|
makes it easy to create an instrument from audio samples. Pass
|
|
|
|
|
in an object which maps the note's pitch or midi value to the
|
|
|
|
|
url, then you can trigger the attack and release of that note
|
|
|
|
|
like other instruments. By automatically repitching the samples,
|
|
|
|
|
it is possible to play pitches which were not explicitly
|
|
|
|
|
included which can save loading time.
|
|
|
|
|
</div>
|
2017-08-26 19:38:56 +00:00
|
|
|
|
2024-05-15 19:24:20 +00:00
|
|
|
<div id="content"></div>
|
|
|
|
|
</tone-example>
|
2017-08-26 19:38:56 +00:00
|
|
|
|
2024-05-15 19:24:20 +00:00
|
|
|
<script type="text/javascript">
|
|
|
|
|
const sampler = new Tone.Sampler({
|
|
|
|
|
urls: {
|
|
|
|
|
A0: "A0.mp3",
|
|
|
|
|
C1: "C1.mp3",
|
|
|
|
|
"D#1": "Ds1.mp3",
|
|
|
|
|
"F#1": "Fs1.mp3",
|
|
|
|
|
A1: "A1.mp3",
|
|
|
|
|
C2: "C2.mp3",
|
|
|
|
|
"D#2": "Ds2.mp3",
|
|
|
|
|
"F#2": "Fs2.mp3",
|
|
|
|
|
A2: "A2.mp3",
|
|
|
|
|
C3: "C3.mp3",
|
|
|
|
|
"D#3": "Ds3.mp3",
|
|
|
|
|
"F#3": "Fs3.mp3",
|
|
|
|
|
A3: "A3.mp3",
|
|
|
|
|
C4: "C4.mp3",
|
|
|
|
|
"D#4": "Ds4.mp3",
|
|
|
|
|
"F#4": "Fs4.mp3",
|
|
|
|
|
A4: "A4.mp3",
|
|
|
|
|
C5: "C5.mp3",
|
|
|
|
|
"D#5": "Ds5.mp3",
|
|
|
|
|
"F#5": "Fs5.mp3",
|
|
|
|
|
A5: "A5.mp3",
|
|
|
|
|
C6: "C6.mp3",
|
|
|
|
|
"D#6": "Ds6.mp3",
|
|
|
|
|
"F#6": "Fs6.mp3",
|
|
|
|
|
A6: "A6.mp3",
|
|
|
|
|
C7: "C7.mp3",
|
|
|
|
|
"D#7": "Ds7.mp3",
|
|
|
|
|
"F#7": "Fs7.mp3",
|
|
|
|
|
A7: "A7.mp3",
|
|
|
|
|
C8: "C8.mp3",
|
|
|
|
|
},
|
|
|
|
|
release: 1,
|
|
|
|
|
baseUrl: "https://tonejs.github.io/audio/salamander/",
|
|
|
|
|
}).toDestination();
|
2020-07-18 00:36:42 +00:00
|
|
|
|
2024-05-15 19:24:20 +00:00
|
|
|
piano({
|
|
|
|
|
parent: document.querySelector("#content"),
|
|
|
|
|
noteon: (note) => sampler.triggerAttack(note.name),
|
|
|
|
|
noteoff: (note) => sampler.triggerRelease(note.name),
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
2017-08-26 19:38:56 +00:00
|
|
|
</html>
|
