mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-16 16:48:00 +00:00
102 lines
2.6 KiB
HTML
102 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Sampler</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 src="../build/Tone.js"></script>
|
|
<script src="./scripts/jquery.min.js"></script>
|
|
<script src="./scripts/draggabilly.js"></script>
|
|
<script src="./scripts/StartAudioContext.js"></script>
|
|
<script src="./scripts/Interface.js"></script>
|
|
<script src="https://tonejs.github.io/Logo/build/Logo.js"></script>
|
|
<script src="./scripts/Keyboard.js"></script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="./style/examples.css">
|
|
|
|
<script>
|
|
// jshint ignore: start
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<style type="text/css">
|
|
|
|
img {
|
|
width: 80%;
|
|
max-width: 700px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: block;
|
|
}
|
|
|
|
#Keyboard {
|
|
margin: 3px!important;
|
|
}
|
|
</style>
|
|
<div id="Content">
|
|
<div id="Title">Sampler</div>
|
|
<div id="Explanation">
|
|
<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.
|
|
</div>
|
|
<div id="Keyboard"></div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
var piano = new Tone.Sampler({
|
|
'A0' : 'A0.[mp3|ogg]',
|
|
'C1' : 'C1.[mp3|ogg]',
|
|
'D#1' : 'Ds1.[mp3|ogg]',
|
|
'F#1' : 'Fs1.[mp3|ogg]',
|
|
'A1' : 'A1.[mp3|ogg]',
|
|
'C2' : 'C2.[mp3|ogg]',
|
|
'D#2' : 'Ds2.[mp3|ogg]',
|
|
'F#2' : 'Fs2.[mp3|ogg]',
|
|
'A2' : 'A2.[mp3|ogg]',
|
|
'C3' : 'C3.[mp3|ogg]',
|
|
'D#3' : 'Ds3.[mp3|ogg]',
|
|
'F#3' : 'Fs3.[mp3|ogg]',
|
|
'A3' : 'A3.[mp3|ogg]',
|
|
'C4' : 'C4.[mp3|ogg]',
|
|
'D#4' : 'Ds4.[mp3|ogg]',
|
|
'F#4' : 'Fs4.[mp3|ogg]',
|
|
'A4' : 'A4.[mp3|ogg]',
|
|
'C5' : 'C5.[mp3|ogg]',
|
|
'D#5' : 'Ds5.[mp3|ogg]',
|
|
'F#5' : 'Fs5.[mp3|ogg]',
|
|
'A5' : 'A5.[mp3|ogg]',
|
|
'C6' : 'C6.[mp3|ogg]',
|
|
'D#6' : 'Ds6.[mp3|ogg]',
|
|
'F#6' : 'Fs6.[mp3|ogg]',
|
|
'A6' : 'A6.[mp3|ogg]',
|
|
'C7' : 'C7.[mp3|ogg]',
|
|
'D#7' : 'Ds7.[mp3|ogg]',
|
|
'F#7' : 'Fs7.[mp3|ogg]',
|
|
'A7' : 'A7.[mp3|ogg]',
|
|
'C8' : 'C8.[mp3|ogg]'
|
|
}, {
|
|
'release' : 1,
|
|
'baseUrl' : './audio/salamander/'
|
|
}).toMaster();
|
|
|
|
// GUI //
|
|
|
|
var keyboard = Interface.Keyboard();
|
|
|
|
keyboard.keyDown = function (note) {
|
|
piano.triggerAttack(note);
|
|
};
|
|
|
|
keyboard.keyUp = function (note) {
|
|
piano.triggerRelease(note);
|
|
};
|
|
|
|
Interface.Loader();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|