2017-08-26 19:38:56 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > Sampler< / title >
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" >
2017-08-26 19:38:56 +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-08-26 19:38:56 +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 >
2017-08-26 19:38:56 +00:00
< / head >
< body >
2019-01-09 01:21:29 +00:00
< style >
tone-piano {
margin-bottom: 10px;
2017-08-26 19:38:56 +00:00
}
< / style >
2020-07-18 00:36:42 +00:00
< tone-example label = "Sampler" >
2019-01-09 01:21:29 +00:00
< tone-loader > < / tone-loader >
2020-07-18 00:36:42 +00:00
< div slot = "explanation" >
2017-08-26 19:38:56 +00:00
< a href = "https://tonejs.github.io/docs/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.
2020-07-18 00:36:42 +00:00
< / div >
2017-08-26 19:38:56 +00:00
2020-07-18 00:36:42 +00:00
< div id = "content" >
< / div >
2019-01-09 01:21:29 +00:00
< / tone-example >
2017-08-26 19:38:56 +00:00
2019-01-09 01:21:29 +00:00
< script type = "text/javascript" >
2020-07-18 00:36:42 +00:00
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();
piano({
2020-07-19 00:20:19 +00:00
parent: document.querySelector("#content"),
2020-07-18 00:36:42 +00:00
noteon: note => sampler.triggerAttack(note.name),
noteoff: note => sampler.triggerRelease(note.name),
2020-07-19 00:20:19 +00:00
});
2017-08-26 19:38:56 +00:00
< / script >
< / body >
< / html >
