Tone.js/examples/offline.html
Yotam Mann 050e868a61 offline rendering example
[skip ci]
2017-03-26 12:33:28 -04:00

107 lines
No EOL
2.6 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Offline</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>
<link rel="stylesheet" type="text/css" href="./style/examples.css">
<script>
// jshint ignore: start
</script>
<style type="text/css">
.Button {
pointer-events: none;
}
.Button.Ready {
pointer-events: initial;
}
</style>
</head>
<body>
<div id="Content">
<div id="Title">Offline</div>
<div id="Explanation">
Tone.Offline renders a chunk of Tone.js code into an AudioBuffer. An offline instance of Tone.Transport is passed into the callback which can be used to schedule events. It may take a moment to render the sound.
<br><br>
<a href="https://tonejs.github.io/docs/#Offline">Tone.Offline</a> docs.
</div>
</div>
<script>
//load the buffer for use in the convolver
var buffer = new Tone.Buffer("https://googlechrome.github.io/web-audio-samples/samples/audio/impulse-responses/chorus-feedback.wav");
Tone.loaded().then(function(){
return Tone.Offline(function(){
var reverb = new Tone.Convolver(buffer).toMaster();
reverb.wet.value = 0.2;
var count = 40;
var duration = 0.2;
for (var i = 0; i < count; i++){
var norm = i / count;
var pan = Math.cos(norm * Math.PI * 2);
var panner = new Tone.Panner(pan).connect(reverb);
var synth = new Tone.Synth({
"envelope" : {
"attack" : 0.001,
"decay" : 5,
"sustain" : 0
},
"oscillator" : {
"type" : "square10"
}
}).connect(panner);
var time = norm * duration;
var freq = pan * 400 + 500;
synth.triggerAttack(freq, time, 0.1);
}
}, 7)
}).then(function(buffer){
//set the buffer once it's rendered
player.buffer = buffer;
button.element.text("Play");
button.element.addClass("Ready");
})
var player = new Tone.Player().toMaster();
// GUI //
var button = Interface.Button({
text : "Play",
activeText : "Stop",
type : "toggle",
start : function(){
player.start();
},
end : function(){
player.stop();
}
});
button.element.text("Rendering...");
</script>
</body>
</html>