mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-16 16:48:00 +00:00
115 lines
No EOL
3.5 KiB
HTML
115 lines
No EOL
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>SCORE</title>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
|
|
<script type="text/javascript" src="../build/Tone.js"></script>
|
|
<script type="text/javascript" src="../build/Tone.Preset.js"></script>
|
|
<script type="text/javascript" src="./deps/jquery.min.js"></script>
|
|
<script type="text/javascript" src="./deps/qwerty-hancock.js"></script>
|
|
<script type="text/javascript" src="./deps/nexusUI.js"></script>
|
|
<script type="text/javascript" src="./deps/prism.js"></script>
|
|
<script type="text/javascript" src="./scripts/Interface.js"></script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="./style/examples.css">
|
|
<link rel="stylesheet" type="text/css" href="./style/prism.css">
|
|
|
|
<script type="text/javascript">
|
|
// jshint ignore: start
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="Explanation">
|
|
Tone.Note
|
|
<br>
|
|
<br>
|
|
Tone.Note lets you to schedule a note on a particular "channel". Then use Tone.Note.route
|
|
to listen for events on that channel. Multiple notes can be put into a JSON-friendly score
|
|
which can be parsed using Tone.Note.parseScore(). Take a look at source to see the
|
|
score format. MIDI files can also be converted to JSON score format using utils/MidiToScore.js.
|
|
</div>
|
|
<div id="Content">
|
|
<div id="LoadingBar"></div>
|
|
<div id="Rack"></div>
|
|
<div id="Code"></div>
|
|
</div>
|
|
|
|
<script id="ToneCode" type="text/javascript">
|
|
var bass = new Tone.MonoSynth()
|
|
.toMaster()
|
|
.setPreset("Bassy");
|
|
bass.volume.value = -10;
|
|
|
|
var keys = new Tone.PolySynth(3, Tone.MonoSynth)
|
|
.toMaster()
|
|
.setPreset("Pianoetta");
|
|
keys.volume.value = -30;
|
|
|
|
var kick = new Tone.Player("./audio/505/kick.mp3")
|
|
.toMaster();
|
|
|
|
var snare = new Tone.Player("./audio/505/snare.mp3")
|
|
.toMaster();
|
|
|
|
var hh = new Tone.Player("./audio/505/hh.mp3")
|
|
.toMaster();
|
|
|
|
var Score = {
|
|
"kick" : ["0", "0:2:2", "0:3:1"],
|
|
//use any Tone.Time representation or expression
|
|
"snare" : ["4n*1", "4n*3"],
|
|
"hh" : ["0*8n", "1*8n", "2*8n", "3*8n", "4*8n", "5*8n", "6*8n", "7*8n"],
|
|
//if the array is composed of other arrays time is the first value
|
|
//the rest of the values are given to the callback in order
|
|
"bass" : [["0:0", "C2", "2n"], ["0:3:2", "C3", "8n"]],
|
|
"keys" : [["0:0:2", ["E4", "G4", "A4"]], ["0:0:3", ["E4", "G4", "A4"]], ["0:1:3", ["E4", "G4", "A4"]]],
|
|
};
|
|
|
|
//create events for all of the notes
|
|
Tone.Note.parseScore(Score);
|
|
|
|
//route the note channels
|
|
Tone.Note.route("bass", function(time, note, duration){
|
|
bass.triggerAttackRelease(note, duration, time);
|
|
});
|
|
Tone.Note.route("keys", function(time, value){
|
|
var velocity = Math.random() * 0.5 + 0.4;
|
|
for (var i = 0; i < value.length; i++) {
|
|
keys.triggerAttackRelease(value[i], "16n", time, velocity);
|
|
}
|
|
});
|
|
Tone.Note.route("kick", function(time){
|
|
kick.start(time);
|
|
});
|
|
Tone.Note.route("snare", function(time){
|
|
snare.start(time);
|
|
});
|
|
Tone.Note.route("hh", function(time){
|
|
hh.start(time);
|
|
});
|
|
|
|
//setup the transport values
|
|
Tone.Transport.loopStart = 0;
|
|
Tone.Transport.loopEnd = "1:0";
|
|
Tone.Transport.loop = true;
|
|
Tone.Transport.bpm.value = 100;
|
|
Tone.Transport.swing = 0.2;
|
|
</script>
|
|
<script type="text/javascript">
|
|
Interface.Loading("LoadingBar");
|
|
Interface.Rack("Rack", "Transport");
|
|
Interface.Toggle("Rack", function(on){
|
|
if (on){
|
|
Tone.Transport.start();
|
|
} else {
|
|
Tone.Transport.stop();
|
|
}
|
|
});
|
|
Interface.Code("Code", "ToneCode");
|
|
</script>
|
|
</body>
|
|
</html> |