mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-16 16:48:00 +00:00
165 lines
No EOL
4 KiB
HTML
165 lines
No EOL
4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>JSON SANDBOX</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/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>
|
|
<style type="text/css">
|
|
textarea {
|
|
width: 98%;
|
|
height: auto;
|
|
resize: none;
|
|
border: 0px;
|
|
background-color: transparent;
|
|
}
|
|
</style>
|
|
<div id="Explanation">
|
|
JSON Sandbox
|
|
<br>
|
|
<br>
|
|
GUIs are limited. The power of a library like Tone comes from being able to set any value you want,
|
|
not just the predescribed ranges of a GUI. Instruments and effects can be created and set
|
|
with object descriptions like the ones below. Edit the values of the JSON descriptions for the score
|
|
and the synth then hit "enter" to hear your changes.
|
|
</div>
|
|
<div id="Content">
|
|
<div id="Transport"></div>
|
|
<div id="Synth">
|
|
<textarea rows="26"></textarea>
|
|
</div>
|
|
<div id="Score">
|
|
<textarea></textarea>
|
|
</div>
|
|
<div id="CodeBlock"></div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
var synthOptions = {
|
|
"volume" : -10,
|
|
"portamento" : 0.05,
|
|
"oscillator" : {
|
|
"type" : "square"
|
|
},
|
|
"filter": {
|
|
"Q": 6,
|
|
"type": "lowpass",
|
|
"rolloff": -24
|
|
},
|
|
"envelope": {
|
|
"attack": 0.005,
|
|
"decay": 0.01,
|
|
"sustain": 0.9,
|
|
"release": 0.001
|
|
},
|
|
"filterEnvelope": {
|
|
"attack": 0.006,
|
|
"decay": 0.02,
|
|
"sustain": 0.5,
|
|
"release": 0.001,
|
|
"min": 10,
|
|
"max": 4000
|
|
}
|
|
};
|
|
|
|
//define a score to start with
|
|
var score = [["0", "C2"], ["1*8n", "C4"], ["2*8n", "E4"], ["3*8n", "B3"],
|
|
["4*8n", "G3"], ["5*8n", "C2"], ["6*8n", "C4"], ["7*8n", "B1"]];
|
|
|
|
//parse the score
|
|
Tone.Note.parseScore({
|
|
"synth" : score
|
|
});
|
|
</script>
|
|
|
|
<script id="ToneCode" type="text/javascript">
|
|
|
|
//use the synth presets defined in the JSON
|
|
var synth = new Tone.MonoSynth(synthOptions).toMaster();
|
|
|
|
//listen for callbacks on the "synth" channel and trigger the synth
|
|
Tone.Note.route("synth", function(time, note){
|
|
synth.triggerAttackRelease(note, "8n", time);
|
|
});
|
|
|
|
//loop the transport
|
|
Tone.Transport.loopEnd = "1m";
|
|
Tone.Transport.loop = true;
|
|
|
|
</script>
|
|
|
|
<script id="GUI" type="text/javascript">
|
|
|
|
Interface.Rack("Transport", "Transport");
|
|
Interface.Toggle("Transport", function(on){
|
|
if (on){
|
|
Tone.Transport.start();
|
|
} else {
|
|
Tone.Transport.stop();
|
|
}
|
|
})
|
|
Interface.Rack("Synth", "Synth", true);
|
|
Interface.Rack("Score", "Score", true);
|
|
Interface.Code("CodeBlock", "ToneCode");
|
|
|
|
var synthText = $("#Synth textarea");
|
|
var scoreText = $("#Score textarea");
|
|
|
|
synthText.text(JSON.stringify(synthOptions, null, "\t"));
|
|
scoreText.text(JSON.stringify(score));
|
|
|
|
synthText.keypress(function(e){
|
|
if (e.which === 13){
|
|
e.preventDefault();
|
|
synthText.blur();
|
|
//reload the parameters
|
|
try {
|
|
var options = JSON.parse(synthText.val());
|
|
synth.set(options);
|
|
synthOptions = options;
|
|
} catch (e){
|
|
console.log("syntax error: "+e);
|
|
synthText.val(JSON.stringify(synthOptions, null, "\t"));
|
|
}
|
|
}
|
|
});
|
|
|
|
scoreText.keypress(function(e){
|
|
if (e.which === 13){
|
|
e.preventDefault();
|
|
scoreText.blur();
|
|
//reload the parameters
|
|
try {
|
|
var options = JSON.parse(scoreText.val());
|
|
Tone.Transport.clearTimelines();
|
|
Tone.Note.parseScore({
|
|
"synth" : score
|
|
});
|
|
score = options;
|
|
} catch (e){
|
|
console.log("syntax error: "+e);
|
|
scoreText.val(JSON.stringify(score));
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |