Mirrors/Tone.js
2
0
Fork 0
mirror of https://github.com/Tonejs/Tone.js synced 2024-12-26 03:23:11 +00:00
Code Issues Projects Releases Packages Wiki Activity

updating example links

Browse source
This commit is contained in:
Yotam Mann 2024-05-06 16:23:42 -04:00
parent f06ff17f06
commit 77a8e225f4
25 changed files with 2455 additions and 1760 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

128
examples/amSynth.html
View file

@ -1,64 +1,78 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>AMSynth</title> <title>AMSynth</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> content="width=device-width, initial-scale=1, maximum-scale=1"
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> />
<script src="../build/Tone.js"></script> <link
<script src="./js/tone-ui.js"></script> rel="icon"
<script src="./js/components.js"></script> type="image/png"
</head> sizes="174x174"
<body> href="./favicon.png"
<tone-example label="AMSynth"> />
<div slot="explanation"> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<a href="https://tonejs.github.io/docs/AMSynth">Tone.AMSynth</a> <link
is composed of two href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<a href="https://tonejs.github.io/docs/Synth">Tone.Synths</a> rel="stylesheet"
where one Tone.Synth modulates the amplitude of a second Tone.Synth. />
</div> <script src="../build/Tone.js"></script>
<script src="./js/tone-ui.js"></script>
<script src="./js/components.js"></script>
</head>
<body>
<tone-example label="AMSynth">
<div slot="explanation">
<a href="https://tonejs.github.io/docs/latest/classes/AMSynth"
>Tone.AMSynth</a
>
is composed of two
<a href="https://tonejs.github.io/docs/latest/classes/Synth"
>Tone.Synths</a
>
where one Tone.Synth modulates the amplitude of a second
Tone.Synth.
</div>
<div id="content"> <div id="content"></div>
</div> </tone-example>
</tone-example>
<script type="text/javascript"> <script type="text/javascript">
const synth = new Tone.AMSynth({ const synth = new Tone.AMSynth({
harmonicity: 2.5, harmonicity: 2.5,
oscillator: { oscillator: {
type: "fatsawtooth" type: "fatsawtooth",
}, },
envelope: { envelope: {
attack: 0.1, attack: 0.1,
decay: 0.2, decay: 0.2,
sustain: 0.2, sustain: 0.2,
release: 0.3 release: 0.3,
}, },
modulation: { modulation: {
type: "square" type: "square",
}, },
modulationEnvelope: { modulationEnvelope: {
attack: 0.5, attack: 0.5,
decay: 0.01 decay: 0.01,
} },
}).toDestination(); }).toDestination();
piano({ piano({
tone: synth, tone: synth,
parent: document.querySelector("#content"), parent: document.querySelector("#content"),
noteon: (note) => synth.triggerAttack(note.name), noteon: (note) => synth.triggerAttack(note.name),
noteoff: (note) => synth.triggerRelease() noteoff: (note) => synth.triggerRelease(),
}); });
ui({ ui({
tone: synth, tone: synth,
name: "AMSynth", name: "AMSynth",
parent: document.querySelector("#content"), parent: document.querySelector("#content"),
}); });
</script>
</script> </body>
</body>
</html> </html>

140
examples/analysis.html
View file

@ -1,71 +1,93 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Analyser</title> <title>Analyser</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
<script src="../build/Tone.js"></script>
<script src="./js/tone-ui.js"></script>
<script src="./js/components.js"></script>
</head>
<body>
<tone-example label="Analyser">
<tone-loader></tone-loader>
</head> <div slot="explanation">
<body> <a
<tone-example label="Analyser"> href="https://tonejs.github.io/docs/latest/classes/FFT"
<tone-loader></tone-loader> target="_blank"
>Tone.FFT</a
>
returns the amplitude of the incoming signal at different
frequencies.
<a
href="https://tonejs.github.io/docs/latest/classes/Waveform"
target="_blank"
>Tone.Waveform</a
>
returns the signal value between 0-1.
</div>
<div slot="explanation"> <div id="content">
<a href="https://tonejs.github.io/docs/FFT" target="_blank">Tone.FFT</a> <tone-play-toggle></tone-play-toggle>
returns the amplitude of the incoming signal at different frequencies. </div>
<a href="https://tonejs.github.io/docs/Waveform" target="_blank">Tone.Waveform</a> </tone-example>
returns the signal value between 0-1.
</div>
<div id="content"> <script type="text/javascript">
<tone-play-toggle></tone-play-toggle> const player = new Tone.Player({
</div> url: "https://tonejs.github.io/audio/berklee/arpeggio2.mp3",
</tone-example> loop: true,
}).toDestination();
<script type="text/javascript"> const toneMeter = new Tone.Meter();
const player = new Tone.Player({ player.connect(toneMeter);
url: "https://tonejs.github.io/audio/berklee/arpeggio2.mp3",
loop: true
}).toDestination();
const toneMeter = new Tone.Meter(); const toneFFT = new Tone.FFT();
player.connect(toneMeter); player.connect(toneFFT);
const toneFFT = new Tone.FFT(); const toneWaveform = new Tone.Waveform();
player.connect(toneFFT); player.connect(toneWaveform);
const toneWaveform = new Tone.Waveform(); // bind the GUI
player.connect(toneWaveform); drawer().add({
tone: player,
title: "Player",
});
meter({
tone: toneMeter,
parent: document.querySelector("#content"),
});
fft({
tone: toneFFT,
parent: document.querySelector("#content"),
});
waveform({
tone: toneWaveform,
parent: document.querySelector("#content"),
});
// bind the GUI document
drawer().add({ .querySelector("tone-play-toggle")
tone: player, .addEventListener("start", () => player.start());
title: "Player", document
}); .querySelector("tone-play-toggle")
meter({ .addEventListener("stop", () => player.stop());
tone: toneMeter, </script>
parent: document.querySelector("#content") </body>
});
fft({
tone: toneFFT,
parent: document.querySelector("#content")
});
waveform({
tone: toneWaveform,
parent: document.querySelector("#content")
});
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
</script>
</body>
</html> </html>

174
examples/bembe.html
View file

@ -1,82 +1,116 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>MetalSynth</title> <title>MetalSynth</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
<script src="../build/Tone.js"></script>
<script src="./js/tone-ui.js"></script>
<script src="./js/components.js"></script>
</head>
<body>
<tone-example label="Bembe">
<div slot="explanation">
<a
href="https://tonejs.github.io/docs/latest/classes/MetalSynth"
>Tone.MetalSynth</a
>
creates metallic, inharmonic sounds using 6
<a
href="https://tonejs.github.io/docs/latest/classes/FMOscillator"
>Tone.FMOscillators</a
>
with a tuning based on the TR-808 Cymbal.
<a
href="https://tonejs.github.io/docs/latest/classes/MembraneSynth"
>Tone.MembraneSynth</a
>
makes kick and tom-like sounds using a frequency envelope which
is triggered on notes attack.
</div>
</head> <div id="content">
<body> <tone-play-toggle></tone-play-toggle>
<tone-example label="Bembe"> </div>
<div slot="explanation"> </tone-example>
<a href="https://tonejs.github.io/docs/MetalSynth">Tone.MetalSynth</a>
creates metallic, inharmonic sounds using 6
<a href="https://tonejs.github.io/docs/FMOscillator">Tone.FMOscillators</a>
with a tuning based on the TR-808 Cymbal.
<a href="https://tonejs.github.io/docs/MembraneSynth">Tone.MembraneSynth</a>
makes kick and tom-like sounds using a frequency envelope which is triggered on notes attack.
</div>
<div id="content"> <script type="text/javascript">
<tone-play-toggle></tone-play-toggle> const bell = new Tone.MetalSynth({
</div> harmonicity: 12,
</tone-example> resonance: 800,
modulationIndex: 20,
envelope: {
decay: 0.4,
},
volume: -15,
}).toDestination();
<script type="text/javascript"> const bellPart = new Tone.Sequence(
const bell = new Tone.MetalSynth({ (time, freq) => {
harmonicity: 12, bell.triggerAttack(freq, time, Math.random() * 0.5 + 0.5);
resonance: 800, },
modulationIndex: 20, [
envelope: { [300, null, 200],
decay: 0.4, [null, 200, 200],
}, [null, 200, null],
volume: -15 [200, null, 200],
}).toDestination(); ],
"4n"
).start(0);
const bellPart = new Tone.Sequence(((time, freq) => { const conga = new Tone.MembraneSynth({
bell.triggerAttack(freq, time, Math.random()*0.5 + 0.5); pitchDecay: 0.008,
}), [[300, null, 200], octaves: 2,
[null, 200, 200], envelope: {
[null, 200, null], attack: 0.0006,
[200, null, 200] decay: 0.5,
], "4n").start(0); sustain: 0,
},
}).toDestination();
const conga = new Tone.MembraneSynth({ const congaPart = new Tone.Sequence(
pitchDecay: 0.008, (time, pitch) => {
octaves: 2, conga.triggerAttack(pitch, time, Math.random() * 0.5 + 0.5);
envelope: { },
attack: 0.0006, ["G3", "C4", "C4", "C4"],
decay: 0.5, "4n"
sustain: 0 ).start(0);
}
}).toDestination();
const congaPart = new Tone.Sequence(((time, pitch) => { Tone.Transport.bpm.value = 115;
conga.triggerAttack(pitch, time, Math.random()*0.5 + 0.5);
}), ["G3", "C4", "C4", "C4"], "4n").start(0);
Tone.Transport.bpm.value = 115; drawer()
.add({
tone: conga,
title: "Conga",
})
.add({
tone: bell,
title: "Bell",
});
drawer().add({ // connect the UI with the components
tone: conga, document
title: "Conga" .querySelector("tone-play-toggle")
}).add({ .addEventListener("start", () => Tone.Transport.start());
tone: bell, document
title: "Bell" .querySelector("tone-play-toggle")
}); .addEventListener("stop", () => Tone.Transport.stop());
</script>
// connect the UI with the components </body>
document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());
document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop());
</script>
</body>
</html> </html>

206
examples/buses.html
View file

@ -1,84 +1,142 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Buses</title> <title>Buses</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
</head> <script src="../build/Tone.js"></script>
<body> <script src="./js/tone-ui.js"></script>
<tone-example label="Buses"> <script src="./js/components.js"></script>
<div slot="explanation"> </head>
Buses make it easy to share effects across many instruments. <code>send</code> <body>
audio to a named bus from an instrument and then <code>receive</code> that <tone-example label="Buses">
channel on your effect. The gain values are all in decibels. <div slot="explanation">
<br><br> Buses make it easy to share effects across many instruments.
Docs on <a href="https://tonejs.github.io/docs/Channel.html#send">send</a> and <code>send</code> audio to a named bus from an instrument and
<a href="https://tonejs.github.io/docs/Channel.html#receive">receive</a>. then <code>receive</code> that channel on your effect. The gain
</div> values are all in decibels. <br /><br />
<div id="content"> Docs on
<tone-play-toggle></tone-play-toggle> <a
<tone-slider label="Chorus Send" min="-60" max="6" value="-60" units="db"></tone-slider> href="https://tonejs.github.io/docs/latest/classes/Channel.html#send"
<tone-slider label="Chebyshev Send" min="-60" max="6" value="-60" units="db"></tone-slider> >send</a
<tone-slider label="Reverb Send" min="-60" max="6" value="-60" units="db"></tone-slider> >
</div> and
</tone-example> <a
href="https://tonejs.github.io/docs/latest/classes/Channel.html#receive"
>receive</a
>.
</div>
<div id="content">
<tone-play-toggle></tone-play-toggle>
<tone-slider
label="Chorus Send"
min="-60"
max="6"
value="-60"
units="db"
></tone-slider>
<tone-slider
label="Chebyshev Send"
min="-60"
max="6"
value="-60"
units="db"
></tone-slider>
<tone-slider
label="Reverb Send"
min="-60"
max="6"
value="-60"
units="db"
></tone-slider>
</div>
</tone-example>
<script type="text/javascript"> <script type="text/javascript">
// the source // the source
const player = new Tone.Player({ const player = new Tone.Player({
url: "https://tonejs.github.io/audio/berklee/femalevoice_oo_A4.mp3", url: "https://tonejs.github.io/audio/berklee/femalevoice_oo_A4.mp3",
loop: true, loop: true,
}); });
// make some effects // make some effects
const chorus = new Tone.Chorus({ const chorus = new Tone.Chorus({
wet: 1, wet: 1,
}).toDestination().start(); })
const chorusChannel = new Tone.Channel({ volume: -60 }).connect(chorus); .toDestination()
chorusChannel.receive("chorus"); .start();
const chorusChannel = new Tone.Channel({ volume: -60 }).connect(
chorus
);
chorusChannel.receive("chorus");
const cheby = new Tone.Chebyshev(50).toDestination(); const cheby = new Tone.Chebyshev(50).toDestination();
const chebyChannel = new Tone.Channel({ volume: -60 }).connect(cheby); const chebyChannel = new Tone.Channel({ volume: -60 }).connect(
chebyChannel.receive("cheby"); cheby
);
chebyChannel.receive("cheby");
const reverb = new Tone.Reverb(3).toDestination(); const reverb = new Tone.Reverb(3).toDestination();
const reverbChannel = new Tone.Channel({ volume: -60 }).connect(reverb); const reverbChannel = new Tone.Channel({ volume: -60 }).connect(
reverbChannel.receive("reverb"); reverb
);
reverbChannel.receive("reverb");
// send the player to all of the channels // send the player to all of the channels
const playerChannel = new Tone.Channel().toDestination(); const playerChannel = new Tone.Channel().toDestination();
playerChannel.send("chorus"); playerChannel.send("chorus");
playerChannel.send("cheby"); playerChannel.send("cheby");
playerChannel.send("reverb"); playerChannel.send("reverb");
player.connect(playerChannel); player.connect(playerChannel);
drawer().add({ drawer()
tone: chorus, .add({
}).add({ tone: chorus,
tone: reverb, })
}).add({ .add({
tone: cheby, tone: reverb,
}); })
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start()); .add({
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop()); tone: cheby,
// bind the interface });
document.querySelector("[label=\"Chorus Send\"]").addEventListener("input", e => { document
chorusChannel.volume.value = parseFloat(e.target.value); .querySelector("tone-play-toggle")
}); .addEventListener("start", () => player.start());
document.querySelector("[label=\"Chebyshev Send\"]").addEventListener("input", e => { document
chebyChannel.volume.value = parseFloat(e.target.value); .querySelector("tone-play-toggle")
}); .addEventListener("stop", () => player.stop());
document.querySelector("[label=\"Reverb Send\"]").addEventListener("input", e => { // bind the interface
reverbChannel.volume.value = parseFloat(e.target.value); document
}); .querySelector('[label="Chorus Send"]')
</script> .addEventListener("input", (e) => {
</body> chorusChannel.volume.value = parseFloat(e.target.value);
});
document
.querySelector('[label="Chebyshev Send"]')
.addEventListener("input", (e) => {
chebyChannel.volume.value = parseFloat(e.target.value);
});
document
.querySelector('[label="Reverb Send"]')
.addEventListener("input", (e) => {
reverbChannel.volume.value = parseFloat(e.target.value);
});
</script>
</body>
</html> </html>

151
examples/envelope.html
View file

@ -1,71 +1,100 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Envelope</title> <title>Envelope</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
</head> <script src="../build/Tone.js"></script>
<body> <script src="./js/tone-ui.js"></script>
<style type="text/css"> <script src="./js/components.js"></script>
img { </head>
display: block; <body>
margin: 5px auto; <style type="text/css">
width: 300px!important; img {
} display: block;
margin: 5px auto;
width: 300px !important;
}
tone-trigger { tone-trigger {
margin-bottom: 10px; margin-bottom: 10px;
} }
</style> </style>
<tone-example label="Envelope"> <tone-example label="Envelope">
<div slot="explanation"> <div slot="explanation">
Envelopes ramp amplitude, frequency or any other parameter over time. Envelopes ramp amplitude, frequency or any other parameter over
<a href="https://tonejs.github.io/docs/Envelope">Tone.Envelope</a> and the classes that extend it time.
implement an <a href="https://en.wikipedia.org/wiki/Synthesizer#ADSR_envelope" target="_blank">ADSR</a> envelope type <a href="https://tonejs.github.io/docs/latest/classes/Envelope"
which splits its ramp into four distinct phases: Attack, Decay, Sustain, Release. >Tone.Envelope</a
<img src="https://upload.wikimedia.org/wikipedia/commons/e/ea/ADSR_parameter.svg"> >
</div> and the classes that extend it implement an
<a
href="https://en.wikipedia.org/wiki/Synthesizer#ADSR_envelope"
target="_blank"
>ADSR</a
>
envelope type which splits its ramp into four distinct phases:
Attack, Decay, Sustain, Release.
<img
src="https://upload.wikimedia.org/wikipedia/commons/e/ea/ADSR_parameter.svg"
/>
</div>
<div id="content"> <div id="content">
<tone-momentary-button></tone-momentary-button> <tone-momentary-button></tone-momentary-button>
</div> </div>
</tone-example>
</tone-example> <script type="text/javascript">
const env = new Tone.AmplitudeEnvelope({
attack: 0.11,
decay: 0.21,
sustain: 0.5,
release: 1.2,
}).toDestination();
<script type="text/javascript"> // create an oscillator and connect it to the envelope
const env = new Tone.AmplitudeEnvelope({ const osc = new Tone.Oscillator({
attack: 0.11, partials: [3, 2, 1],
decay: 0.21, type: "custom",
sustain: 0.5, frequency: "C#4",
release: 1.2 volume: -8,
}).toDestination(); })
.connect(env)
.start();
// create an oscillator and connect it to the envelope // bind the interface
const osc = new Tone.Oscillator({ drawer()
partials: [3, 2, 1], .add({
type: "custom", tone: env,
frequency: "C#4", name: "Envelope",
volume: -8, })
}).connect(env).start(); .add({
tone: osc,
});
// bind the interface document
drawer().add({ .querySelector("tone-momentary-button")
tone: env, .addEventListener("down", (e) => env.triggerAttack());
name: "Envelope" document
}).add({ .querySelector("tone-momentary-button")
tone: osc, .addEventListener("up", (e) => env.triggerRelease());
}); </script>
</body>
document.querySelector("tone-momentary-button").addEventListener("down", e => env.triggerAttack());
document.querySelector("tone-momentary-button").addEventListener("up", e => env.triggerRelease());
</script>
</body>
</html> </html>

302
examples/events.html
View file

@ -1,143 +1,197 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Events</title> <title>Events</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
</head> <script src="../build/Tone.js"></script>
<body> <script src="./js/tone-ui.js"></script>
<tone-example label="Events"> <script src="./js/components.js"></script>
<div slot="explanation"> </head>
Tone's Event classes (<a href="https://tonejs.github.io/docs/ToneEvent">Tone.ToneEvent</a>, <body>
<a href="https://tonejs.github.io/docs/Loop">Tone.Loop</a>, <tone-example label="Events">
<a href="https://tonejs.github.io/docs/Part">Tone.Part</a> and <div slot="explanation">
<a href="https://tonejs.github.io/docs/Sequence">Tone.Sequence</a>) Tone's Event classes (<a
simplify scheduling events along the Transport. Each class abstracts away calls to href="https://tonejs.github.io/docs/latest/classes/ToneEvent"
<a href="https://tonejs.github.io/docs/Transport.schedule">Transport.schedule</a> or >Tone.ToneEvent</a
<a href="https://tonejs.github.io/docs/Transport.scheduleRepeat">scheduleRepeat</a> >,
and lets you create precise, rhythmic events which are startable, stoppable and loopable. <a href="https://tonejs.github.io/docs/latest/classes/Loop"
(note that ToneEvent was called <a href="https://tonejs.github.io/docs/Event">Event</a> before Tone.js 14.x) >Tone.Loop</a
</div> >,
<a href="https://tonejs.github.io/docs/latest/classes/Part"
>Tone.Part</a
>
and
<a href="https://tonejs.github.io/docs/latest/classes/Sequence"
>Tone.Sequence</a
>) simplify scheduling events along the Transport. Each class
abstracts away calls to
<a
href="https://tonejs.github.io/docs/latest/classes/Transport.schedule"
>Transport.schedule</a
>
or
<a
href="https://tonejs.github.io/docs/latest/classes/Transport.scheduleRepeat"
>scheduleRepeat</a
>
and lets you create precise, rhythmic events which are
startable, stoppable and loopable. (note that ToneEvent was
called
<a href="https://tonejs.github.io/docs/latest/classes/Event"
>Event</a
>
before Tone.js 14.x)
</div>
<div id="content"> <div id="content">
<tone-play-toggle></tone-play-toggle> <tone-play-toggle></tone-play-toggle>
</div> </div>
</tone-example> </tone-example>
<script type="text/javascript"> <script type="text/javascript">
/** /**
* KICK * KICK
*/ */
const kick = new Tone.MembraneSynth({ const kick = new Tone.MembraneSynth({
envelope: { envelope: {
sustain: 0, sustain: 0,
attack: 0.02, attack: 0.02,
decay: 0.8 decay: 0.8,
}, },
octaves: 10, octaves: 10,
pitchDecay: 0.01, pitchDecay: 0.01,
}).toDestination(); }).toDestination();
const kickPart = new Tone.Loop(((time) => { const kickPart = new Tone.Loop((time) => {
kick.triggerAttackRelease("C2", "8n", time); kick.triggerAttackRelease("C2", "8n", time);
}), "2n").start(0); }, "2n").start(0);
/** /**
* SNARE * SNARE
*/ */
const snare = new Tone.NoiseSynth({ const snare = new Tone.NoiseSynth({
volume: -10, volume: -10,
envelope: { envelope: {
attack: 0.001, attack: 0.001,
decay: 0.2, decay: 0.2,
sustain: 0 sustain: 0,
} },
}).toDestination(); }).toDestination();
const snarePart = new Tone.Loop(((time) => { const snarePart = new Tone.Loop((time) => {
snare.triggerAttack(time); snare.triggerAttack(time);
}), "2n").start("4n"); }, "2n").start("4n");
/** /**
* PIANO * PIANO
*/ */
const keys = new Tone.PolySynth(Tone.Synth, { const keys = new Tone.PolySynth(Tone.Synth, {
volume: -8, volume: -8,
oscillator: { oscillator: {
partials: [1, 2, 1], partials: [1, 2, 1],
}, },
}).toDestination(); }).toDestination();
const cChord = ["C4", "E4", "G4", "B4"]; const cChord = ["C4", "E4", "G4", "B4"];
const dChord = ["D4", "F4", "A4", "C5"]; const dChord = ["D4", "F4", "A4", "C5"];
const gChord = ["B3", "D4", "E4", "A4"]; const gChord = ["B3", "D4", "E4", "A4"];
const pianoPart = new Tone.Part(((time, chord) => { const pianoPart = new Tone.Part(
keys.triggerAttackRelease(chord, "8n", time); (time, chord) => {
}), [["0:0:2", cChord], ["0:1", cChord], ["0:1:3", dChord], ["0:2:2", cChord], ["0:3", cChord], ["0:3:2", gChord]]).start("2m"); keys.triggerAttackRelease(chord, "8n", time);
},
[
["0:0:2", cChord],
["0:1", cChord],
["0:1:3", dChord],
["0:2:2", cChord],
["0:3", cChord],
["0:3:2", gChord],
]
).start("2m");
pianoPart.loop = true; pianoPart.loop = true;
pianoPart.loopEnd = "1m"; pianoPart.loopEnd = "1m";
pianoPart.humanize = true; pianoPart.humanize = true;
/** /**
* BASS * BASS
*/ */
const bass = new Tone.MonoSynth({ const bass = new Tone.MonoSynth({
volume: -10, volume: -10,
envelope: { envelope: {
attack: 0.1, attack: 0.1,
decay: 0.3, decay: 0.3,
release: 2, release: 2,
}, },
filterEnvelope: { filterEnvelope: {
attack: 0.001, attack: 0.001,
decay: 0.01, decay: 0.01,
sustain: 0.5, sustain: 0.5,
baseFrequency: 200, baseFrequency: 200,
octaves: 2.6 octaves: 2.6,
} },
}).toDestination(); }).toDestination();
const bassPart = new Tone.Sequence(((time, note) => { const bassPart = new Tone.Sequence(
bass.triggerAttackRelease(note, "16n", time); (time, note) => {
}), ["C2", ["C3", ["C3", "D2"]], "E2", ["D2", "A1"]], "4n").start(0); bass.triggerAttackRelease(note, "16n", time);
},
["C2", ["C3", ["C3", "D2"]], "E2", ["D2", "A1"]],
"4n"
).start(0);
bassPart.probability = 0.9; bassPart.probability = 0.9;
// set the transport // set the transport
Tone.Transport.bpm.value = 90; Tone.Transport.bpm.value = 90;
drawer().add({ drawer()
name: "Kick", .add({
tone: kick, name: "Kick",
open: false, tone: kick,
}).add({ open: false,
name: "Snare", })
tone: snare, .add({
open: false, name: "Snare",
}).add({ tone: snare,
name: "Bass", open: false,
tone: bass, })
open: false, .add({
}).add({ name: "Bass",
name: "Keys", tone: bass,
tone: keys, open: false,
open: false, })
}); .add({
name: "Keys",
tone: keys,
open: false,
});
// bind the interface // bind the interface
document.querySelector("tone-play-toggle").addEventListener("start", e => Tone.Transport.start()); document
document.querySelector("tone-play-toggle").addEventListener("stop", e => Tone.Transport.stop()); .querySelector("tone-play-toggle")
.addEventListener("start", (e) => Tone.Transport.start());
</script> document
</body> .querySelector("tone-play-toggle")
.addEventListener("stop", (e) => Tone.Transport.stop());
</script>
</body>
</html> </html>

117
examples/fmSynth.html
View file

@ -1,59 +1,74 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>FMSynth</title> <title>FMSynth</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
</head> <script src="../build/Tone.js"></script>
<body> <script src="./js/tone-ui.js"></script>
<tone-example label="FMSynth"> <script src="./js/components.js"></script>
<div slot="explanation"> </head>
<a href="https://tonejs.github.io/docs/FMSynth">Tone.FMSynth</a> <body>
is composed of two <tone-example label="FMSynth">
<a href="https://tonejs.github.io/docs/Synth">Tone.Synths</a> <div slot="explanation">
where one Tone.Synth modulates the frequency of a second Tone.Synth. <a href="https://tonejs.github.io/docs/latest/classes/FMSynth"
</div> >Tone.FMSynth</a
>
is composed of two
<a href="https://tonejs.github.io/docs/latest/classes/Synth"
>Tone.Synths</a
>
where one Tone.Synth modulates the frequency of a second
Tone.Synth.
</div>
<div id="content"> <div id="content"></div>
</div> </tone-example>
</tone-example>
<script type="text/javascript"> <script type="text/javascript">
const synth = new Tone.FMSynth({ const synth = new Tone.FMSynth({
modulationIndex: 12.22, modulationIndex: 12.22,
envelope: { envelope: {
attack: 0.01, attack: 0.01,
decay: 0.2 decay: 0.2,
}, },
modulation: { modulation: {
type: "square" type: "square",
}, },
modulationEnvelope: { modulationEnvelope: {
attack: 0.2, attack: 0.2,
decay: 0.01 decay: 0.01,
} },
}).toDestination(); }).toDestination();
piano({ piano({
tone: synth, tone: synth,
parent: document.querySelector("#content"), parent: document.querySelector("#content"),
noteon: (note) => synth.triggerAttack(note.name), noteon: (note) => synth.triggerAttack(note.name),
noteoff: (note) => synth.triggerRelease() noteoff: (note) => synth.triggerRelease(),
}); });
ui({ ui({
tone: synth, tone: synth,
name: "FMSynth", name: "FMSynth",
parent: document.querySelector("#content"), parent: document.querySelector("#content"),
}); });
</script> </script>
</body> </body>
</html> </html>

132
examples/grainPlayer.html
View file

@ -1,65 +1,87 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Grain Player</title> <title>Grain Player</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
</head> <script src="../build/Tone.js"></script>
<body> <script src="./js/tone-ui.js"></script>
<style type="text/css"> <script src="./js/components.js"></script>
tone-play-toggle, tone-fft { </head>
margin-bottom: 10px; <body>
} <style type="text/css">
tone-play-toggle,
tone-fft {
margin-bottom: 10px;
}
tone-fft { tone-fft {
background-color: black; background-color: black;
height: 40px; height: 40px;
width: 100%; width: 100%;
border-radius: 20px; border-radius: 20px;
} }
</style> </style>
<tone-example label="Granular Synthesis"> <tone-example label="Granular Synthesis">
<div slot="explanation"> <div slot="explanation">
<a href="https://tonejs.github.io/docs/GrainPlayer">Tone.GrainPlayer</a> uses <a
<a href="https://en.wikipedia.org/wiki/Granular_synthesis">granular synthesis</a> href="https://tonejs.github.io/docs/latest/classes/GrainPlayer"
to enable you to adjust pitch and playback rate independently. The grainSize is the >Tone.GrainPlayer</a
amount of time each small chunk of audio is played for and the overlap is the >
amount of crossfading transition time between successive grains. uses
</div> <a href="https://en.wikipedia.org/wiki/Granular_synthesis"
>granular synthesis</a
>
to enable you to adjust pitch and playback rate independently.
The grainSize is the amount of time each small chunk of audio is
played for and the overlap is the amount of crossfading
transition time between successive grains.
</div>
<tone-loader></tone-loader> <tone-loader></tone-loader>
<div id="content"> <div id="content">
<tone-play-toggle></tone-play-toggle> <tone-play-toggle></tone-play-toggle>
</div> </div>
</tone-example> </tone-example>
<script type="text/javascript"> <script type="text/javascript">
// the player // the player
const player = new Tone.GrainPlayer({ const player = new Tone.GrainPlayer({
url: "https://tonejs.github.io/audio/berklee/arpeggio3crazy.mp3", url: "https://tonejs.github.io/audio/berklee/arpeggio3crazy.mp3",
loop: true, loop: true,
grainSize: 0.1, grainSize: 0.1,
overlap: 0.05, overlap: 0.05,
}).toDestination(); }).toDestination();
ui({ ui({
parent: document.querySelector("#content"), parent: document.querySelector("#content"),
tone: player, tone: player,
}); });
// bind the interface // bind the interface
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start()); document
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop()); .querySelector("tone-play-toggle")
.addEventListener("start", () => player.start());
</script> document
</body> .querySelector("tone-play-toggle")
.addEventListener("stop", () => player.stop());
</script>
</body>
</html> </html>

551
examples/jump.html
View file

@ -1,268 +1,305 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>FatOscillator</title> <title>FatOscillator</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
</head> <script src="../build/Tone.js"></script>
<body> <script src="./js/tone-ui.js"></script>
<style type="text/css"> <script src="./js/components.js"></script>
tone-play-toggle { </head>
margin-bottom: 10px; <body>
} <style type="text/css">
</style> tone-play-toggle {
<tone-example label="Supersaw"> margin-bottom: 10px;
<div slot="explanation"> }
<a href="https://tonejs.github.io/docs/FatOscillator">Tone.FatOscillator</a> creates multiple oscillators </style>
and detunes them slightly from each other to thicken the sound. The <code>count</code> parameter sets <tone-example label="Supersaw">
the number of oscillators and <code>spread</code> sets the total spread (in cents) between the oscillators. <div slot="explanation">
<br><br> <a
FatOscillator is also available in <a href="https://tonejs.github.io/docs/OmniOscillator">Tone.OmniOscillator</a> href="https://tonejs.github.io/docs/latest/classes/FatOscillator"
by prefixing another type with "fat", then use the count and spread to control the number and detune of the oscillators. To create a "supersaw": <code>omniOscillator.type = "fatsawtooth"</code>. >Tone.FatOscillator</a
<br><br> >
<a href="http://www.midiworld.com/files/1121/">Jump by Van Halen MIDI</a> converted using <a href="https://tonejs.github.io/Midi/">@tonejs/midi</a> creates multiple oscillators and detunes them slightly from each
</div> other to thicken the sound. The <code>count</code> parameter
sets the number of oscillators and <code>spread</code> sets the
total spread (in cents) between the oscillators. <br /><br />
FatOscillator is also available in
<a
href="https://tonejs.github.io/docs/latest/classes/OmniOscillator"
>Tone.OmniOscillator</a
>
by prefixing another type with "fat", then use the count and
spread to control the number and detune of the oscillators. To
create a "supersaw":
<code>omniOscillator.type = "fatsawtooth"</code>. <br /><br />
<a href="http://www.midiworld.com/files/1121/"
>Jump by Van Halen MIDI</a
>
converted using
<a href="https://tonejs.github.io/Midi/">@tonejs/midi</a>
</div>
<div id="content"> <div id="content">
<tone-play-toggle></tone-play-toggle> <tone-play-toggle></tone-play-toggle>
</div> </div>
</tone-example> </tone-example>
<script type="text/javascript"> <script type="text/javascript">
const synth = new Tone.PolySynth(Tone.Synth, { const synth = new Tone.PolySynth(Tone.Synth, {
oscillator: { oscillator: {
type: "fatsawtooth", type: "fatsawtooth",
count: 3, count: 3,
spread: 30 spread: 30,
}, },
envelope: { envelope: {
attack: 0.01, attack: 0.01,
decay: 0.1, decay: 0.1,
sustain: 0.5, sustain: 0.5,
release: 0.4, release: 0.4,
attackCurve: "exponential" attackCurve: "exponential",
}, },
}).toDestination(); }).toDestination();
// Van Halen - Jump MIDI from http://www.midiworld.com/files/1121/ // Van Halen - Jump MIDI from http://www.midiworld.com/files/1121/
// converted using // converted using
const part = new Tone.Part(((time, note) => { const part = new Tone.Part(
synth.triggerAttackRelease(note.noteName, note.duration, time, note.velocity); (time, note) => {
}), [{ synth.triggerAttackRelease(
time: "192i", note.noteName,
noteName: "G4", note.duration,
velocity: 0.8110236220472441, time,
duration: "104i" note.velocity
}, );
{ },
time: "192i", [
noteName: "B4", {
velocity: 0.7874015748031497, time: "192i",
duration: "104i" noteName: "G4",
}, velocity: 0.8110236220472441,
{ duration: "104i",
time: "192i", },
noteName: "D5", {
velocity: 0.8031496062992126, time: "192i",
duration: "104i" noteName: "B4",
}, velocity: 0.7874015748031497,
{ duration: "104i",
time: "480i", },
noteName: "G4", {
velocity: 0.7559055118110236, time: "192i",
duration: "104i" noteName: "D5",
}, velocity: 0.8031496062992126,
{ duration: "104i",
time: "480i", },
noteName: "C5", {
velocity: 0.6850393700787402, time: "480i",
duration: "104i" noteName: "G4",
}, velocity: 0.7559055118110236,
{ duration: "104i",
time: "480i", },
noteName: "E5", {
velocity: 0.6771653543307087, time: "480i",
duration: "104i" noteName: "C5",
}, velocity: 0.6850393700787402,
{ duration: "104i",
time: "768i", },
noteName: "F4", {
velocity: 0.8661417322834646, time: "480i",
duration: "104i" noteName: "E5",
}, velocity: 0.6771653543307087,
{ duration: "104i",
time: "768i", },
noteName: "A4", {
velocity: 0.8346456692913385, time: "768i",
duration: "104i" noteName: "F4",
}, velocity: 0.8661417322834646,
{ duration: "104i",
time: "768i", },
noteName: "C5", {
velocity: 0.8188976377952756, time: "768i",
duration: "104i" noteName: "A4",
}, velocity: 0.8346456692913385,
{ duration: "104i",
time: "1056i", },
noteName: "F4", {
velocity: 0.7007874015748031, time: "768i",
duration: "104i" noteName: "C5",
}, velocity: 0.8188976377952756,
{ duration: "104i",
time: "1056i", },
noteName: "A4", {
velocity: 0.6850393700787402, time: "1056i",
duration: "104i" noteName: "F4",
}, velocity: 0.7007874015748031,
{ duration: "104i",
time: "1056i", },
noteName: "C5", {
velocity: 0.6614173228346457, time: "1056i",
duration: "104i" noteName: "A4",
}, velocity: 0.6850393700787402,
{ duration: "104i",
time: "1248i", },
noteName: "G4", {
velocity: 0.6771653543307087, time: "1056i",
duration: "104i" noteName: "C5",
}, velocity: 0.6614173228346457,
{ duration: "104i",
time: "1248i", },
noteName: "B4", {
velocity: 0.6771653543307087, time: "1248i",
duration: "104i" noteName: "G4",
}, velocity: 0.6771653543307087,
{ duration: "104i",
time: "1248i", },
noteName: "D5", {
velocity: 0.7165354330708661, time: "1248i",
duration: "104i" noteName: "B4",
}, velocity: 0.6771653543307087,
{ duration: "104i",
time: "1440i", },
noteName: "G4", {
velocity: 0.8818897637795275, time: "1248i",
duration: "248i" noteName: "D5",
}, velocity: 0.7165354330708661,
{ duration: "104i",
time: "1440i", },
noteName: "B4", {
velocity: 0.84251968503937, time: "1440i",
duration: "248i" noteName: "G4",
}, velocity: 0.8818897637795275,
{ duration: "248i",
time: "1440i", },
noteName: "D5", {
velocity: 0.8818897637795275, time: "1440i",
duration: "248i" noteName: "B4",
}, velocity: 0.84251968503937,
{ duration: "248i",
time: "1728i", },
noteName: "G4", {
velocity: 0.8267716535433071, time: "1440i",
duration: "104i" noteName: "D5",
}, velocity: 0.8818897637795275,
{ duration: "248i",
time: "1728i", },
noteName: "C5", {
velocity: 0.8031496062992126, time: "1728i",
duration: "104i" noteName: "G4",
}, velocity: 0.8267716535433071,
{ duration: "104i",
time: "1728i", },
noteName: "E5", {
velocity: 0.8188976377952756, time: "1728i",
duration: "104i" noteName: "C5",
}, velocity: 0.8031496062992126,
{ duration: "104i",
time: "2016i", },
noteName: "F4", {
velocity: 0.7086614173228346, time: "1728i",
duration: "104i" noteName: "E5",
}, velocity: 0.8188976377952756,
{ duration: "104i",
time: "2016i", },
noteName: "A4", {
velocity: 0.7244094488188977, time: "2016i",
duration: "104i" noteName: "F4",
}, velocity: 0.7086614173228346,
{ duration: "104i",
time: "2016i", },
noteName: "C5", {
velocity: 0.7007874015748031, time: "2016i",
duration: "104i" noteName: "A4",
}, velocity: 0.7244094488188977,
{ duration: "104i",
time: "2208i", },
noteName: "C4", {
velocity: 0.9921259842519685, time: "2016i",
duration: "296i" noteName: "C5",
}, velocity: 0.7007874015748031,
{ duration: "104i",
time: "2208i", },
noteName: "F4", {
velocity: 0.968503937007874, time: "2208i",
duration: "200i" noteName: "C4",
}, velocity: 0.9921259842519685,
{ duration: "296i",
time: "2208i", },
noteName: "A4", {
velocity: 0.9606299212598425, time: "2208i",
duration: "208i" noteName: "F4",
}, velocity: 0.968503937007874,
{ duration: "200i",
time: "2400i", },
noteName: "E4", {
velocity: 0.7559055118110236, time: "2208i",
duration: "104i" noteName: "A4",
}, velocity: 0.9606299212598425,
{ duration: "208i",
time: "2400i", },
noteName: "G4", {
velocity: 0.7007874015748031, time: "2400i",
duration: "104i" noteName: "E4",
}, velocity: 0.7559055118110236,
{ duration: "104i",
time: "2592i", },
noteName: "C4", {
velocity: 0.968503937007874, time: "2400i",
duration: "488i" noteName: "G4",
}, velocity: 0.7007874015748031,
{ duration: "104i",
time: "2592i", },
noteName: "D4", {
velocity: 0.9448818897637795, time: "2592i",
duration: "488i" noteName: "C4",
}, velocity: 0.968503937007874,
{ duration: "488i",
time: "2592i", },
noteName: "G4", {
velocity: 0.937007874015748, time: "2592i",
duration: "488i" noteName: "D4",
} velocity: 0.9448818897637795,
]).start(0); duration: "488i",
},
{
time: "2592i",
noteName: "G4",
velocity: 0.937007874015748,
duration: "488i",
},
]
).start(0);
part.loop = true; part.loop = true;
part.loopEnd = "4m"; part.loopEnd = "4m";
Tone.Transport.bpm.value = 132; Tone.Transport.bpm.value = 132;
drawer().add({ drawer().add({
tone: synth, tone: synth,
}); });
// bind the interface // bind the interface
document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start()); document
document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop()); .querySelector("tone-play-toggle")
.addEventListener("start", () => Tone.Transport.start());
</script> document
</body> .querySelector("tone-play-toggle")
.addEventListener("stop", () => Tone.Transport.stop());
</script>
</body>
</html> </html>

232
examples/lfoEffects.html
View file

@ -1,87 +1,169 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>LFO Effects</title> <title>LFO Effects</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
</head> <script src="../build/Tone.js"></script>
<body> <script src="./js/tone-ui.js"></script>
<tone-example label="LFO Effects"> <script src="./js/components.js"></script>
<div slot="explanation"> </head>
These effects use an <a href="https://tonejs.github.io/docs/LFO">LFO</a> (Low Frequency Oscillator) to modulate the effect. Click and drag the dot to change the frequency and depth of the effect. <body>
<br><br> <tone-example label="LFO Effects">
Docs on <a href="https://tonejs.github.io/docs/AutoPanner">Tone.AutoPanner</a>, <div slot="explanation">
<a href="https://tonejs.github.io/docs/AutoFilter">Tone.AutoFilter</a>, and These effects use an
<a href="https://tonejs.github.io/docs/Tremolo">Tone.Tremolo</a> <a href="https://tonejs.github.io/docs/latest/classes/LFO"
</div> >LFO</a
>
(Low Frequency Oscillator) to modulate the effect. Click and
drag the dot to change the frequency and depth of the effect.
<br /><br />
Docs on
<a
href="https://tonejs.github.io/docs/latest/classes/AutoPanner"
>Tone.AutoPanner</a
>,
<a
href="https://tonejs.github.io/docs/latest/classes/AutoFilter"
>Tone.AutoFilter</a
>, and
<a href="https://tonejs.github.io/docs/latest/classes/Tremolo"
>Tone.Tremolo</a
>
</div>
<div id="content"> <div id="content">
<tone-slider label="Panner" id="panner" units="hz" value="4" step="0.5" min="1" max="15"></tone-slider> <tone-slider
<tone-play-toggle id="osc0"></tone-play-toggle> label="Panner"
<tone-slider label="Filter" id="filter" units="hz" value="4" step="0.5" min="1" max="15"></tone-slider> id="panner"
<tone-play-toggle id="osc1"></tone-play-toggle> units="hz"
<tone-slider label="Tremolo" id="tremolo" units="hz" value="4" step="0.5" min="1" max="15"></tone-slider> value="4"
<tone-play-toggle id="osc2"></tone-play-toggle> step="0.5"
</tone-content> min="1"
</tone-example> max="15"
></tone-slider>
<tone-play-toggle id="osc0"></tone-play-toggle>
<tone-slider
label="Filter"
id="filter"
units="hz"
value="4"
step="0.5"
min="1"
max="15"
></tone-slider>
<tone-play-toggle id="osc1"></tone-play-toggle>
<tone-slider
label="Tremolo"
id="tremolo"
units="hz"
value="4"
step="0.5"
min="1"
max="15"
></tone-slider>
<tone-play-toggle id="osc2"></tone-play-toggle>
</div>
</tone-example>
<script type="text/javascript"> <script type="text/javascript">
// AutoPanner - a panning modulation effect // AutoPanner - a panning modulation effect
const panner = new Tone.AutoPanner({ const panner = new Tone.AutoPanner({
frequency: 4, frequency: 4,
depth: 1 depth: 1,
}).toDestination().start(); })
.toDestination()
.start();
// AutoFilter - a filter modulation effect // AutoFilter - a filter modulation effect
const filter = new Tone.AutoFilter({ const filter = new Tone.AutoFilter({
frequency: 2, frequency: 2,
depth: 0.6 depth: 0.6,
}).toDestination().start(); })
.toDestination()
.start();
// Tremolo - an amplitude modulation effect // Tremolo - an amplitude modulation effect
const tremolo = new Tone.Tremolo({ const tremolo = new Tone.Tremolo({
frequency: 0.6, frequency: 0.6,
depth: 0.7 depth: 0.7,
}).toDestination().start(); })
.toDestination()
.start();
// the input oscillators // the input oscillators
const pannerOsc = new Tone.Oscillator({ const pannerOsc = new Tone.Oscillator({
volume: -12, volume: -12,
type: "square6", type: "square6",
frequency: "C4" frequency: "C4",
}).connect(panner); }).connect(panner);
const filterOsc = new Tone.Oscillator({ const filterOsc = new Tone.Oscillator({
volume: -12, volume: -12,
type: "square6", type: "square6",
frequency: "E4" frequency: "E4",
}).connect(filter); }).connect(filter);
const tremoloOsc = new Tone.Oscillator({ const tremoloOsc = new Tone.Oscillator({
volume: -12, volume: -12,
type: "square6", type: "square6",
frequency: "A4" frequency: "A4",
}).connect(tremolo); }).connect(tremolo);
// bind the interface // bind the interface
document.querySelector("#osc0").addEventListener("start", () => pannerOsc.start()); document
document.querySelector("#osc0").addEventListener("stop", () => pannerOsc.stop()); .querySelector("#osc0")
document.querySelector("#panner").addEventListener("input", (e) => panner.frequency.value = parseFloat(e.target.value)); .addEventListener("start", () => pannerOsc.start());
document.querySelector("#osc1").addEventListener("start", () => filterOsc.start()); document
document.querySelector("#osc1").addEventListener("stop", () => filterOsc.stop()); .querySelector("#osc0")
document.querySelector("#filter").addEventListener("input", (e) => filter.frequency.value = parseFloat(e.target.value)); .addEventListener("stop", () => pannerOsc.stop());
document.querySelector("#osc2").addEventListener("start", () => tremoloOsc.start()); document
document.querySelector("#osc2").addEventListener("stop", () => tremoloOsc.stop()); .querySelector("#panner")
document.querySelector("#tremolo").addEventListener("input", (e) => tremolo.frequency.value = parseFloat(e.target.value)); .addEventListener(
</script> "input",
(e) => (panner.frequency.value = parseFloat(e.target.value))
</body> );
document
.querySelector("#osc1")
.addEventListener("start", () => filterOsc.start());
document
.querySelector("#osc1")
.addEventListener("stop", () => filterOsc.stop());
document
.querySelector("#filter")
.addEventListener(
"input",
(e) => (filter.frequency.value = parseFloat(e.target.value))
);
document
.querySelector("#osc2")
.addEventListener("start", () => tremoloOsc.start());
document
.querySelector("#osc2")
.addEventListener("stop", () => tremoloOsc.stop());
document
.querySelector("#tremolo")
.addEventListener(
"input",
(e) =>
(tremolo.frequency.value = parseFloat(e.target.value))
);
</script>
</body>
</html> </html>

112
examples/meter.html
View file

@ -1,57 +1,75 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Meter</title> <title>Meter</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
</head> <script src="../build/Tone.js"></script>
<body> <script src="./js/tone-ui.js"></script>
<tone-example label="Meter"> <script src="./js/components.js"></script>
<tone-loader></tone-loader> </head>
<div slot="explanation"> <body>
<a href="https://tonejs.github.io/docs/Meter" target="_blank">Tone.Meter</a> <tone-example label="Meter">
gives you the level of the incoming signal in decibels. <tone-loader></tone-loader>
</div> <div slot="explanation">
<a
href="https://tonejs.github.io/docs/latest/classes/Meter"
target="_blank"
>Tone.Meter</a
>
gives you the level of the incoming signal in decibels.
</div>
<div id="content"> <div id="content">
<tone-play-toggle></tone-play-toggle> <tone-play-toggle></tone-play-toggle>
</div> </div>
</tone-example> </tone-example>
<script type="text/javascript"> <script type="text/javascript">
const player = new Tone.Player({ const player = new Tone.Player({
url: "https://tonejs.github.io/audio/berklee/Resonant_FM_laser1.mp3", url: "https://tonejs.github.io/audio/berklee/Resonant_FM_laser1.mp3",
loop: true loop: true,
}).toDestination(); }).toDestination();
const toneMeter = new Tone.Meter({ const toneMeter = new Tone.Meter({
channelCount: 2, channelCount: 2,
}); });
player.connect(toneMeter); player.connect(toneMeter);
meter({ meter({
tone: toneMeter, tone: toneMeter,
parent: document.querySelector("#content") parent: document.querySelector("#content"),
}); });
ui({ ui({
tone: player, tone: player,
name: "Player", name: "Player",
parent: document.querySelector("#content") parent: document.querySelector("#content"),
}); });
// bind the interface // bind the interface
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start()); document
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop()); .querySelector("tone-play-toggle")
.addEventListener("start", () => player.start());
</script> document
</body> .querySelector("tone-play-toggle")
.addEventListener("stop", () => player.stop());
</script>
</body>
</html> </html>

153
examples/mixer.html
View file

@ -1,74 +1,99 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Mixer</title> <title>Mixer</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
<style type="text/css"> <script src="../build/Tone.js"></script>
#tracks { <script src="./js/tone-ui.js"></script>
display: flex; <script src="./js/components.js"></script>
} <style type="text/css">
#tracks tone-channel { #tracks {
flex-grow: 1; display: flex;
margin: 5px; }
width: 20%; #tracks tone-channel {
} flex-grow: 1;
</style> margin: 5px;
</head> width: 20%;
<body> }
<tone-example label="Channel"> </style>
<div slot="explanation"> </head>
<a href="https://tonejs.github.io/docs/Channel">Tone.Channel</a> provides a simple channel interface. It allows for panning and volume changes as well as the ability to <a href="https://tonejs.github.io/docs/Solo">solo</a> (exclude audio in other Tone.Channels). <body>
</div> <tone-example label="Channel">
<div slot="explanation">
<a href="https://tonejs.github.io/docs/latest/classes/Channel"
>Tone.Channel</a
>
provides a simple channel interface. It allows for panning and
volume changes as well as the ability to
<a href="https://tonejs.github.io/docs/latest/classes/Solo"
>solo</a
>
(exclude audio in other Tone.Channels).
</div>
<tone-loader></tone-loader> <tone-loader></tone-loader>
<div id="content"> <div id="content">
<tone-play-toggle></tone-play-toggle> <tone-play-toggle></tone-play-toggle>
</div> </div>
</tone-example> </tone-example>
<script type="text/javascript"> <script type="text/javascript">
function makeChannel(name, url, pan) { function makeChannel(name, url, pan) {
const channel = new Tone.Channel({ const channel = new Tone.Channel({
pan pan,
}).toDestination(); }).toDestination();
const player = new Tone.Player({ const player = new Tone.Player({
url: `https://tonejs.github.io/audio/berklee/${url}.mp3`, url: `https://tonejs.github.io/audio/berklee/${url}.mp3`,
loop: true loop: true,
}).sync().start(0); })
player.connect(channel); .sync()
.start(0);
player.connect(channel);
// add a UI element // add a UI element
ui({ ui({
name, name,
tone: channel, tone: channel,
parent: document.querySelector("#content") parent: document.querySelector("#content"),
});
}
// create a meter on the destination node
const toneMeter = new Tone.Meter({ channelCount: 2 });
Tone.Destination.chain(toneMeter);
meter({
tone: toneMeter,
parent: document.querySelector("#content"),
}); });
}
// create a meter on the destination node makeChannel("Guitar 0", "comping1", 1);
const toneMeter = new Tone.Meter({ channelCount: 2 }); makeChannel("Guitar 1", "comping2", -1);
Tone.Destination.chain(toneMeter); makeChannel("Guitar 2", "comping3", 0.25);
meter({ makeChannel("Guitar 3", "comping4", -0.25);
tone: toneMeter,
parent: document.querySelector("#content")
});
makeChannel("Guitar 0", "comping1", 1); document
makeChannel("Guitar 1", "comping2", -1); .querySelector("tone-play-toggle")
makeChannel("Guitar 2", "comping3", 0.25); .addEventListener("start", () => Tone.Transport.start());
makeChannel("Guitar 3", "comping4", -0.25); document
.querySelector("tone-play-toggle")
document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start()); .addEventListener("stop", () => Tone.Transport.stop());
document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop()); </script>
</script> </body>
</body>
</html> </html>

134
examples/monoSynth.html
View file

@ -1,69 +1,81 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>MonoSynth</title> <title>MonoSynth</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
</head> <script src="../build/Tone.js"></script>
<body> <script src="./js/tone-ui.js"></script>
<style> <script src="./js/components.js"></script>
tone-piano { </head>
margin-bottom: 10px; <body>
} <style>
</style> tone-piano {
<tone-example label="MonoSynth"> margin-bottom: 10px;
<div slot="explanation">
<a href="https://tonejs.github.io/docs/MonoSynth">Tone.MonoSynth</a>
is composed of one oscillator, one filter, and two envelopes.
Both envelopes are triggered simultaneously when a note is triggered.
</div>
<div id="content">
</div>
</tone-example>
<script type="text/javascript">
const synth = new Tone.PolySynth(Tone.MonoSynth, {
volume: -8,
oscillator: {
type: "square8"
},
envelope: {
attack: 0.05,
decay: 0.3,
sustain: 0.4,
release: 0.8,
},
filterEnvelope: {
attack: 0.001,
decay: 0.7,
sustain: 0.1,
release: 0.8,
baseFrequency: 300,
octaves: 4
} }
}).toDestination(); </style>
<tone-example label="MonoSynth">
<div slot="explanation">
<a href="https://tonejs.github.io/docs/latest/classes/MonoSynth"
>Tone.MonoSynth</a
>
is composed of one oscillator, one filter, and two envelopes.
Both envelopes are triggered simultaneously when a note is
triggered.
</div>
piano({ <div id="content"></div>
noteon: (note) => synth.triggerAttack(note.name), </tone-example>
noteoff: (note) => synth.triggerRelease(note.name),
parent: document.querySelector("#content")
});
ui({ <script type="text/javascript">
tone: synth, const synth = new Tone.PolySynth(Tone.MonoSynth, {
parent: document.querySelector("#content"), volume: -8,
name: "MonoSynth" oscillator: {
}); type: "square8",
},
envelope: {
attack: 0.05,
decay: 0.3,
sustain: 0.4,
release: 0.8,
},
filterEnvelope: {
attack: 0.001,
decay: 0.7,
sustain: 0.1,
release: 0.8,
baseFrequency: 300,
octaves: 4,
},
}).toDestination();
</script> piano({
</body> noteon: (note) => synth.triggerAttack(note.name),
noteoff: (note) => synth.triggerRelease(note.name),
parent: document.querySelector("#content"),
});
ui({
tone: synth,
parent: document.querySelector("#content"),
name: "MonoSynth",
});
</script>
</body>
</html> </html>

124
examples/noises.html
View file

@ -1,63 +1,81 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Noise</title> <title>Noise</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
</head> <script src="../build/Tone.js"></script>
<body> <script src="./js/tone-ui.js"></script>
<style> <script src="./js/components.js"></script>
tone-trigger, tone-oscilloscope { </head>
margin-bottom: 10px; <body>
} <style>
tone-oscilloscope { tone-trigger,
background-color: black; tone-oscilloscope {
height: 60px; margin-bottom: 10px;
width: 100%; }
} tone-oscilloscope {
</style> background-color: black;
<tone-example label="Noise"> height: 60px;
<div slot="explanation"> width: 100%;
<a href="https://tonejs.github.io/docs/Noise">Tone.Noise</a> }
has 3 different types of noise. Careful, it's loud! </style>
</div> <tone-example label="Noise">
<div slot="explanation">
<a href="https://tonejs.github.io/docs/latest/classes/Noise"
>Tone.Noise</a
>
has 3 different types of noise. Careful, it's loud!
</div>
<div id="content"> <div id="content">
<tone-momentary-button></tone-momentary-button> <tone-momentary-button></tone-momentary-button>
</div> </div>
</tone-example> </tone-example>
<script type="text/javascript"> <script type="text/javascript">
// make the noise and connect it to the output // make the noise and connect it to the output
const noise = new Tone.Noise({ const noise = new Tone.Noise({
volume: -10, volume: -10,
type: "brown" type: "brown",
}).toDestination(); }).toDestination();
const toneWaveform = new Tone.Waveform(); const toneWaveform = new Tone.Waveform();
noise.connect(toneWaveform); noise.connect(toneWaveform);
waveform({ waveform({
parent: document.querySelector("#content"), parent: document.querySelector("#content"),
tone: toneWaveform, tone: toneWaveform,
}); });
ui({ ui({
parent: document.querySelector("#content"), parent: document.querySelector("#content"),
tone: noise, tone: noise,
}); });
// bind the inteface // bind the inteface
document.querySelector("tone-momentary-button").addEventListener("down", () => noise.start()); document
document.querySelector("tone-momentary-button").addEventListener("up", () => noise.stop()); .querySelector("tone-momentary-button")
</script> .addEventListener("down", () => noise.start());
</body> document
.querySelector("tone-momentary-button")
.addEventListener("up", () => noise.stop());
</script>
</body>
</html> </html>

214
examples/offline.html
View file

@ -1,103 +1,139 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Offline</title> <title>Offline</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
<style type="text/css"> <script src="../build/Tone.js"></script>
tone-button { <script src="./js/tone-ui.js"></script>
margin-bottom: 10px; <script src="./js/components.js"></script>
} <style type="text/css">
</style> tone-button {
</head> margin-bottom: 10px;
<body> }
<tone-example label="Offline Rendering"> </style>
<tone-loader></tone-loader> </head>
<div slot="explanation"> <body>
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. <tone-example label="Offline Rendering">
<br><br> <tone-loader></tone-loader>
<a href="https://tonejs.github.io/docs/Tone#offline-static">Tone.Offline</a> docs. <div slot="explanation">
</div> 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/latest/functions/Offline.html"
>Tone.Offline</a
>
docs.
</div>
<div id="content"> <div id="content">
<tone-play-toggle disabled></tone-play-toggle> <tone-play-toggle disabled></tone-play-toggle>
</div> </div>
</tone-example> </tone-example>
<script type="text/javascript"> <script type="text/javascript">
// play the buffer with a Tone.Player when it's been generated // play the buffer with a Tone.Player when it's been generated
const player = new Tone.Player().toDestination(); const player = new Tone.Player().toDestination();
const renderingPromise = Tone.Offline(({ transport }) => { const renderingPromise = Tone.Offline(({ transport }) => {
const reverb = new Tone.Reverb().toDestination();
const reverb = new Tone.Reverb().toDestination(); const pannerA = new Tone.Panner(-1).connect(reverb);
const synthA = new Tone.Synth({
envelope: {
attack: 0.01,
decay: 5,
sustain: 0,
},
oscillator: {
type: "sawtooth4",
},
}).connect(pannerA);
const seqA = new Tone.Sequence(
(time, note) => {
synthA.triggerAttack(note, time);
},
["A4", "G4", "G#4", "F#4", "E4"],
"8n"
).start(0);
seqA.loop = false;
const pannerA = new Tone.Panner(-1).connect(reverb); const pannerB = new Tone.Panner(1).connect(reverb);
const synthA = new Tone.Synth({ const synthB = new Tone.Synth({
envelope: { envelope: {
attack: 0.01, attack: 0.001,
decay: 5, decay: 3,
sustain: 0 sustain: 0,
}, },
oscillator: { oscillator: {
type: "sawtooth4" type: "square8",
} },
}).connect(pannerA); }).connect(pannerB);
const seqA = new Tone.Sequence(((time, note) => { const seqB = new Tone.Sequence(
synthA.triggerAttack(note, time); (time, note) => {
}), ["A4", "G4", "G#4", "F#4", "E4"], "8n").start(0); synthB.triggerAttack(note, time);
seqA.loop = false; },
["G#4", "A4", "G4", "F4", "C4"],
"8n"
).start("16n");
seqB.loop = false;
const pannerB = new Tone.Panner(1).connect(reverb); const bass = new Tone.MonoSynth({
const synthB = new Tone.Synth({ envelope: {
envelope: { attack: 0.01,
attack: 0.001, decay: 3,
decay: 3, sustain: 0.1,
sustain: 0 },
}, }).toDestination();
oscillator: { const bassSeq = new Tone.Sequence(
type: "square8" (time, note) => {
} bass.triggerAttackRelease(note, "1n", time);
}).connect(pannerB); },
const seqB = new Tone.Sequence(((time, note) => { ["C2", "C2", "F1", "F1"],
synthB.triggerAttack(note, time); "4n"
}), ["G#4", "A4", "G4", "F4", "C4"], "8n").start("16n"); ).start(0);
seqB.loop = false; bassSeq.loop = false;
const bass = new Tone.MonoSynth({ transport.bpm.value = 150;
envelope: { transport.start();
attack: 0.01,
decay: 3,
sustain: 0.1
},
}).toDestination();
const bassSeq = new Tone.Sequence(((time, note) => {
bass.triggerAttackRelease(note, "1n", time);
}), ["C2", "C2", "F1", "F1"], "4n").start(0);
bassSeq.loop = false;
transport.bpm.value = 150; // return a promise
transport.start(); return reverb.ready;
}, 7);
// return a promise // set the buffer when it's done
return reverb.ready; renderingPromise.then((buffer) => (player.buffer = buffer));
}, 7); renderingPromise.then(
() =>
(document.querySelector("tone-play-toggle").disabled =
false)
);
// set the buffer when it's done document
renderingPromise.then(buffer => player.buffer = buffer); .querySelector("tone-play-toggle")
renderingPromise.then(() => document.querySelector("tone-play-toggle").disabled = false); .addEventListener("start", () => player.start());
document
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start()); .querySelector("tone-play-toggle")
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop()); .addEventListener("stop", () => player.stop());
</script>
</script> </body>
</body>
</html> </html>

108
examples/oscillator.html
View file

@ -1,53 +1,71 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Oscillator</title> <title>Oscillator</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
<style type="text/css"> <script src="../build/Tone.js"></script>
tone-play-toggle { <script src="./js/tone-ui.js"></script>
margin-bottom: 10px; <script src="./js/components.js"></script>
} <style type="text/css">
</style> tone-play-toggle {
</head> margin-bottom: 10px;
<body> }
<tone-example label="Oscillator"> </style>
<div slot="explanation"> </head>
The oscillator has 4 basic types which can be altered by setting the number <body>
of partials and partials array. <tone-example label="Oscillator">
<br><br> <div slot="explanation">
<a href="https://tonejs.github.io/docs/Oscillator">Tone.Oscillator</a> docs. The oscillator has 4 basic types which can be altered by setting
</div> the number of partials and partials array.
<br /><br />
<a
href="https://tonejs.github.io/docs/latest/classes/Oscillator"
>Tone.Oscillator</a
>
docs.
</div>
<div id="content"> <div id="content">
<tone-momentary-button></tone-momentary-button> <tone-momentary-button></tone-momentary-button>
</div> </div>
</tone-example> </tone-example>
<script type="text/javascript">
const osc = new Tone.Oscillator({
type: "square",
frequency: 440,
volume: -16,
}).toDestination();
<script type="text/javascript"> ui({
const osc = new Tone.Oscillator({ tone: osc,
type: "square", parent: document.querySelector("#content"),
frequency: 440, });
volume: -16
}).toDestination();
ui({ // bind the interface
tone: osc, document
parent: document.querySelector("#content") .querySelector("tone-momentary-button")
}); .addEventListener("down", () => osc.start());
document
// bind the interface .querySelector("tone-momentary-button")
document.querySelector("tone-momentary-button").addEventListener("down", () => osc.start()); .addEventListener("up", () => osc.stop());
document.querySelector("tone-momentary-button").addEventListener("up", () => osc.stop()); </script>
</script> </body>
</body>
</html> </html>

109
examples/pingPongDelay.html
View file

@ -1,54 +1,77 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Ping Pong Delay</title> <title>Ping Pong Delay</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
</head> <script src="../build/Tone.js"></script>
<body> <script src="./js/tone-ui.js"></script>
<tone-example label="Ping Pong Delay"> <script src="./js/components.js"></script>
<tone-loader></tone-loader> </head>
<body>
<tone-example label="Ping Pong Delay">
<tone-loader></tone-loader>
<div slot="explanation"> <div slot="explanation">
A Ping Pong Delay is a stereo feedback delay where the delay bounces back and forth between the left and right channels. Hit the button to trigger a snare sample into the effect. A Ping Pong Delay is a stereo feedback delay where the delay
<br><br> bounces back and forth between the left and right channels. Hit
<a href="https://tonejs.github.io/docs/PingPongDelay">Tone.PingPongDelay</a> docs. the button to trigger a snare sample into the effect.
</div> <br /><br />
<a
href="https://tonejs.github.io/docs/latest/classes/PingPongDelay"
>Tone.PingPongDelay</a
>
docs.
</div>
<div id="content"> <div id="content">
<tone-momentary-button></tone-momentary-button> <tone-momentary-button></tone-momentary-button>
</div> </div>
</tone-example> </tone-example>
<script type="text/javascript"> <script type="text/javascript">
// the feedback delay // the feedback delay
const feedbackDelay = new Tone.PingPongDelay({ const feedbackDelay = new Tone.PingPongDelay({
delayTime: "8n", delayTime: "8n",
feedback: 0.6, feedback: 0.6,
wet: 0.5 wet: 0.5,
}).toDestination(); }).toDestination();
// play a snare sound through it // play a snare sound through it
const player = new Tone.Player("https://tonejs.github.io/audio/drum-samples/CR78/snare.mp3").connect(feedbackDelay); const player = new Tone.Player(
"https://tonejs.github.io/audio/drum-samples/CR78/snare.mp3"
).connect(feedbackDelay);
const toneMeter = new Tone.Meter({ channelCount: 2 }); const toneMeter = new Tone.Meter({ channelCount: 2 });
feedbackDelay.connect(toneMeter); feedbackDelay.connect(toneMeter);
meter({ meter({
tone: toneMeter, tone: toneMeter,
parent: document.querySelector("#content") parent: document.querySelector("#content"),
}); });
document.querySelector("tone-momentary-button").addEventListener("down", () => player.start()); document
document.querySelector("tone-momentary-button").addEventListener("up", () => player.stop()); .querySelector("tone-momentary-button")
</script> .addEventListener("down", () => player.start());
</body> document
.querySelector("tone-momentary-button")
.addEventListener("up", () => player.stop());
</script>
</body>
</html> </html>

133
examples/pitchShift.html
View file

@ -1,61 +1,90 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Pitch Shift</title> <title>Pitch Shift</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
</head> <script src="../build/Tone.js"></script>
<body> <script src="./js/tone-ui.js"></script>
<style> <script src="./js/components.js"></script>
tone-slider { </head>
width: 100%; <body>
margin-top: 10px; <style>
} tone-slider {
</style> width: 100%;
<tone-example label="Pitch Shift"> margin-top: 10px;
<div slot="explanation"> }
This example demonstrates the Pitch Shift effect. </style>
<br><br> <tone-example label="Pitch Shift">
<a href="https://tonejs.github.io/docs/PitchShift">Tone.Pitch Shift</a> docs. <div slot="explanation">
</div> This example demonstrates the Pitch Shift effect.
<br /><br />
<a
href="https://tonejs.github.io/docs/latest/classes/PitchShift"
>Tone.Pitch Shift</a
>
docs.
</div>
<tone-loader></tone-loader> <tone-loader></tone-loader>
<div id="content"> <div id="content">
<tone-play-toggle></tone-play-toggle> <tone-play-toggle></tone-play-toggle>
<tone-slider label="pitch" min="-12" max="12" value="0" units="hz"></tone-slider> <tone-slider
</div> label="pitch"
</tone-example> min="-12"
max="12"
value="0"
units="hz"
></tone-slider>
</div>
</tone-example>
<script type="text/javascript"> <script type="text/javascript">
const pitchShift = new Tone.PitchShift().toDestination(); const pitchShift = new Tone.PitchShift().toDestination();
const player = new Tone.Player("https://tonejs.github.io/audio/berklee/groovin_analogsynth1.mp3").connect(pitchShift); const player = new Tone.Player(
player.loop = true; "https://tonejs.github.io/audio/berklee/groovin_analogsynth1.mp3"
).connect(pitchShift);
player.loop = true;
const toneFFT = new Tone.FFT(); const toneFFT = new Tone.FFT();
pitchShift.connect(toneFFT); pitchShift.connect(toneFFT);
fft({ fft({
parent: document.querySelector("#content"), parent: document.querySelector("#content"),
tone: toneFFT, tone: toneFFT,
}); });
// bind the interface // bind the interface
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start()); document
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop()); .querySelector("tone-play-toggle")
// document.querySelector("tone-play-toggle").addEventListener('start', () => { .addEventListener("start", () => player.start());
// debugger; document
// }); .querySelector("tone-play-toggle")
.addEventListener("stop", () => player.stop());
// document.querySelector("tone-play-toggle").addEventListener('start', () => {
// debugger;
// });
document.querySelector("tone-slider").addEventListener("input", e => { document
pitchShift.pitch = parseFloat(e.target.value); .querySelector("tone-slider")
}); .addEventListener("input", (e) => {
</script> pitchShift.pitch = parseFloat(e.target.value);
</body> });
</script>
</body>
</html> </html>

108
examples/player.html
View file

@ -1,54 +1,70 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Player</title> <title>Player</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
<style type="text/css"> <script src="../build/Tone.js"></script>
tone-play-toggle { <script src="./js/tone-ui.js"></script>
margin-bottom: 10px; <script src="./js/components.js"></script>
} <style type="text/css">
</style> tone-play-toggle {
</head> margin-bottom: 10px;
<body> }
<tone-example label="Player"> </style>
<tone-loader></tone-loader> </head>
<div slot="explanation"> <body>
Click on the button to play the audio file on loop <tone-example label="Player">
using <a href="https://tonejs.github.io/docs/Player">Tone.Player</a>. <tone-loader></tone-loader>
</div> <div slot="explanation">
Click on the button to play the audio file on loop using
<a href="https://tonejs.github.io/docs/latest/classes/Player"
>Tone.Player</a
>.
</div>
<div id="content"> <div id="content">
<tone-play-toggle></tone-play-toggle> <tone-play-toggle></tone-play-toggle>
</div> </div>
</tone-example> </tone-example>
<script type="text/javascript"> <script type="text/javascript">
// the player // the player
const player = new Tone.Player({ const player = new Tone.Player({
url: "https://tonejs.github.io/audio/loop/FWDL.mp3", url: "https://tonejs.github.io/audio/loop/FWDL.mp3",
loop: true, loop: true,
loopStart: 0.5, loopStart: 0.5,
loopEnd: 0.7, loopEnd: 0.7,
}).toDestination(); }).toDestination();
ui({ ui({
tone: player, tone: player,
parent: document.querySelector("#content") parent: document.querySelector("#content"),
}); });
// bind the interface // bind the interface
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start()); document
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop()); .querySelector("tone-play-toggle")
</script> .addEventListener("start", () => player.start());
document
</body> .querySelector("tone-play-toggle")
.addEventListener("stop", () => player.stop());
</script>
</body>
</html> </html>

110
examples/polySynth.html
View file

@ -1,56 +1,68 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>PolySynth</title> <title>PolySynth</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
</head> <script src="../build/Tone.js"></script>
<body> <script src="./js/tone-ui.js"></script>
<style> <script src="./js/components.js"></script>
tone-piano { </head>
margin-bottom: 10px; <body>
} <style>
</style> tone-piano {
<tone-example label="Polyphony"> margin-bottom: 10px;
<div slot="explanation">
<a href="https://tonejs.github.io/docs/PolySynth">Tone.PolySynth</a>
handles voice creation and allocation for any monophonic
instruments passed in as the second parameter. PolySynth is
not a synthesizer by itself, it merely manages voices of
one of the other types of synths, allowing any of the
monophonic synthesizers to be polyphonic.
</div>
<div id="content">
</div>
</tone-example>
<script type="text/javascript">
const synth = new Tone.PolySynth(Tone.Synth, {
oscillator: {
partials: [0, 2, 3, 4],
} }
}).toDestination(); </style>
<tone-example label="Polyphony">
<div slot="explanation">
<a href="https://tonejs.github.io/docs/latest/classes/PolySynth"
>Tone.PolySynth</a
>
handles voice creation and allocation for any monophonic
instruments passed in as the second parameter. PolySynth is not
a synthesizer by itself, it merely manages voices of one of the
other types of synths, allowing any of the monophonic
synthesizers to be polyphonic.
</div>
piano({ <div id="content"></div>
parent: document.querySelector("#content"), </tone-example>
polyphonic: true,
noteon: note => synth.triggerAttack(note.name),
noteoff: note => synth.triggerRelease(note.name)
});
ui({ <script type="text/javascript">
tone: synth, const synth = new Tone.PolySynth(Tone.Synth, {
parent: document.querySelector("#content"), oscillator: {
}); partials: [0, 2, 3, 4],
</script> },
</body> }).toDestination();
piano({
parent: document.querySelector("#content"),
polyphonic: true,
noteon: (note) => synth.triggerAttack(note.name),
noteoff: (note) => synth.triggerRelease(note.name),
});
ui({
tone: synth,
parent: document.querySelector("#content"),
});
</script>
</body>
</html> </html>

111
examples/reverb.html
View file

@ -1,56 +1,73 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Reverb</title> <title>Reverb</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
</head> <script src="../build/Tone.js"></script>
<body> <script src="./js/tone-ui.js"></script>
<style> <script src="./js/components.js"></script>
tone-play-toggle { </head>
margin-bottom: 10px; <body>
} <style>
</style> tone-play-toggle {
<tone-example label="Reverb"> margin-bottom: 10px;
<div slot="explanation"> }
<a href="https://tonejs.github.io/docs/Reverb">Tone.Reverb</a> </style>
is a convolution-based reverb. An impulse response is created with a <tone-example label="Reverb">
decaying noise burst when you click 'Generate Reverb'. The 'Decay Time' controls <div slot="explanation">
how long the noise burst lasts. If the 'Decay Time' is changed, a new noise burst <a href="https://tonejs.github.io/docs/latest/classes/Reverb"
will need to be generated. >Tone.Reverb</a
</div> >
is a convolution-based reverb. An impulse response is created
with a decaying noise burst when you click 'Generate Reverb'.
The 'Decay Time' controls how long the noise burst lasts. If the
'Decay Time' is changed, a new noise burst will need to be
generated.
</div>
<div id="content"> <div id="content">
<tone-play-toggle></tone-play-toggle> <tone-play-toggle></tone-play-toggle>
</div> </div>
</tone-example> </tone-example>
<script type="text/javascript"> <script type="text/javascript">
const reverb = new Tone.Reverb().toDestination(); const reverb = new Tone.Reverb().toDestination();
const player = new Tone.Player({ const player = new Tone.Player({
url: "https://tonejs.github.io/audio/berklee/shaker_slow_1.mp3", url: "https://tonejs.github.io/audio/berklee/shaker_slow_1.mp3",
loop: true, loop: true,
volume: 6, volume: 6,
}).connect(reverb); }).connect(reverb);
ui({ ui({
parent: document.querySelector("#content"), parent: document.querySelector("#content"),
tone: reverb tone: reverb,
}); });
// bind the interface // bind the interface
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start()); document
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop()); .querySelector("tone-play-toggle")
.addEventListener("start", () => player.start());
</script> document
</body> .querySelector("tone-play-toggle")
.addEventListener("stop", () => player.stop());
</script>
</body>
</html> </html>

161
examples/sampler.html
View file

@ -1,79 +1,98 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Sampler</title> <title>Sampler</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
</head> <script src="../build/Tone.js"></script>
<body> <script src="./js/tone-ui.js"></script>
<style> <script src="./js/components.js"></script>
tone-piano { </head>
margin-bottom: 10px; <body>
} <style>
</style> tone-piano {
<tone-example label="Sampler"> margin-bottom: 10px;
<tone-loader></tone-loader> }
</style>
<tone-example label="Sampler">
<tone-loader></tone-loader>
<div slot="explanation"> <div slot="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. <a
</div> href="https://tonejs.github.io/docs/latest/classes/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="content"> <div id="content"></div>
</div> </tone-example>
</tone-example>
<script type="text/javascript"> <script type="text/javascript">
const sampler = new Tone.Sampler({ const sampler = new Tone.Sampler({
urls: { urls: {
A0: "A0.mp3", A0: "A0.mp3",
C1: "C1.mp3", C1: "C1.mp3",
"D#1": "Ds1.mp3", "D#1": "Ds1.mp3",
"F#1": "Fs1.mp3", "F#1": "Fs1.mp3",
A1: "A1.mp3", A1: "A1.mp3",
C2: "C2.mp3", C2: "C2.mp3",
"D#2": "Ds2.mp3", "D#2": "Ds2.mp3",
"F#2": "Fs2.mp3", "F#2": "Fs2.mp3",
A2: "A2.mp3", A2: "A2.mp3",
C3: "C3.mp3", C3: "C3.mp3",
"D#3": "Ds3.mp3", "D#3": "Ds3.mp3",
"F#3": "Fs3.mp3", "F#3": "Fs3.mp3",
A3: "A3.mp3", A3: "A3.mp3",
C4: "C4.mp3", C4: "C4.mp3",
"D#4": "Ds4.mp3", "D#4": "Ds4.mp3",
"F#4": "Fs4.mp3", "F#4": "Fs4.mp3",
A4: "A4.mp3", A4: "A4.mp3",
C5: "C5.mp3", C5: "C5.mp3",
"D#5": "Ds5.mp3", "D#5": "Ds5.mp3",
"F#5": "Fs5.mp3", "F#5": "Fs5.mp3",
A5: "A5.mp3", A5: "A5.mp3",
C6: "C6.mp3", C6: "C6.mp3",
"D#6": "Ds6.mp3", "D#6": "Ds6.mp3",
"F#6": "Fs6.mp3", "F#6": "Fs6.mp3",
A6: "A6.mp3", A6: "A6.mp3",
C7: "C7.mp3", C7: "C7.mp3",
"D#7": "Ds7.mp3", "D#7": "Ds7.mp3",
"F#7": "Fs7.mp3", "F#7": "Fs7.mp3",
A7: "A7.mp3", A7: "A7.mp3",
C8: "C8.mp3" C8: "C8.mp3",
}, },
release: 1, release: 1,
baseUrl: "https://tonejs.github.io/audio/salamander/" baseUrl: "https://tonejs.github.io/audio/salamander/",
}).toDestination(); }).toDestination();
piano({ piano({
parent: document.querySelector("#content"), parent: document.querySelector("#content"),
noteon: note => sampler.triggerAttack(note.name), noteon: (note) => sampler.triggerAttack(note.name),
noteoff: note => sampler.triggerRelease(note.name), noteoff: (note) => sampler.triggerRelease(note.name),
}); });
</script> </script>
</body>
</body>
</html> </html>

209
examples/signal.html
View file

@ -1,106 +1,135 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Signal</title> <title>Signal</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
<style type="text/css"> <script src="../build/Tone.js"></script>
tone-play-toggle { <script src="./js/tone-ui.js"></script>
margin-bottom: 10px; <script src="./js/components.js"></script>
} <style type="text/css">
tone-slider { tone-play-toggle {
display: block; margin-bottom: 10px;
width: 100%; }
} tone-slider {
</style> display: block;
</head> width: 100%;
<body> }
<tone-example label="Control Voltage"> </style>
<div slot="explanation"> </head>
One of the most powerful features of Tone.js and the Web Audio API is the ability to <body>
perform math and logic on audio-rate signal. Signals <tone-example label="Control Voltage">
can be ramped and scheduled to control Audio Parameters and <div slot="explanation">
other Signals making it simple to create elaborate, One of the most powerful features of Tone.js and the Web Audio
interconnected automations. API is the ability to perform math and logic on audio-rate
<br><br> signal. Signals can be ramped and scheduled to control Audio
This example applies a series of mappings to a Parameters and other Signals making it simple to create
signal value and applies the results of those mappings elaborate, interconnected automations.
to the frequency attribute of 2 <br /><br />
<a href="https://tonejs.github.io/docs/Oscillator">Tone.Oscillators</a> This example applies a series of mappings to a signal value and
and a <a href="https://tonejs.github.io/docs/LFO">Tone.LFO</a>. applies the results of those mappings to the frequency attribute
</div> of 2
<a
href="https://tonejs.github.io/docs/latest/classes/Oscillator"
>Tone.Oscillators</a
>
and a
<a href="https://tonejs.github.io/docs/latest/classes/LFO"
>Tone.LFO</a
>.
</div>
<div id="content"> <div id="content">
<tone-play-toggle></tone-play-toggle> <tone-play-toggle></tone-play-toggle>
<tone-slider label="Modulation Rate" min="0.1" max="1" exp="2" value="0.5"></tone-slider> <tone-slider
</div> label="Modulation Rate"
</tone-example> min="0.1"
max="1"
exp="2"
value="0.5"
></tone-slider>
</div>
</tone-example>
<script type="text/javascript"> <script type="text/javascript">
// use this to pan the two oscillators hard left/right // use this to pan the two oscillators hard left/right
const merge = new Tone.Merge().toDestination(); const merge = new Tone.Merge().toDestination();
// two oscillators panned hard left / hard right // two oscillators panned hard left / hard right
const rightOsc = new Tone.Oscillator({ const rightOsc = new Tone.Oscillator({
type: "sawtooth", type: "sawtooth",
volume: -20 volume: -20,
}).connect(merge, 0, 0); }).connect(merge, 0, 0);
const leftOsc = new Tone.Oscillator({ const leftOsc = new Tone.Oscillator({
type: "square", type: "square",
volume: -20 volume: -20,
}).connect(merge, 0, 1); }).connect(merge, 0, 1);
// create an oscillation that goes from 0 to 1200 // create an oscillation that goes from 0 to 1200
// connection it to the detune of the two oscillators // connection it to the detune of the two oscillators
const detuneLFO = new Tone.LFO({ const detuneLFO = new Tone.LFO({
type: "square", type: "square",
min: 0, min: 0,
max: 1200 max: 1200,
}).fan(rightOsc.detune, leftOsc.detune).start(); })
.fan(rightOsc.detune, leftOsc.detune)
.start();
// the frequency signal // the frequency signal
const frequency = new Tone.Signal(0.5); const frequency = new Tone.Signal(0.5);
// the move the 0 to 1 value into frequency range // the move the 0 to 1 value into frequency range
const scale = new Tone.ScaleExp(110, 440); const scale = new Tone.ScaleExp(110, 440);
// multiply the frequency by 2.5 to get a 10th above // multiply the frequency by 2.5 to get a 10th above
const mult = new Tone.Multiply(2.5); const mult = new Tone.Multiply(2.5);
// chain the components together // chain the components together
frequency.chain(scale, mult); frequency.chain(scale, mult);
scale.connect(rightOsc.frequency); scale.connect(rightOsc.frequency);
mult.connect(leftOsc.frequency); mult.connect(leftOsc.frequency);
// multiply the frequency by 2 to get the octave above // multiply the frequency by 2 to get the octave above
const detuneScale = new Tone.Scale(14, 4); const detuneScale = new Tone.Scale(14, 4);
frequency.chain(detuneScale, detuneLFO.frequency); frequency.chain(detuneScale, detuneLFO.frequency);
// start the oscillators with the play button // start the oscillators with the play button
document.querySelector("tone-play-toggle").addEventListener("start", () => { document
rightOsc.start(); .querySelector("tone-play-toggle")
leftOsc.start(); .addEventListener("start", () => {
}); rightOsc.start();
document.querySelector("tone-play-toggle").addEventListener("stop", () => { leftOsc.start();
rightOsc.stop(); });
leftOsc.stop(); document
}); .querySelector("tone-play-toggle")
.addEventListener("stop", () => {
rightOsc.stop();
leftOsc.stop();
});
// ramp the frequency with the slider // ramp the frequency with the slider
document.querySelector("tone-slider").addEventListener("input", e => { document
frequency.rampTo(parseFloat(e.target.value), 0.1); .querySelector("tone-slider")
}); .addEventListener("input", (e) => {
frequency.rampTo(parseFloat(e.target.value), 0.1);
</script> });
</script>
</body> </body>
</html> </html>

138
examples/simpleSynth.html
View file

@ -1,66 +1,88 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Synth</title> <title>Synth</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
</head> <script src="../build/Tone.js"></script>
<body> <script src="./js/tone-ui.js"></script>
<style> <script src="./js/components.js"></script>
tone-piano { </head>
margin-bottom: 10px; <body>
} <style>
</style> tone-piano {
<tone-example label="Synth"> margin-bottom: 10px;
<div slot="explanation"> }
<a href="https://tonejs.github.io/docs/Synth" target="_blank">Tone.Synth</a> is composed simply of a </style>
<a href="https://tonejs.github.io/docs/OmniOscillator" target="_blank">Tone.OmniOscillator</a> <tone-example label="Synth">
routed through a <div slot="explanation">
<a href="https://tonejs.github.io/docs/AmplitudeEnvelope" target="_blank">Tone.AmplitudeEnvelope</a>. <a
</div> href="https://tonejs.github.io/docs/latest/classes/Synth"
target="_blank"
>Tone.Synth</a
>
is composed simply of a
<a
href="https://tonejs.github.io/docs/latest/classes/OmniOscillator"
target="_blank"
>Tone.OmniOscillator</a
>
routed through a
<a
href="https://tonejs.github.io/docs/latest/classes/AmplitudeEnvelope"
target="_blank"
>Tone.AmplitudeEnvelope</a
>.
</div>
<div id="content"> <div id="content"></div>
</div> </tone-example>
</tone-example>
<script type="text/javascript"> <script type="text/javascript">
const synth = new Tone.Synth({ const synth = new Tone.Synth({
oscillator: { oscillator: {
type: "amtriangle", type: "amtriangle",
harmonicity: 0.5, harmonicity: 0.5,
modulationType: "sine" modulationType: "sine",
}, },
envelope: { envelope: {
attackCurve: "exponential", attackCurve: "exponential",
attack: 0.05, attack: 0.05,
decay: 0.2, decay: 0.2,
sustain: 0.2, sustain: 0.2,
release: 1.5, release: 1.5,
}, },
portamento: 0.05 portamento: 0.05,
}).toDestination(); }).toDestination();
piano({ piano({
tone: synth, tone: synth,
parent: document.querySelector("#content"), parent: document.querySelector("#content"),
noteon: (note) => synth.triggerAttack(note.name), noteon: (note) => synth.triggerAttack(note.name),
noteoff: (note) => synth.triggerRelease() noteoff: (note) => synth.triggerRelease(),
}); });
ui({ ui({
tone: synth, tone: synth,
name: "Synth", name: "Synth",
parent: document.querySelector("#content"), parent: document.querySelector("#content"),
}); });
</script>
</script> </body>
</body>
</html> </html>

134
examples/stepSequencer.html
View file

@ -1,57 +1,91 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Step Sequencer</title> <title>Step Sequencer</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="icon"
type="image/png"
sizes="174x174"
href="./favicon.png"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <link
<script src="../build/Tone.js"></script> href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
<script src="./js/tone-ui.js"></script> rel="stylesheet"
<script src="./js/components.js"></script> />
<style type="text/css"> <script src="../build/Tone.js"></script>
tone-transport { <script src="./js/tone-ui.js"></script>
margin-bottom: 10px; <script src="./js/components.js"></script>
} <style type="text/css">
</style> tone-transport {
</head> margin-bottom: 10px;
<body> }
<tone-example label="Step Sequencer"> </style>
<tone-loader></tone-loader> </head>
<div slot="explanation"> <body>
<a href="https://tonejs.github.io/docs/Transport">Tone.Transport</a> <tone-example label="Step Sequencer">
is the application-wide timekeeper. It's clock source enables sample-accurate scheduling as well as tempo-curves and automation. This example uses Tone.Sequence to invoke a callback every 16th note. <tone-loader></tone-loader>
</div> <div slot="explanation">
<a
href="https://tonejs.github.io/docs/latest/functions/getTransport.html"
>Tone.Transport</a
>
is the application-wide timekeeper. It's clock source enables
sample-accurate scheduling as well as tempo-curves and
automation. This example uses Tone.Sequence to invoke a callback
every 16th note.
</div>
<div id="content"> <div id="content">
<tone-play-toggle></tone-play-toggle> <tone-play-toggle></tone-play-toggle>
<tone-slider label="tempo" units="bpm" min="60" max="240" value="120"></tone-slider> <tone-slider
<tone-step-sequencer></tone-step-sequencer> label="tempo"
</div> units="bpm"
</tone-example> min="60"
max="240"
value="120"
></tone-slider>
<tone-step-sequencer></tone-step-sequencer>
</div>
</tone-example>
<script type="text/javascript"> <script type="text/javascript">
const keys = new Tone.Players({ const keys = new Tone.Players({
urls: { urls: {
0: "A1.mp3", 0: "A1.mp3",
1: "Cs2.mp3", 1: "Cs2.mp3",
2: "E2.mp3", 2: "E2.mp3",
3: "Fs2.mp3", 3: "Fs2.mp3",
}, },
fadeOut: "64n", fadeOut: "64n",
baseUrl: "https://tonejs.github.io/audio/casio/" baseUrl: "https://tonejs.github.io/audio/casio/",
}).toDestination(); }).toDestination();
document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start()); document
document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop()); .querySelector("tone-play-toggle")
document.querySelector("tone-slider").addEventListener("input", (e) => Tone.Transport.bpm.value = parseFloat(e.target.value)); .addEventListener("start", () => Tone.Transport.start());
document.querySelector("tone-step-sequencer").addEventListener("trigger", ({ detail }) => { document
keys.player(detail.row).start(detail.time, 0, "16t"); .querySelector("tone-play-toggle")
}); .addEventListener("stop", () => Tone.Transport.stop());
document
</script> .querySelector("tone-slider")
</body> .addEventListener(
"input",
(e) =>
(Tone.Transport.bpm.value = parseFloat(e.target.value))
);
document
.querySelector("tone-step-sequencer")
.addEventListener("trigger", ({ detail }) => {
keys.player(detail.row).start(detail.time, 0, "16t");
});
</script>
</body>
</html> </html>