mirror of
https://github.com/Tonejs/Tone.js
synced 2024-12-25 02:53:06 +00:00
updating example links
This commit is contained in:
Yotam Mann
parent
f06ff17f06
commit
77a8e225f4
25 changed files with 2455 additions and 1760 deletions
|
|
@ -1,64 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>AMSynth</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>AMSynth</title>
|
||||
|
||||
<meta 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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<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/AMSynth">Tone.AMSynth</a>
|
||||
is composed of two
|
||||
<a href="https://tonejs.github.io/docs/Synth">Tone.Synths</a>
|
||||
where one Tone.Synth modulates the amplitude of a second Tone.Synth.
|
||||
</div>
|
||||
<meta
|
||||
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>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<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>
|
||||
</tone-example>
|
||||
|
||||
<script type="text/javascript">
|
||||
const synth = new Tone.AMSynth({
|
||||
harmonicity: 2.5,
|
||||
oscillator: {
|
||||
type: "fatsawtooth"
|
||||
},
|
||||
envelope: {
|
||||
attack: 0.1,
|
||||
decay: 0.2,
|
||||
sustain: 0.2,
|
||||
release: 0.3
|
||||
},
|
||||
modulation: {
|
||||
type: "square"
|
||||
},
|
||||
modulationEnvelope: {
|
||||
attack: 0.5,
|
||||
decay: 0.01
|
||||
}
|
||||
}).toDestination();
|
||||
<div id="content"></div>
|
||||
</tone-example>
|
||||
|
||||
piano({
|
||||
tone: synth,
|
||||
parent: document.querySelector("#content"),
|
||||
noteon: (note) => synth.triggerAttack(note.name),
|
||||
noteoff: (note) => synth.triggerRelease()
|
||||
});
|
||||
<script type="text/javascript">
|
||||
const synth = new Tone.AMSynth({
|
||||
harmonicity: 2.5,
|
||||
oscillator: {
|
||||
type: "fatsawtooth",
|
||||
},
|
||||
envelope: {
|
||||
attack: 0.1,
|
||||
decay: 0.2,
|
||||
sustain: 0.2,
|
||||
release: 0.3,
|
||||
},
|
||||
modulation: {
|
||||
type: "square",
|
||||
},
|
||||
modulationEnvelope: {
|
||||
attack: 0.5,
|
||||
decay: 0.01,
|
||||
},
|
||||
}).toDestination();
|
||||
|
||||
ui({
|
||||
tone: synth,
|
||||
name: "AMSynth",
|
||||
parent: document.querySelector("#content"),
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
piano({
|
||||
tone: synth,
|
||||
parent: document.querySelector("#content"),
|
||||
noteon: (note) => synth.triggerAttack(note.name),
|
||||
noteoff: (note) => synth.triggerRelease(),
|
||||
});
|
||||
|
||||
ui({
|
||||
tone: synth,
|
||||
name: "AMSynth",
|
||||
parent: document.querySelector("#content"),
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,71 +1,93 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Analyser</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Analyser</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.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"
|
||||
/>
|
||||
<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>
|
||||
<body>
|
||||
<tone-example label="Analyser">
|
||||
<tone-loader></tone-loader>
|
||||
<div slot="explanation">
|
||||
<a
|
||||
href="https://tonejs.github.io/docs/latest/classes/FFT"
|
||||
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">
|
||||
<a href="https://tonejs.github.io/docs/FFT" target="_blank">Tone.FFT</a>
|
||||
returns the amplitude of the incoming signal at different frequencies.
|
||||
<a href="https://tonejs.github.io/docs/Waveform" target="_blank">Tone.Waveform</a>
|
||||
returns the signal value between 0-1.
|
||||
</div>
|
||||
<div id="content">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
</div>
|
||||
</tone-example>
|
||||
|
||||
<div id="content">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
</div>
|
||||
</tone-example>
|
||||
<script type="text/javascript">
|
||||
const player = new Tone.Player({
|
||||
url: "https://tonejs.github.io/audio/berklee/arpeggio2.mp3",
|
||||
loop: true,
|
||||
}).toDestination();
|
||||
|
||||
<script type="text/javascript">
|
||||
const player = new Tone.Player({
|
||||
url: "https://tonejs.github.io/audio/berklee/arpeggio2.mp3",
|
||||
loop: true
|
||||
}).toDestination();
|
||||
const toneMeter = new Tone.Meter();
|
||||
player.connect(toneMeter);
|
||||
|
||||
const toneMeter = new Tone.Meter();
|
||||
player.connect(toneMeter);
|
||||
const toneFFT = new Tone.FFT();
|
||||
player.connect(toneFFT);
|
||||
|
||||
const toneFFT = new Tone.FFT();
|
||||
player.connect(toneFFT);
|
||||
const toneWaveform = new Tone.Waveform();
|
||||
player.connect(toneWaveform);
|
||||
|
||||
const toneWaveform = new Tone.Waveform();
|
||||
player.connect(toneWaveform);
|
||||
// bind the GUI
|
||||
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
|
||||
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")
|
||||
});
|
||||
|
||||
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
|
||||
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
|
||||
|
||||
</script>
|
||||
</body>
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("start", () => player.start());
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("stop", () => player.stop());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,82 +1,116 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>MetalSynth</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>MetalSynth</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.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"
|
||||
/>
|
||||
<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>
|
||||
<body>
|
||||
<tone-example label="Bembe">
|
||||
<div slot="explanation">
|
||||
<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">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
</div>
|
||||
</tone-example>
|
||||
|
||||
<div id="content">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
</div>
|
||||
</tone-example>
|
||||
<script type="text/javascript">
|
||||
const bell = new Tone.MetalSynth({
|
||||
harmonicity: 12,
|
||||
resonance: 800,
|
||||
modulationIndex: 20,
|
||||
envelope: {
|
||||
decay: 0.4,
|
||||
},
|
||||
volume: -15,
|
||||
}).toDestination();
|
||||
|
||||
<script type="text/javascript">
|
||||
const bell = new Tone.MetalSynth({
|
||||
harmonicity: 12,
|
||||
resonance: 800,
|
||||
modulationIndex: 20,
|
||||
envelope: {
|
||||
decay: 0.4,
|
||||
},
|
||||
volume: -15
|
||||
}).toDestination();
|
||||
const bellPart = new Tone.Sequence(
|
||||
(time, freq) => {
|
||||
bell.triggerAttack(freq, time, Math.random() * 0.5 + 0.5);
|
||||
},
|
||||
[
|
||||
[300, null, 200],
|
||||
[null, 200, 200],
|
||||
[null, 200, null],
|
||||
[200, null, 200],
|
||||
],
|
||||
"4n"
|
||||
).start(0);
|
||||
|
||||
const bellPart = new Tone.Sequence(((time, freq) => {
|
||||
bell.triggerAttack(freq, time, Math.random()*0.5 + 0.5);
|
||||
}), [[300, null, 200],
|
||||
[null, 200, 200],
|
||||
[null, 200, null],
|
||||
[200, null, 200]
|
||||
], "4n").start(0);
|
||||
const conga = new Tone.MembraneSynth({
|
||||
pitchDecay: 0.008,
|
||||
octaves: 2,
|
||||
envelope: {
|
||||
attack: 0.0006,
|
||||
decay: 0.5,
|
||||
sustain: 0,
|
||||
},
|
||||
}).toDestination();
|
||||
|
||||
const conga = new Tone.MembraneSynth({
|
||||
pitchDecay: 0.008,
|
||||
octaves: 2,
|
||||
envelope: {
|
||||
attack: 0.0006,
|
||||
decay: 0.5,
|
||||
sustain: 0
|
||||
}
|
||||
}).toDestination();
|
||||
const congaPart = new Tone.Sequence(
|
||||
(time, pitch) => {
|
||||
conga.triggerAttack(pitch, time, Math.random() * 0.5 + 0.5);
|
||||
},
|
||||
["G3", "C4", "C4", "C4"],
|
||||
"4n"
|
||||
).start(0);
|
||||
|
||||
const congaPart = new Tone.Sequence(((time, pitch) => {
|
||||
conga.triggerAttack(pitch, time, Math.random()*0.5 + 0.5);
|
||||
}), ["G3", "C4", "C4", "C4"], "4n").start(0);
|
||||
Tone.Transport.bpm.value = 115;
|
||||
|
||||
Tone.Transport.bpm.value = 115;
|
||||
drawer()
|
||||
.add({
|
||||
tone: conga,
|
||||
title: "Conga",
|
||||
})
|
||||
.add({
|
||||
tone: bell,
|
||||
title: "Bell",
|
||||
});
|
||||
|
||||
drawer().add({
|
||||
tone: conga,
|
||||
title: "Conga"
|
||||
}).add({
|
||||
tone: bell,
|
||||
title: "Bell"
|
||||
});
|
||||
|
||||
// connect the UI with the components
|
||||
document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());
|
||||
document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop());
|
||||
|
||||
</script>
|
||||
</body>
|
||||
// connect the UI with the components
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("start", () => Tone.Transport.start());
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("stop", () => Tone.Transport.stop());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,84 +1,142 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Buses</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Buses</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="Buses">
|
||||
<div slot="explanation">
|
||||
Buses make it easy to share effects across many instruments. <code>send</code>
|
||||
audio to a named bus from an instrument and then <code>receive</code> that
|
||||
channel on your effect. The gain values are all in decibels.
|
||||
<br><br>
|
||||
Docs on <a href="https://tonejs.github.io/docs/Channel.html#send">send</a> and
|
||||
<a href="https://tonejs.github.io/docs/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 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"
|
||||
/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="Buses">
|
||||
<div slot="explanation">
|
||||
Buses make it easy to share effects across many instruments.
|
||||
<code>send</code> audio to a named bus from an instrument and
|
||||
then <code>receive</code> that channel on your effect. The gain
|
||||
values are all in decibels. <br /><br />
|
||||
Docs on
|
||||
<a
|
||||
href="https://tonejs.github.io/docs/latest/classes/Channel.html#send"
|
||||
>send</a
|
||||
>
|
||||
and
|
||||
<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">
|
||||
// the source
|
||||
const player = new Tone.Player({
|
||||
url: "https://tonejs.github.io/audio/berklee/femalevoice_oo_A4.mp3",
|
||||
loop: true,
|
||||
});
|
||||
<script type="text/javascript">
|
||||
// the source
|
||||
const player = new Tone.Player({
|
||||
url: "https://tonejs.github.io/audio/berklee/femalevoice_oo_A4.mp3",
|
||||
loop: true,
|
||||
});
|
||||
|
||||
// make some effects
|
||||
const chorus = new Tone.Chorus({
|
||||
wet: 1,
|
||||
}).toDestination().start();
|
||||
const chorusChannel = new Tone.Channel({ volume: -60 }).connect(chorus);
|
||||
chorusChannel.receive("chorus");
|
||||
// make some effects
|
||||
const chorus = new Tone.Chorus({
|
||||
wet: 1,
|
||||
})
|
||||
.toDestination()
|
||||
.start();
|
||||
const chorusChannel = new Tone.Channel({ volume: -60 }).connect(
|
||||
chorus
|
||||
);
|
||||
chorusChannel.receive("chorus");
|
||||
|
||||
const cheby = new Tone.Chebyshev(50).toDestination();
|
||||
const chebyChannel = new Tone.Channel({ volume: -60 }).connect(cheby);
|
||||
chebyChannel.receive("cheby");
|
||||
const cheby = new Tone.Chebyshev(50).toDestination();
|
||||
const chebyChannel = new Tone.Channel({ volume: -60 }).connect(
|
||||
cheby
|
||||
);
|
||||
chebyChannel.receive("cheby");
|
||||
|
||||
const reverb = new Tone.Reverb(3).toDestination();
|
||||
const reverbChannel = new Tone.Channel({ volume: -60 }).connect(reverb);
|
||||
reverbChannel.receive("reverb");
|
||||
const reverb = new Tone.Reverb(3).toDestination();
|
||||
const reverbChannel = new Tone.Channel({ volume: -60 }).connect(
|
||||
reverb
|
||||
);
|
||||
reverbChannel.receive("reverb");
|
||||
|
||||
// send the player to all of the channels
|
||||
const playerChannel = new Tone.Channel().toDestination();
|
||||
playerChannel.send("chorus");
|
||||
playerChannel.send("cheby");
|
||||
playerChannel.send("reverb");
|
||||
player.connect(playerChannel);
|
||||
// send the player to all of the channels
|
||||
const playerChannel = new Tone.Channel().toDestination();
|
||||
playerChannel.send("chorus");
|
||||
playerChannel.send("cheby");
|
||||
playerChannel.send("reverb");
|
||||
player.connect(playerChannel);
|
||||
|
||||
drawer().add({
|
||||
tone: chorus,
|
||||
}).add({
|
||||
tone: reverb,
|
||||
}).add({
|
||||
tone: cheby,
|
||||
});
|
||||
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
|
||||
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
|
||||
// bind the interface
|
||||
document.querySelector("[label=\"Chorus Send\"]").addEventListener("input", e => {
|
||||
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>
|
||||
drawer()
|
||||
.add({
|
||||
tone: chorus,
|
||||
})
|
||||
.add({
|
||||
tone: reverb,
|
||||
})
|
||||
.add({
|
||||
tone: cheby,
|
||||
});
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("start", () => player.start());
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("stop", () => player.stop());
|
||||
// bind the interface
|
||||
document
|
||||
.querySelector('[label="Chorus Send"]')
|
||||
.addEventListener("input", (e) => {
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,71 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Envelope</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Envelope</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style type="text/css">
|
||||
img {
|
||||
display: block;
|
||||
margin: 5px auto;
|
||||
width: 300px!important;
|
||||
}
|
||||
<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"
|
||||
/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style type="text/css">
|
||||
img {
|
||||
display: block;
|
||||
margin: 5px auto;
|
||||
width: 300px !important;
|
||||
}
|
||||
|
||||
tone-trigger {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<tone-example label="Envelope">
|
||||
<div slot="explanation">
|
||||
Envelopes ramp amplitude, frequency or any other parameter over time.
|
||||
<a href="https://tonejs.github.io/docs/Envelope">Tone.Envelope</a> 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>
|
||||
tone-trigger {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<tone-example label="Envelope">
|
||||
<div slot="explanation">
|
||||
Envelopes ramp amplitude, frequency or any other parameter over
|
||||
time.
|
||||
<a href="https://tonejs.github.io/docs/latest/classes/Envelope"
|
||||
>Tone.Envelope</a
|
||||
>
|
||||
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">
|
||||
<tone-momentary-button></tone-momentary-button>
|
||||
</div>
|
||||
<div id="content">
|
||||
<tone-momentary-button></tone-momentary-button>
|
||||
</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">
|
||||
const env = new Tone.AmplitudeEnvelope({
|
||||
attack: 0.11,
|
||||
decay: 0.21,
|
||||
sustain: 0.5,
|
||||
release: 1.2
|
||||
}).toDestination();
|
||||
// create an oscillator and connect it to the envelope
|
||||
const osc = new Tone.Oscillator({
|
||||
partials: [3, 2, 1],
|
||||
type: "custom",
|
||||
frequency: "C#4",
|
||||
volume: -8,
|
||||
})
|
||||
.connect(env)
|
||||
.start();
|
||||
|
||||
// create an oscillator and connect it to the envelope
|
||||
const osc = new Tone.Oscillator({
|
||||
partials: [3, 2, 1],
|
||||
type: "custom",
|
||||
frequency: "C#4",
|
||||
volume: -8,
|
||||
}).connect(env).start();
|
||||
// bind the interface
|
||||
drawer()
|
||||
.add({
|
||||
tone: env,
|
||||
name: "Envelope",
|
||||
})
|
||||
.add({
|
||||
tone: osc,
|
||||
});
|
||||
|
||||
// bind the interface
|
||||
drawer().add({
|
||||
tone: env,
|
||||
name: "Envelope"
|
||||
}).add({
|
||||
tone: osc,
|
||||
});
|
||||
|
||||
document.querySelector("tone-momentary-button").addEventListener("down", e => env.triggerAttack());
|
||||
document.querySelector("tone-momentary-button").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>
|
||||
|
|
|
|||
|
|
@ -1,143 +1,197 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Events</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Events</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="Events">
|
||||
<div slot="explanation">
|
||||
Tone's Event classes (<a href="https://tonejs.github.io/docs/ToneEvent">Tone.ToneEvent</a>,
|
||||
<a href="https://tonejs.github.io/docs/Loop">Tone.Loop</a>,
|
||||
<a href="https://tonejs.github.io/docs/Part">Tone.Part</a> and
|
||||
<a href="https://tonejs.github.io/docs/Sequence">Tone.Sequence</a>)
|
||||
simplify scheduling events along the Transport. Each class abstracts away calls to
|
||||
<a href="https://tonejs.github.io/docs/Transport.schedule">Transport.schedule</a> or
|
||||
<a href="https://tonejs.github.io/docs/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/Event">Event</a> before Tone.js 14.x)
|
||||
</div>
|
||||
<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"
|
||||
/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="Events">
|
||||
<div slot="explanation">
|
||||
Tone's Event classes (<a
|
||||
href="https://tonejs.github.io/docs/latest/classes/ToneEvent"
|
||||
>Tone.ToneEvent</a
|
||||
>,
|
||||
<a href="https://tonejs.github.io/docs/latest/classes/Loop"
|
||||
>Tone.Loop</a
|
||||
>,
|
||||
<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">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
</div>
|
||||
</tone-example>
|
||||
<div id="content">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
</div>
|
||||
</tone-example>
|
||||
|
||||
<script type="text/javascript">
|
||||
/**
|
||||
* KICK
|
||||
*/
|
||||
const kick = new Tone.MembraneSynth({
|
||||
envelope: {
|
||||
sustain: 0,
|
||||
attack: 0.02,
|
||||
decay: 0.8
|
||||
},
|
||||
octaves: 10,
|
||||
pitchDecay: 0.01,
|
||||
}).toDestination();
|
||||
<script type="text/javascript">
|
||||
/**
|
||||
* KICK
|
||||
*/
|
||||
const kick = new Tone.MembraneSynth({
|
||||
envelope: {
|
||||
sustain: 0,
|
||||
attack: 0.02,
|
||||
decay: 0.8,
|
||||
},
|
||||
octaves: 10,
|
||||
pitchDecay: 0.01,
|
||||
}).toDestination();
|
||||
|
||||
const kickPart = new Tone.Loop(((time) => {
|
||||
kick.triggerAttackRelease("C2", "8n", time);
|
||||
}), "2n").start(0);
|
||||
|
||||
/**
|
||||
* SNARE
|
||||
*/
|
||||
const snare = new Tone.NoiseSynth({
|
||||
volume: -10,
|
||||
envelope: {
|
||||
attack: 0.001,
|
||||
decay: 0.2,
|
||||
sustain: 0
|
||||
}
|
||||
}).toDestination();
|
||||
const kickPart = new Tone.Loop((time) => {
|
||||
kick.triggerAttackRelease("C2", "8n", time);
|
||||
}, "2n").start(0);
|
||||
|
||||
const snarePart = new Tone.Loop(((time) => {
|
||||
snare.triggerAttack(time);
|
||||
}), "2n").start("4n");
|
||||
/**
|
||||
* SNARE
|
||||
*/
|
||||
const snare = new Tone.NoiseSynth({
|
||||
volume: -10,
|
||||
envelope: {
|
||||
attack: 0.001,
|
||||
decay: 0.2,
|
||||
sustain: 0,
|
||||
},
|
||||
}).toDestination();
|
||||
|
||||
/**
|
||||
* PIANO
|
||||
*/
|
||||
const keys = new Tone.PolySynth(Tone.Synth, {
|
||||
volume: -8,
|
||||
oscillator: {
|
||||
partials: [1, 2, 1],
|
||||
},
|
||||
}).toDestination();
|
||||
const snarePart = new Tone.Loop((time) => {
|
||||
snare.triggerAttack(time);
|
||||
}, "2n").start("4n");
|
||||
|
||||
const cChord = ["C4", "E4", "G4", "B4"];
|
||||
const dChord = ["D4", "F4", "A4", "C5"];
|
||||
const gChord = ["B3", "D4", "E4", "A4"];
|
||||
/**
|
||||
* PIANO
|
||||
*/
|
||||
const keys = new Tone.PolySynth(Tone.Synth, {
|
||||
volume: -8,
|
||||
oscillator: {
|
||||
partials: [1, 2, 1],
|
||||
},
|
||||
}).toDestination();
|
||||
|
||||
const pianoPart = new Tone.Part(((time, chord) => {
|
||||
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");
|
||||
const cChord = ["C4", "E4", "G4", "B4"];
|
||||
const dChord = ["D4", "F4", "A4", "C5"];
|
||||
const gChord = ["B3", "D4", "E4", "A4"];
|
||||
|
||||
pianoPart.loop = true;
|
||||
pianoPart.loopEnd = "1m";
|
||||
pianoPart.humanize = true;
|
||||
const pianoPart = new Tone.Part(
|
||||
(time, chord) => {
|
||||
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");
|
||||
|
||||
/**
|
||||
* BASS
|
||||
*/
|
||||
const bass = new Tone.MonoSynth({
|
||||
volume: -10,
|
||||
envelope: {
|
||||
attack: 0.1,
|
||||
decay: 0.3,
|
||||
release: 2,
|
||||
},
|
||||
filterEnvelope: {
|
||||
attack: 0.001,
|
||||
decay: 0.01,
|
||||
sustain: 0.5,
|
||||
baseFrequency: 200,
|
||||
octaves: 2.6
|
||||
}
|
||||
}).toDestination();
|
||||
pianoPart.loop = true;
|
||||
pianoPart.loopEnd = "1m";
|
||||
pianoPart.humanize = true;
|
||||
|
||||
const bassPart = new Tone.Sequence(((time, note) => {
|
||||
bass.triggerAttackRelease(note, "16n", time);
|
||||
}), ["C2", ["C3", ["C3", "D2"]], "E2", ["D2", "A1"]], "4n").start(0);
|
||||
/**
|
||||
* BASS
|
||||
*/
|
||||
const bass = new Tone.MonoSynth({
|
||||
volume: -10,
|
||||
envelope: {
|
||||
attack: 0.1,
|
||||
decay: 0.3,
|
||||
release: 2,
|
||||
},
|
||||
filterEnvelope: {
|
||||
attack: 0.001,
|
||||
decay: 0.01,
|
||||
sustain: 0.5,
|
||||
baseFrequency: 200,
|
||||
octaves: 2.6,
|
||||
},
|
||||
}).toDestination();
|
||||
|
||||
bassPart.probability = 0.9;
|
||||
const bassPart = new Tone.Sequence(
|
||||
(time, note) => {
|
||||
bass.triggerAttackRelease(note, "16n", time);
|
||||
},
|
||||
["C2", ["C3", ["C3", "D2"]], "E2", ["D2", "A1"]],
|
||||
"4n"
|
||||
).start(0);
|
||||
|
||||
// set the transport
|
||||
Tone.Transport.bpm.value = 90;
|
||||
bassPart.probability = 0.9;
|
||||
|
||||
drawer().add({
|
||||
name: "Kick",
|
||||
tone: kick,
|
||||
open: false,
|
||||
}).add({
|
||||
name: "Snare",
|
||||
tone: snare,
|
||||
open: false,
|
||||
}).add({
|
||||
name: "Bass",
|
||||
tone: bass,
|
||||
open: false,
|
||||
}).add({
|
||||
name: "Keys",
|
||||
tone: keys,
|
||||
open: false,
|
||||
});
|
||||
// set the transport
|
||||
Tone.Transport.bpm.value = 90;
|
||||
|
||||
// bind the interface
|
||||
document.querySelector("tone-play-toggle").addEventListener("start", e => Tone.Transport.start());
|
||||
document.querySelector("tone-play-toggle").addEventListener("stop", e => Tone.Transport.stop());
|
||||
|
||||
</script>
|
||||
</body>
|
||||
drawer()
|
||||
.add({
|
||||
name: "Kick",
|
||||
tone: kick,
|
||||
open: false,
|
||||
})
|
||||
.add({
|
||||
name: "Snare",
|
||||
tone: snare,
|
||||
open: false,
|
||||
})
|
||||
.add({
|
||||
name: "Bass",
|
||||
tone: bass,
|
||||
open: false,
|
||||
})
|
||||
.add({
|
||||
name: "Keys",
|
||||
tone: keys,
|
||||
open: false,
|
||||
});
|
||||
|
||||
// bind the interface
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("start", (e) => Tone.Transport.start());
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("stop", (e) => Tone.Transport.stop());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,59 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>FMSynth</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>FMSynth</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="FMSynth">
|
||||
<div slot="explanation">
|
||||
<a href="https://tonejs.github.io/docs/FMSynth">Tone.FMSynth</a>
|
||||
is composed of two
|
||||
<a href="https://tonejs.github.io/docs/Synth">Tone.Synths</a>
|
||||
where one Tone.Synth modulates the frequency of a second Tone.Synth.
|
||||
</div>
|
||||
<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"
|
||||
/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="FMSynth">
|
||||
<div slot="explanation">
|
||||
<a href="https://tonejs.github.io/docs/latest/classes/FMSynth"
|
||||
>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>
|
||||
</tone-example>
|
||||
|
||||
<script type="text/javascript">
|
||||
const synth = new Tone.FMSynth({
|
||||
modulationIndex: 12.22,
|
||||
envelope: {
|
||||
attack: 0.01,
|
||||
decay: 0.2
|
||||
},
|
||||
modulation: {
|
||||
type: "square"
|
||||
},
|
||||
modulationEnvelope: {
|
||||
attack: 0.2,
|
||||
decay: 0.01
|
||||
}
|
||||
}).toDestination();
|
||||
<div id="content"></div>
|
||||
</tone-example>
|
||||
|
||||
piano({
|
||||
tone: synth,
|
||||
parent: document.querySelector("#content"),
|
||||
noteon: (note) => synth.triggerAttack(note.name),
|
||||
noteoff: (note) => synth.triggerRelease()
|
||||
});
|
||||
<script type="text/javascript">
|
||||
const synth = new Tone.FMSynth({
|
||||
modulationIndex: 12.22,
|
||||
envelope: {
|
||||
attack: 0.01,
|
||||
decay: 0.2,
|
||||
},
|
||||
modulation: {
|
||||
type: "square",
|
||||
},
|
||||
modulationEnvelope: {
|
||||
attack: 0.2,
|
||||
decay: 0.01,
|
||||
},
|
||||
}).toDestination();
|
||||
|
||||
ui({
|
||||
tone: synth,
|
||||
name: "FMSynth",
|
||||
parent: document.querySelector("#content"),
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
piano({
|
||||
tone: synth,
|
||||
parent: document.querySelector("#content"),
|
||||
noteon: (note) => synth.triggerAttack(note.name),
|
||||
noteoff: (note) => synth.triggerRelease(),
|
||||
});
|
||||
|
||||
ui({
|
||||
tone: synth,
|
||||
name: "FMSynth",
|
||||
parent: document.querySelector("#content"),
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,65 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Grain Player</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Grain Player</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style type="text/css">
|
||||
tone-play-toggle, tone-fft {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
<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"
|
||||
/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style type="text/css">
|
||||
tone-play-toggle,
|
||||
tone-fft {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
tone-fft {
|
||||
background-color: black;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
</style>
|
||||
<tone-example label="Granular Synthesis">
|
||||
<div slot="explanation">
|
||||
<a href="https://tonejs.github.io/docs/GrainPlayer">Tone.GrainPlayer</a> uses
|
||||
<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-fft {
|
||||
background-color: black;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
</style>
|
||||
<tone-example label="Granular Synthesis">
|
||||
<div slot="explanation">
|
||||
<a
|
||||
href="https://tonejs.github.io/docs/latest/classes/GrainPlayer"
|
||||
>Tone.GrainPlayer</a
|
||||
>
|
||||
uses
|
||||
<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>
|
||||
|
||||
<div id="content">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
</div>
|
||||
</tone-example>
|
||||
<tone-loader></tone-loader>
|
||||
|
||||
<script type="text/javascript">
|
||||
// the player
|
||||
const player = new Tone.GrainPlayer({
|
||||
url: "https://tonejs.github.io/audio/berklee/arpeggio3crazy.mp3",
|
||||
loop: true,
|
||||
grainSize: 0.1,
|
||||
overlap: 0.05,
|
||||
}).toDestination();
|
||||
<div id="content">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
</div>
|
||||
</tone-example>
|
||||
|
||||
ui({
|
||||
parent: document.querySelector("#content"),
|
||||
tone: player,
|
||||
});
|
||||
<script type="text/javascript">
|
||||
// the player
|
||||
const player = new Tone.GrainPlayer({
|
||||
url: "https://tonejs.github.io/audio/berklee/arpeggio3crazy.mp3",
|
||||
loop: true,
|
||||
grainSize: 0.1,
|
||||
overlap: 0.05,
|
||||
}).toDestination();
|
||||
|
||||
// bind the interface
|
||||
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
|
||||
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
|
||||
ui({
|
||||
parent: document.querySelector("#content"),
|
||||
tone: player,
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
// bind the interface
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("start", () => player.start());
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("stop", () => player.stop());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,268 +1,305 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>FatOscillator</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>FatOscillator</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style type="text/css">
|
||||
tone-play-toggle {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<tone-example label="Supersaw">
|
||||
<div slot="explanation">
|
||||
<a href="https://tonejs.github.io/docs/FatOscillator">Tone.FatOscillator</a> creates multiple oscillators
|
||||
and detunes them slightly from each 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/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>
|
||||
<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"
|
||||
/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style type="text/css">
|
||||
tone-play-toggle {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<tone-example label="Supersaw">
|
||||
<div slot="explanation">
|
||||
<a
|
||||
href="https://tonejs.github.io/docs/latest/classes/FatOscillator"
|
||||
>Tone.FatOscillator</a
|
||||
>
|
||||
creates multiple oscillators and detunes them slightly from each
|
||||
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">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
</div>
|
||||
</tone-example>
|
||||
<div id="content">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
</div>
|
||||
</tone-example>
|
||||
|
||||
<script type="text/javascript">
|
||||
const synth = new Tone.PolySynth(Tone.Synth, {
|
||||
oscillator: {
|
||||
type: "fatsawtooth",
|
||||
count: 3,
|
||||
spread: 30
|
||||
},
|
||||
envelope: {
|
||||
attack: 0.01,
|
||||
decay: 0.1,
|
||||
sustain: 0.5,
|
||||
release: 0.4,
|
||||
attackCurve: "exponential"
|
||||
},
|
||||
}).toDestination();
|
||||
|
||||
// Van Halen - Jump MIDI from http://www.midiworld.com/files/1121/
|
||||
// converted using
|
||||
const part = new Tone.Part(((time, note) => {
|
||||
synth.triggerAttackRelease(note.noteName, note.duration, time, note.velocity);
|
||||
}), [{
|
||||
time: "192i",
|
||||
noteName: "G4",
|
||||
velocity: 0.8110236220472441,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "192i",
|
||||
noteName: "B4",
|
||||
velocity: 0.7874015748031497,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "192i",
|
||||
noteName: "D5",
|
||||
velocity: 0.8031496062992126,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "480i",
|
||||
noteName: "G4",
|
||||
velocity: 0.7559055118110236,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "480i",
|
||||
noteName: "C5",
|
||||
velocity: 0.6850393700787402,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "480i",
|
||||
noteName: "E5",
|
||||
velocity: 0.6771653543307087,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "768i",
|
||||
noteName: "F4",
|
||||
velocity: 0.8661417322834646,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "768i",
|
||||
noteName: "A4",
|
||||
velocity: 0.8346456692913385,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "768i",
|
||||
noteName: "C5",
|
||||
velocity: 0.8188976377952756,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "1056i",
|
||||
noteName: "F4",
|
||||
velocity: 0.7007874015748031,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "1056i",
|
||||
noteName: "A4",
|
||||
velocity: 0.6850393700787402,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "1056i",
|
||||
noteName: "C5",
|
||||
velocity: 0.6614173228346457,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "1248i",
|
||||
noteName: "G4",
|
||||
velocity: 0.6771653543307087,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "1248i",
|
||||
noteName: "B4",
|
||||
velocity: 0.6771653543307087,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "1248i",
|
||||
noteName: "D5",
|
||||
velocity: 0.7165354330708661,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "1440i",
|
||||
noteName: "G4",
|
||||
velocity: 0.8818897637795275,
|
||||
duration: "248i"
|
||||
},
|
||||
{
|
||||
time: "1440i",
|
||||
noteName: "B4",
|
||||
velocity: 0.84251968503937,
|
||||
duration: "248i"
|
||||
},
|
||||
{
|
||||
time: "1440i",
|
||||
noteName: "D5",
|
||||
velocity: 0.8818897637795275,
|
||||
duration: "248i"
|
||||
},
|
||||
{
|
||||
time: "1728i",
|
||||
noteName: "G4",
|
||||
velocity: 0.8267716535433071,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "1728i",
|
||||
noteName: "C5",
|
||||
velocity: 0.8031496062992126,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "1728i",
|
||||
noteName: "E5",
|
||||
velocity: 0.8188976377952756,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "2016i",
|
||||
noteName: "F4",
|
||||
velocity: 0.7086614173228346,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "2016i",
|
||||
noteName: "A4",
|
||||
velocity: 0.7244094488188977,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "2016i",
|
||||
noteName: "C5",
|
||||
velocity: 0.7007874015748031,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "2208i",
|
||||
noteName: "C4",
|
||||
velocity: 0.9921259842519685,
|
||||
duration: "296i"
|
||||
},
|
||||
{
|
||||
time: "2208i",
|
||||
noteName: "F4",
|
||||
velocity: 0.968503937007874,
|
||||
duration: "200i"
|
||||
},
|
||||
{
|
||||
time: "2208i",
|
||||
noteName: "A4",
|
||||
velocity: 0.9606299212598425,
|
||||
duration: "208i"
|
||||
},
|
||||
{
|
||||
time: "2400i",
|
||||
noteName: "E4",
|
||||
velocity: 0.7559055118110236,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "2400i",
|
||||
noteName: "G4",
|
||||
velocity: 0.7007874015748031,
|
||||
duration: "104i"
|
||||
},
|
||||
{
|
||||
time: "2592i",
|
||||
noteName: "C4",
|
||||
velocity: 0.968503937007874,
|
||||
duration: "488i"
|
||||
},
|
||||
{
|
||||
time: "2592i",
|
||||
noteName: "D4",
|
||||
velocity: 0.9448818897637795,
|
||||
duration: "488i"
|
||||
},
|
||||
{
|
||||
time: "2592i",
|
||||
noteName: "G4",
|
||||
velocity: 0.937007874015748,
|
||||
duration: "488i"
|
||||
}
|
||||
]).start(0);
|
||||
<script type="text/javascript">
|
||||
const synth = new Tone.PolySynth(Tone.Synth, {
|
||||
oscillator: {
|
||||
type: "fatsawtooth",
|
||||
count: 3,
|
||||
spread: 30,
|
||||
},
|
||||
envelope: {
|
||||
attack: 0.01,
|
||||
decay: 0.1,
|
||||
sustain: 0.5,
|
||||
release: 0.4,
|
||||
attackCurve: "exponential",
|
||||
},
|
||||
}).toDestination();
|
||||
|
||||
part.loop = true;
|
||||
part.loopEnd = "4m";
|
||||
// Van Halen - Jump MIDI from http://www.midiworld.com/files/1121/
|
||||
// converted using
|
||||
const part = new Tone.Part(
|
||||
(time, note) => {
|
||||
synth.triggerAttackRelease(
|
||||
note.noteName,
|
||||
note.duration,
|
||||
time,
|
||||
note.velocity
|
||||
);
|
||||
},
|
||||
[
|
||||
{
|
||||
time: "192i",
|
||||
noteName: "G4",
|
||||
velocity: 0.8110236220472441,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "192i",
|
||||
noteName: "B4",
|
||||
velocity: 0.7874015748031497,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "192i",
|
||||
noteName: "D5",
|
||||
velocity: 0.8031496062992126,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "480i",
|
||||
noteName: "G4",
|
||||
velocity: 0.7559055118110236,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "480i",
|
||||
noteName: "C5",
|
||||
velocity: 0.6850393700787402,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "480i",
|
||||
noteName: "E5",
|
||||
velocity: 0.6771653543307087,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "768i",
|
||||
noteName: "F4",
|
||||
velocity: 0.8661417322834646,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "768i",
|
||||
noteName: "A4",
|
||||
velocity: 0.8346456692913385,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "768i",
|
||||
noteName: "C5",
|
||||
velocity: 0.8188976377952756,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "1056i",
|
||||
noteName: "F4",
|
||||
velocity: 0.7007874015748031,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "1056i",
|
||||
noteName: "A4",
|
||||
velocity: 0.6850393700787402,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "1056i",
|
||||
noteName: "C5",
|
||||
velocity: 0.6614173228346457,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "1248i",
|
||||
noteName: "G4",
|
||||
velocity: 0.6771653543307087,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "1248i",
|
||||
noteName: "B4",
|
||||
velocity: 0.6771653543307087,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "1248i",
|
||||
noteName: "D5",
|
||||
velocity: 0.7165354330708661,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "1440i",
|
||||
noteName: "G4",
|
||||
velocity: 0.8818897637795275,
|
||||
duration: "248i",
|
||||
},
|
||||
{
|
||||
time: "1440i",
|
||||
noteName: "B4",
|
||||
velocity: 0.84251968503937,
|
||||
duration: "248i",
|
||||
},
|
||||
{
|
||||
time: "1440i",
|
||||
noteName: "D5",
|
||||
velocity: 0.8818897637795275,
|
||||
duration: "248i",
|
||||
},
|
||||
{
|
||||
time: "1728i",
|
||||
noteName: "G4",
|
||||
velocity: 0.8267716535433071,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "1728i",
|
||||
noteName: "C5",
|
||||
velocity: 0.8031496062992126,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "1728i",
|
||||
noteName: "E5",
|
||||
velocity: 0.8188976377952756,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "2016i",
|
||||
noteName: "F4",
|
||||
velocity: 0.7086614173228346,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "2016i",
|
||||
noteName: "A4",
|
||||
velocity: 0.7244094488188977,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "2016i",
|
||||
noteName: "C5",
|
||||
velocity: 0.7007874015748031,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "2208i",
|
||||
noteName: "C4",
|
||||
velocity: 0.9921259842519685,
|
||||
duration: "296i",
|
||||
},
|
||||
{
|
||||
time: "2208i",
|
||||
noteName: "F4",
|
||||
velocity: 0.968503937007874,
|
||||
duration: "200i",
|
||||
},
|
||||
{
|
||||
time: "2208i",
|
||||
noteName: "A4",
|
||||
velocity: 0.9606299212598425,
|
||||
duration: "208i",
|
||||
},
|
||||
{
|
||||
time: "2400i",
|
||||
noteName: "E4",
|
||||
velocity: 0.7559055118110236,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "2400i",
|
||||
noteName: "G4",
|
||||
velocity: 0.7007874015748031,
|
||||
duration: "104i",
|
||||
},
|
||||
{
|
||||
time: "2592i",
|
||||
noteName: "C4",
|
||||
velocity: 0.968503937007874,
|
||||
duration: "488i",
|
||||
},
|
||||
{
|
||||
time: "2592i",
|
||||
noteName: "D4",
|
||||
velocity: 0.9448818897637795,
|
||||
duration: "488i",
|
||||
},
|
||||
{
|
||||
time: "2592i",
|
||||
noteName: "G4",
|
||||
velocity: 0.937007874015748,
|
||||
duration: "488i",
|
||||
},
|
||||
]
|
||||
).start(0);
|
||||
|
||||
Tone.Transport.bpm.value = 132;
|
||||
part.loop = true;
|
||||
part.loopEnd = "4m";
|
||||
|
||||
drawer().add({
|
||||
tone: synth,
|
||||
});
|
||||
Tone.Transport.bpm.value = 132;
|
||||
|
||||
// bind the interface
|
||||
document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());
|
||||
document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop());
|
||||
drawer().add({
|
||||
tone: synth,
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
// bind the interface
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("start", () => Tone.Transport.start());
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("stop", () => Tone.Transport.stop());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,87 +1,169 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>LFO Effects</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>LFO Effects</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="LFO Effects">
|
||||
<div slot="explanation">
|
||||
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.
|
||||
<br><br>
|
||||
Docs on <a href="https://tonejs.github.io/docs/AutoPanner">Tone.AutoPanner</a>,
|
||||
<a href="https://tonejs.github.io/docs/AutoFilter">Tone.AutoFilter</a>, and
|
||||
<a href="https://tonejs.github.io/docs/Tremolo">Tone.Tremolo</a>
|
||||
</div>
|
||||
<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"
|
||||
/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="LFO Effects">
|
||||
<div slot="explanation">
|
||||
These effects use an
|
||||
<a href="https://tonejs.github.io/docs/latest/classes/LFO"
|
||||
>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">
|
||||
<tone-slider label="Panner" id="panner" units="hz" value="4" step="0.5" min="1" 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>
|
||||
</tone-content>
|
||||
</tone-example>
|
||||
<div id="content">
|
||||
<tone-slider
|
||||
label="Panner"
|
||||
id="panner"
|
||||
units="hz"
|
||||
value="4"
|
||||
step="0.5"
|
||||
min="1"
|
||||
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">
|
||||
// AutoPanner - a panning modulation effect
|
||||
const panner = new Tone.AutoPanner({
|
||||
frequency: 4,
|
||||
depth: 1
|
||||
}).toDestination().start();
|
||||
<script type="text/javascript">
|
||||
// AutoPanner - a panning modulation effect
|
||||
const panner = new Tone.AutoPanner({
|
||||
frequency: 4,
|
||||
depth: 1,
|
||||
})
|
||||
.toDestination()
|
||||
.start();
|
||||
|
||||
// AutoFilter - a filter modulation effect
|
||||
const filter = new Tone.AutoFilter({
|
||||
frequency: 2,
|
||||
depth: 0.6
|
||||
}).toDestination().start();
|
||||
// AutoFilter - a filter modulation effect
|
||||
const filter = new Tone.AutoFilter({
|
||||
frequency: 2,
|
||||
depth: 0.6,
|
||||
})
|
||||
.toDestination()
|
||||
.start();
|
||||
|
||||
// Tremolo - an amplitude modulation effect
|
||||
const tremolo = new Tone.Tremolo({
|
||||
frequency: 0.6,
|
||||
depth: 0.7
|
||||
}).toDestination().start();
|
||||
// Tremolo - an amplitude modulation effect
|
||||
const tremolo = new Tone.Tremolo({
|
||||
frequency: 0.6,
|
||||
depth: 0.7,
|
||||
})
|
||||
.toDestination()
|
||||
.start();
|
||||
|
||||
// the input oscillators
|
||||
const pannerOsc = new Tone.Oscillator({
|
||||
volume: -12,
|
||||
type: "square6",
|
||||
frequency: "C4"
|
||||
}).connect(panner);
|
||||
// the input oscillators
|
||||
const pannerOsc = new Tone.Oscillator({
|
||||
volume: -12,
|
||||
type: "square6",
|
||||
frequency: "C4",
|
||||
}).connect(panner);
|
||||
|
||||
const filterOsc = new Tone.Oscillator({
|
||||
volume: -12,
|
||||
type: "square6",
|
||||
frequency: "E4"
|
||||
}).connect(filter);
|
||||
const filterOsc = new Tone.Oscillator({
|
||||
volume: -12,
|
||||
type: "square6",
|
||||
frequency: "E4",
|
||||
}).connect(filter);
|
||||
|
||||
const tremoloOsc = new Tone.Oscillator({
|
||||
volume: -12,
|
||||
type: "square6",
|
||||
frequency: "A4"
|
||||
}).connect(tremolo);
|
||||
const tremoloOsc = new Tone.Oscillator({
|
||||
volume: -12,
|
||||
type: "square6",
|
||||
frequency: "A4",
|
||||
}).connect(tremolo);
|
||||
|
||||
// bind the interface
|
||||
document.querySelector("#osc0").addEventListener("start", () => pannerOsc.start());
|
||||
document.querySelector("#osc0").addEventListener("stop", () => pannerOsc.stop());
|
||||
document.querySelector("#panner").addEventListener("input", (e) => panner.frequency.value = parseFloat(e.target.value));
|
||||
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>
|
||||
// bind the interface
|
||||
document
|
||||
.querySelector("#osc0")
|
||||
.addEventListener("start", () => pannerOsc.start());
|
||||
document
|
||||
.querySelector("#osc0")
|
||||
.addEventListener("stop", () => pannerOsc.stop());
|
||||
document
|
||||
.querySelector("#panner")
|
||||
.addEventListener(
|
||||
"input",
|
||||
(e) => (panner.frequency.value = parseFloat(e.target.value))
|
||||
);
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,57 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Meter</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Meter</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="Meter">
|
||||
<tone-loader></tone-loader>
|
||||
<div slot="explanation">
|
||||
<a href="https://tonejs.github.io/docs/Meter" target="_blank">Tone.Meter</a>
|
||||
gives you the level of the incoming signal in decibels.
|
||||
</div>
|
||||
<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"
|
||||
/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="Meter">
|
||||
<tone-loader></tone-loader>
|
||||
<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">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
</div>
|
||||
</tone-example>
|
||||
<div id="content">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
</div>
|
||||
</tone-example>
|
||||
|
||||
<script type="text/javascript">
|
||||
const player = new Tone.Player({
|
||||
url: "https://tonejs.github.io/audio/berklee/Resonant_FM_laser1.mp3",
|
||||
loop: true
|
||||
}).toDestination();
|
||||
<script type="text/javascript">
|
||||
const player = new Tone.Player({
|
||||
url: "https://tonejs.github.io/audio/berklee/Resonant_FM_laser1.mp3",
|
||||
loop: true,
|
||||
}).toDestination();
|
||||
|
||||
const toneMeter = new Tone.Meter({
|
||||
channelCount: 2,
|
||||
});
|
||||
player.connect(toneMeter);
|
||||
const toneMeter = new Tone.Meter({
|
||||
channelCount: 2,
|
||||
});
|
||||
player.connect(toneMeter);
|
||||
|
||||
meter({
|
||||
tone: toneMeter,
|
||||
parent: document.querySelector("#content")
|
||||
});
|
||||
meter({
|
||||
tone: toneMeter,
|
||||
parent: document.querySelector("#content"),
|
||||
});
|
||||
|
||||
ui({
|
||||
tone: player,
|
||||
name: "Player",
|
||||
parent: document.querySelector("#content")
|
||||
});
|
||||
ui({
|
||||
tone: player,
|
||||
name: "Player",
|
||||
parent: document.querySelector("#content"),
|
||||
});
|
||||
|
||||
// bind the interface
|
||||
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
|
||||
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
|
||||
|
||||
</script>
|
||||
</body>
|
||||
// bind the interface
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("start", () => player.start());
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("stop", () => player.stop());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,74 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Mixer</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Mixer</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
<style type="text/css">
|
||||
#tracks {
|
||||
display: flex;
|
||||
}
|
||||
#tracks tone-channel {
|
||||
flex-grow: 1;
|
||||
margin: 5px;
|
||||
width: 20%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="Channel">
|
||||
<div slot="explanation">
|
||||
<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).
|
||||
</div>
|
||||
|
||||
<tone-loader></tone-loader>
|
||||
<div id="content">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
</div>
|
||||
</tone-example>
|
||||
<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"
|
||||
/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
<style type="text/css">
|
||||
#tracks {
|
||||
display: flex;
|
||||
}
|
||||
#tracks tone-channel {
|
||||
flex-grow: 1;
|
||||
margin: 5px;
|
||||
width: 20%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<script type="text/javascript">
|
||||
function makeChannel(name, url, pan) {
|
||||
const channel = new Tone.Channel({
|
||||
pan
|
||||
}).toDestination();
|
||||
const player = new Tone.Player({
|
||||
url: `https://tonejs.github.io/audio/berklee/${url}.mp3`,
|
||||
loop: true
|
||||
}).sync().start(0);
|
||||
player.connect(channel);
|
||||
<tone-loader></tone-loader>
|
||||
<div id="content">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
</div>
|
||||
</tone-example>
|
||||
|
||||
// add a UI element
|
||||
ui({
|
||||
name,
|
||||
tone: channel,
|
||||
parent: document.querySelector("#content")
|
||||
<script type="text/javascript">
|
||||
function makeChannel(name, url, pan) {
|
||||
const channel = new Tone.Channel({
|
||||
pan,
|
||||
}).toDestination();
|
||||
const player = new Tone.Player({
|
||||
url: `https://tonejs.github.io/audio/berklee/${url}.mp3`,
|
||||
loop: true,
|
||||
})
|
||||
.sync()
|
||||
.start(0);
|
||||
player.connect(channel);
|
||||
|
||||
// add a UI element
|
||||
ui({
|
||||
name,
|
||||
tone: channel,
|
||||
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
|
||||
const toneMeter = new Tone.Meter({ channelCount: 2 });
|
||||
Tone.Destination.chain(toneMeter);
|
||||
meter({
|
||||
tone: toneMeter,
|
||||
parent: document.querySelector("#content")
|
||||
});
|
||||
|
||||
makeChannel("Guitar 0", "comping1", 1);
|
||||
makeChannel("Guitar 1", "comping2", -1);
|
||||
makeChannel("Guitar 2", "comping3", 0.25);
|
||||
makeChannel("Guitar 3", "comping4", -0.25);
|
||||
makeChannel("Guitar 0", "comping1", 1);
|
||||
makeChannel("Guitar 1", "comping2", -1);
|
||||
makeChannel("Guitar 2", "comping3", 0.25);
|
||||
makeChannel("Guitar 3", "comping4", -0.25);
|
||||
|
||||
document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());
|
||||
document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop());
|
||||
</script>
|
||||
</body>
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("start", () => Tone.Transport.start());
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("stop", () => Tone.Transport.stop());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,69 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>MonoSynth</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>MonoSynth</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
tone-piano {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<tone-example label="MonoSynth">
|
||||
<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
|
||||
<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"
|
||||
/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
tone-piano {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}).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({
|
||||
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"
|
||||
});
|
||||
<div id="content"></div>
|
||||
</tone-example>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
<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();
|
||||
|
||||
piano({
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,63 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Noise</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Noise</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
tone-trigger, tone-oscilloscope {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
tone-oscilloscope {
|
||||
background-color: black;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<tone-example label="Noise">
|
||||
<div slot="explanation">
|
||||
<a href="https://tonejs.github.io/docs/Noise">Tone.Noise</a>
|
||||
has 3 different types of noise. Careful, it's loud!
|
||||
</div>
|
||||
<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"
|
||||
/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
tone-trigger,
|
||||
tone-oscilloscope {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
tone-oscilloscope {
|
||||
background-color: black;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<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">
|
||||
<tone-momentary-button></tone-momentary-button>
|
||||
</div>
|
||||
</tone-example>
|
||||
<div id="content">
|
||||
<tone-momentary-button></tone-momentary-button>
|
||||
</div>
|
||||
</tone-example>
|
||||
|
||||
<script type="text/javascript">
|
||||
// make the noise and connect it to the output
|
||||
const noise = new Tone.Noise({
|
||||
volume: -10,
|
||||
type: "brown"
|
||||
}).toDestination();
|
||||
<script type="text/javascript">
|
||||
// make the noise and connect it to the output
|
||||
const noise = new Tone.Noise({
|
||||
volume: -10,
|
||||
type: "brown",
|
||||
}).toDestination();
|
||||
|
||||
const toneWaveform = new Tone.Waveform();
|
||||
noise.connect(toneWaveform);
|
||||
const toneWaveform = new Tone.Waveform();
|
||||
noise.connect(toneWaveform);
|
||||
|
||||
waveform({
|
||||
parent: document.querySelector("#content"),
|
||||
tone: toneWaveform,
|
||||
});
|
||||
|
||||
ui({
|
||||
parent: document.querySelector("#content"),
|
||||
tone: noise,
|
||||
});
|
||||
waveform({
|
||||
parent: document.querySelector("#content"),
|
||||
tone: toneWaveform,
|
||||
});
|
||||
|
||||
// bind the inteface
|
||||
document.querySelector("tone-momentary-button").addEventListener("down", () => noise.start());
|
||||
document.querySelector("tone-momentary-button").addEventListener("up", () => noise.stop());
|
||||
</script>
|
||||
</body>
|
||||
ui({
|
||||
parent: document.querySelector("#content"),
|
||||
tone: noise,
|
||||
});
|
||||
|
||||
// bind the inteface
|
||||
document
|
||||
.querySelector("tone-momentary-button")
|
||||
.addEventListener("down", () => noise.start());
|
||||
document
|
||||
.querySelector("tone-momentary-button")
|
||||
.addEventListener("up", () => noise.stop());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,103 +1,139 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Offline</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Offline</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
<style type="text/css">
|
||||
tone-button {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="Offline Rendering">
|
||||
<tone-loader></tone-loader>
|
||||
<div slot="explanation">
|
||||
Tone.Offline renders a chunk of Tone.js code into an AudioBuffer. An offline instance of Tone.Transport is passed into the callback which can be used to schedule events. It may take a moment to render the sound.
|
||||
<br><br>
|
||||
<a href="https://tonejs.github.io/docs/Tone#offline-static">Tone.Offline</a> docs.
|
||||
</div>
|
||||
<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"
|
||||
/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
<style type="text/css">
|
||||
tone-button {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="Offline Rendering">
|
||||
<tone-loader></tone-loader>
|
||||
<div slot="explanation">
|
||||
Tone.Offline renders a chunk of Tone.js code into an
|
||||
AudioBuffer. An offline instance of Tone.Transport is passed
|
||||
into the callback which can be used to schedule events. It may
|
||||
take a moment to render the sound.
|
||||
<br /><br />
|
||||
<a
|
||||
href="https://tonejs.github.io/docs/latest/functions/Offline.html"
|
||||
>Tone.Offline</a
|
||||
>
|
||||
docs.
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<tone-play-toggle disabled></tone-play-toggle>
|
||||
</div>
|
||||
</tone-example>
|
||||
<div id="content">
|
||||
<tone-play-toggle disabled></tone-play-toggle>
|
||||
</div>
|
||||
</tone-example>
|
||||
|
||||
<script type="text/javascript">
|
||||
// play the buffer with a Tone.Player when it's been generated
|
||||
const player = new Tone.Player().toDestination();
|
||||
<script type="text/javascript">
|
||||
// play the buffer with a Tone.Player when it's been generated
|
||||
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 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 pannerB = new Tone.Panner(1).connect(reverb);
|
||||
const synthB = new Tone.Synth({
|
||||
envelope: {
|
||||
attack: 0.001,
|
||||
decay: 3,
|
||||
sustain: 0,
|
||||
},
|
||||
oscillator: {
|
||||
type: "square8",
|
||||
},
|
||||
}).connect(pannerB);
|
||||
const seqB = new Tone.Sequence(
|
||||
(time, note) => {
|
||||
synthB.triggerAttack(note, time);
|
||||
},
|
||||
["G#4", "A4", "G4", "F4", "C4"],
|
||||
"8n"
|
||||
).start("16n");
|
||||
seqB.loop = false;
|
||||
|
||||
const pannerB = new Tone.Panner(1).connect(reverb);
|
||||
const synthB = new Tone.Synth({
|
||||
envelope: {
|
||||
attack: 0.001,
|
||||
decay: 3,
|
||||
sustain: 0
|
||||
},
|
||||
oscillator: {
|
||||
type: "square8"
|
||||
}
|
||||
}).connect(pannerB);
|
||||
const seqB = new Tone.Sequence(((time, note) => {
|
||||
synthB.triggerAttack(note, time);
|
||||
}), ["G#4", "A4", "G4", "F4", "C4"], "8n").start("16n");
|
||||
seqB.loop = false;
|
||||
const bass = new Tone.MonoSynth({
|
||||
envelope: {
|
||||
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;
|
||||
|
||||
const bass = new Tone.MonoSynth({
|
||||
envelope: {
|
||||
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;
|
||||
transport.start();
|
||||
|
||||
transport.bpm.value = 150;
|
||||
transport.start();
|
||||
// return a promise
|
||||
return reverb.ready;
|
||||
}, 7);
|
||||
|
||||
// return a promise
|
||||
return reverb.ready;
|
||||
}, 7);
|
||||
// set the buffer when it's done
|
||||
renderingPromise.then((buffer) => (player.buffer = buffer));
|
||||
renderingPromise.then(
|
||||
() =>
|
||||
(document.querySelector("tone-play-toggle").disabled =
|
||||
false)
|
||||
);
|
||||
|
||||
// set the buffer when it's done
|
||||
renderingPromise.then(buffer => player.buffer = buffer);
|
||||
renderingPromise.then(() => document.querySelector("tone-play-toggle").disabled = false);
|
||||
|
||||
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
|
||||
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
|
||||
|
||||
</script>
|
||||
</body>
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("start", () => player.start());
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("stop", () => player.stop());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,53 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Oscillator</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Oscillator</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
<style type="text/css">
|
||||
tone-play-toggle {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="Oscillator">
|
||||
<div slot="explanation">
|
||||
The oscillator has 4 basic types which can be altered by setting the number
|
||||
of partials and partials array.
|
||||
<br><br>
|
||||
<a href="https://tonejs.github.io/docs/Oscillator">Tone.Oscillator</a> docs.
|
||||
</div>
|
||||
<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"
|
||||
/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
<style type="text/css">
|
||||
tone-play-toggle {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="Oscillator">
|
||||
<div slot="explanation">
|
||||
The oscillator has 4 basic types which can be altered by setting
|
||||
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">
|
||||
<tone-momentary-button></tone-momentary-button>
|
||||
</div>
|
||||
</tone-example>
|
||||
<div id="content">
|
||||
<tone-momentary-button></tone-momentary-button>
|
||||
</div>
|
||||
</tone-example>
|
||||
|
||||
<script type="text/javascript">
|
||||
const osc = new Tone.Oscillator({
|
||||
type: "square",
|
||||
frequency: 440,
|
||||
volume: -16,
|
||||
}).toDestination();
|
||||
|
||||
<script type="text/javascript">
|
||||
const osc = new Tone.Oscillator({
|
||||
type: "square",
|
||||
frequency: 440,
|
||||
volume: -16
|
||||
}).toDestination();
|
||||
ui({
|
||||
tone: osc,
|
||||
parent: document.querySelector("#content"),
|
||||
});
|
||||
|
||||
ui({
|
||||
tone: osc,
|
||||
parent: document.querySelector("#content")
|
||||
});
|
||||
|
||||
// bind the interface
|
||||
document.querySelector("tone-momentary-button").addEventListener("down", () => osc.start());
|
||||
document.querySelector("tone-momentary-button").addEventListener("up", () => osc.stop());
|
||||
</script>
|
||||
</body>
|
||||
// bind the interface
|
||||
document
|
||||
.querySelector("tone-momentary-button")
|
||||
.addEventListener("down", () => osc.start());
|
||||
document
|
||||
.querySelector("tone-momentary-button")
|
||||
.addEventListener("up", () => osc.stop());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,54 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Ping Pong Delay</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Ping Pong Delay</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="Ping Pong Delay">
|
||||
<tone-loader></tone-loader>
|
||||
<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"
|
||||
/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="Ping Pong Delay">
|
||||
<tone-loader></tone-loader>
|
||||
|
||||
<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.
|
||||
<br><br>
|
||||
<a href="https://tonejs.github.io/docs/PingPongDelay">Tone.PingPongDelay</a> docs.
|
||||
</div>
|
||||
<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.
|
||||
<br /><br />
|
||||
<a
|
||||
href="https://tonejs.github.io/docs/latest/classes/PingPongDelay"
|
||||
>Tone.PingPongDelay</a
|
||||
>
|
||||
docs.
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<tone-momentary-button></tone-momentary-button>
|
||||
</div>
|
||||
</tone-example>
|
||||
|
||||
<script type="text/javascript">
|
||||
// the feedback delay
|
||||
const feedbackDelay = new Tone.PingPongDelay({
|
||||
delayTime: "8n",
|
||||
feedback: 0.6,
|
||||
wet: 0.5
|
||||
}).toDestination();
|
||||
<div id="content">
|
||||
<tone-momentary-button></tone-momentary-button>
|
||||
</div>
|
||||
</tone-example>
|
||||
|
||||
// play a snare sound through it
|
||||
const player = new Tone.Player("https://tonejs.github.io/audio/drum-samples/CR78/snare.mp3").connect(feedbackDelay);
|
||||
<script type="text/javascript">
|
||||
// the feedback delay
|
||||
const feedbackDelay = new Tone.PingPongDelay({
|
||||
delayTime: "8n",
|
||||
feedback: 0.6,
|
||||
wet: 0.5,
|
||||
}).toDestination();
|
||||
|
||||
const toneMeter = new Tone.Meter({ channelCount: 2 });
|
||||
feedbackDelay.connect(toneMeter);
|
||||
// play a snare sound through it
|
||||
const player = new Tone.Player(
|
||||
"https://tonejs.github.io/audio/drum-samples/CR78/snare.mp3"
|
||||
).connect(feedbackDelay);
|
||||
|
||||
meter({
|
||||
tone: toneMeter,
|
||||
parent: document.querySelector("#content")
|
||||
});
|
||||
const toneMeter = new Tone.Meter({ channelCount: 2 });
|
||||
feedbackDelay.connect(toneMeter);
|
||||
|
||||
document.querySelector("tone-momentary-button").addEventListener("down", () => player.start());
|
||||
document.querySelector("tone-momentary-button").addEventListener("up", () => player.stop());
|
||||
</script>
|
||||
</body>
|
||||
meter({
|
||||
tone: toneMeter,
|
||||
parent: document.querySelector("#content"),
|
||||
});
|
||||
|
||||
document
|
||||
.querySelector("tone-momentary-button")
|
||||
.addEventListener("down", () => player.start());
|
||||
document
|
||||
.querySelector("tone-momentary-button")
|
||||
.addEventListener("up", () => player.stop());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,61 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Pitch Shift</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Pitch Shift</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
tone-slider {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
<tone-example label="Pitch Shift">
|
||||
<div slot="explanation">
|
||||
This example demonstrates the Pitch Shift effect.
|
||||
<br><br>
|
||||
<a href="https://tonejs.github.io/docs/PitchShift">Tone.Pitch Shift</a> docs.
|
||||
</div>
|
||||
|
||||
<tone-loader></tone-loader>
|
||||
<div id="content">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
<tone-slider label="pitch" min="-12" max="12" value="0" units="hz"></tone-slider>
|
||||
</div>
|
||||
</tone-example>
|
||||
<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"
|
||||
/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
tone-slider {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
<tone-example label="Pitch Shift">
|
||||
<div slot="explanation">
|
||||
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>
|
||||
|
||||
<script type="text/javascript">
|
||||
const pitchShift = new Tone.PitchShift().toDestination();
|
||||
const player = new Tone.Player("https://tonejs.github.io/audio/berklee/groovin_analogsynth1.mp3").connect(pitchShift);
|
||||
player.loop = true;
|
||||
<tone-loader></tone-loader>
|
||||
<div id="content">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
<tone-slider
|
||||
label="pitch"
|
||||
min="-12"
|
||||
max="12"
|
||||
value="0"
|
||||
units="hz"
|
||||
></tone-slider>
|
||||
</div>
|
||||
</tone-example>
|
||||
|
||||
const toneFFT = new Tone.FFT();
|
||||
pitchShift.connect(toneFFT);
|
||||
fft({
|
||||
parent: document.querySelector("#content"),
|
||||
tone: toneFFT,
|
||||
});
|
||||
<script type="text/javascript">
|
||||
const pitchShift = new Tone.PitchShift().toDestination();
|
||||
const player = new Tone.Player(
|
||||
"https://tonejs.github.io/audio/berklee/groovin_analogsynth1.mp3"
|
||||
).connect(pitchShift);
|
||||
player.loop = true;
|
||||
|
||||
// bind the interface
|
||||
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
|
||||
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
|
||||
// document.querySelector("tone-play-toggle").addEventListener('start', () => {
|
||||
// debugger;
|
||||
// });
|
||||
const toneFFT = new Tone.FFT();
|
||||
pitchShift.connect(toneFFT);
|
||||
fft({
|
||||
parent: document.querySelector("#content"),
|
||||
tone: toneFFT,
|
||||
});
|
||||
|
||||
document.querySelector("tone-slider").addEventListener("input", e => {
|
||||
pitchShift.pitch = parseFloat(e.target.value);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
// bind the interface
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("start", () => player.start());
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("stop", () => player.stop());
|
||||
// document.querySelector("tone-play-toggle").addEventListener('start', () => {
|
||||
// debugger;
|
||||
// });
|
||||
|
||||
document
|
||||
.querySelector("tone-slider")
|
||||
.addEventListener("input", (e) => {
|
||||
pitchShift.pitch = parseFloat(e.target.value);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,54 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Player</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Player</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
<style type="text/css">
|
||||
tone-play-toggle {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="Player">
|
||||
<tone-loader></tone-loader>
|
||||
<div slot="explanation">
|
||||
Click on the button to play the audio file on loop
|
||||
using <a href="https://tonejs.github.io/docs/Player">Tone.Player</a>.
|
||||
</div>
|
||||
<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"
|
||||
/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
<style type="text/css">
|
||||
tone-play-toggle {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="Player">
|
||||
<tone-loader></tone-loader>
|
||||
<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">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
</div>
|
||||
</tone-example>
|
||||
|
||||
<script type="text/javascript">
|
||||
// the player
|
||||
const player = new Tone.Player({
|
||||
url: "https://tonejs.github.io/audio/loop/FWDL.mp3",
|
||||
loop: true,
|
||||
loopStart: 0.5,
|
||||
loopEnd: 0.7,
|
||||
}).toDestination();
|
||||
<div id="content">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
</div>
|
||||
</tone-example>
|
||||
|
||||
ui({
|
||||
tone: player,
|
||||
parent: document.querySelector("#content")
|
||||
});
|
||||
<script type="text/javascript">
|
||||
// the player
|
||||
const player = new Tone.Player({
|
||||
url: "https://tonejs.github.io/audio/loop/FWDL.mp3",
|
||||
loop: true,
|
||||
loopStart: 0.5,
|
||||
loopEnd: 0.7,
|
||||
}).toDestination();
|
||||
|
||||
// bind the interface
|
||||
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
|
||||
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
|
||||
</script>
|
||||
ui({
|
||||
tone: player,
|
||||
parent: document.querySelector("#content"),
|
||||
});
|
||||
|
||||
</body>
|
||||
// bind the interface
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("start", () => player.start());
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("stop", () => player.stop());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,56 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>PolySynth</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>PolySynth</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
tone-piano {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<tone-example label="Polyphony">
|
||||
<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],
|
||||
<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"
|
||||
/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
tone-piano {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}).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({
|
||||
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>
|
||||
<div id="content"></div>
|
||||
</tone-example>
|
||||
|
||||
<script type="text/javascript">
|
||||
const synth = new Tone.PolySynth(Tone.Synth, {
|
||||
oscillator: {
|
||||
partials: [0, 2, 3, 4],
|
||||
},
|
||||
}).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>
|
||||
|
|
|
|||
|
|
@ -1,56 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reverb</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Reverb</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
tone-play-toggle {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<tone-example label="Reverb">
|
||||
<div slot="explanation">
|
||||
<a href="https://tonejs.github.io/docs/Reverb">Tone.Reverb</a>
|
||||
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>
|
||||
<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"
|
||||
/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
tone-play-toggle {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<tone-example label="Reverb">
|
||||
<div slot="explanation">
|
||||
<a href="https://tonejs.github.io/docs/latest/classes/Reverb"
|
||||
>Tone.Reverb</a
|
||||
>
|
||||
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">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
</div>
|
||||
</tone-example>
|
||||
|
||||
<script type="text/javascript">
|
||||
const reverb = new Tone.Reverb().toDestination();
|
||||
<div id="content">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
</div>
|
||||
</tone-example>
|
||||
|
||||
const player = new Tone.Player({
|
||||
url: "https://tonejs.github.io/audio/berklee/shaker_slow_1.mp3",
|
||||
loop: true,
|
||||
volume: 6,
|
||||
}).connect(reverb);
|
||||
<script type="text/javascript">
|
||||
const reverb = new Tone.Reverb().toDestination();
|
||||
|
||||
ui({
|
||||
parent: document.querySelector("#content"),
|
||||
tone: reverb
|
||||
});
|
||||
const player = new Tone.Player({
|
||||
url: "https://tonejs.github.io/audio/berklee/shaker_slow_1.mp3",
|
||||
loop: true,
|
||||
volume: 6,
|
||||
}).connect(reverb);
|
||||
|
||||
// bind the interface
|
||||
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
|
||||
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
|
||||
ui({
|
||||
parent: document.querySelector("#content"),
|
||||
tone: reverb,
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
// bind the interface
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("start", () => player.start());
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("stop", () => player.stop());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,79 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Sampler</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Sampler</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
tone-piano {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<tone-example label="Sampler">
|
||||
<tone-loader></tone-loader>
|
||||
<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"
|
||||
/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
tone-piano {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<tone-example label="Sampler">
|
||||
<tone-loader></tone-loader>
|
||||
|
||||
<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.
|
||||
</div>
|
||||
<div slot="explanation">
|
||||
<a
|
||||
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>
|
||||
</tone-example>
|
||||
<div id="content"></div>
|
||||
</tone-example>
|
||||
|
||||
<script type="text/javascript">
|
||||
const sampler = new Tone.Sampler({
|
||||
urls: {
|
||||
A0: "A0.mp3",
|
||||
C1: "C1.mp3",
|
||||
"D#1": "Ds1.mp3",
|
||||
"F#1": "Fs1.mp3",
|
||||
A1: "A1.mp3",
|
||||
C2: "C2.mp3",
|
||||
"D#2": "Ds2.mp3",
|
||||
"F#2": "Fs2.mp3",
|
||||
A2: "A2.mp3",
|
||||
C3: "C3.mp3",
|
||||
"D#3": "Ds3.mp3",
|
||||
"F#3": "Fs3.mp3",
|
||||
A3: "A3.mp3",
|
||||
C4: "C4.mp3",
|
||||
"D#4": "Ds4.mp3",
|
||||
"F#4": "Fs4.mp3",
|
||||
A4: "A4.mp3",
|
||||
C5: "C5.mp3",
|
||||
"D#5": "Ds5.mp3",
|
||||
"F#5": "Fs5.mp3",
|
||||
A5: "A5.mp3",
|
||||
C6: "C6.mp3",
|
||||
"D#6": "Ds6.mp3",
|
||||
"F#6": "Fs6.mp3",
|
||||
A6: "A6.mp3",
|
||||
C7: "C7.mp3",
|
||||
"D#7": "Ds7.mp3",
|
||||
"F#7": "Fs7.mp3",
|
||||
A7: "A7.mp3",
|
||||
C8: "C8.mp3"
|
||||
},
|
||||
release: 1,
|
||||
baseUrl: "https://tonejs.github.io/audio/salamander/"
|
||||
}).toDestination();
|
||||
<script type="text/javascript">
|
||||
const sampler = new Tone.Sampler({
|
||||
urls: {
|
||||
A0: "A0.mp3",
|
||||
C1: "C1.mp3",
|
||||
"D#1": "Ds1.mp3",
|
||||
"F#1": "Fs1.mp3",
|
||||
A1: "A1.mp3",
|
||||
C2: "C2.mp3",
|
||||
"D#2": "Ds2.mp3",
|
||||
"F#2": "Fs2.mp3",
|
||||
A2: "A2.mp3",
|
||||
C3: "C3.mp3",
|
||||
"D#3": "Ds3.mp3",
|
||||
"F#3": "Fs3.mp3",
|
||||
A3: "A3.mp3",
|
||||
C4: "C4.mp3",
|
||||
"D#4": "Ds4.mp3",
|
||||
"F#4": "Fs4.mp3",
|
||||
A4: "A4.mp3",
|
||||
C5: "C5.mp3",
|
||||
"D#5": "Ds5.mp3",
|
||||
"F#5": "Fs5.mp3",
|
||||
A5: "A5.mp3",
|
||||
C6: "C6.mp3",
|
||||
"D#6": "Ds6.mp3",
|
||||
"F#6": "Fs6.mp3",
|
||||
A6: "A6.mp3",
|
||||
C7: "C7.mp3",
|
||||
"D#7": "Ds7.mp3",
|
||||
"F#7": "Fs7.mp3",
|
||||
A7: "A7.mp3",
|
||||
C8: "C8.mp3",
|
||||
},
|
||||
release: 1,
|
||||
baseUrl: "https://tonejs.github.io/audio/salamander/",
|
||||
}).toDestination();
|
||||
|
||||
piano({
|
||||
parent: document.querySelector("#content"),
|
||||
noteon: note => sampler.triggerAttack(note.name),
|
||||
noteoff: note => sampler.triggerRelease(note.name),
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
piano({
|
||||
parent: document.querySelector("#content"),
|
||||
noteon: (note) => sampler.triggerAttack(note.name),
|
||||
noteoff: (note) => sampler.triggerRelease(note.name),
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,106 +1,135 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Signal</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Signal</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
<style type="text/css">
|
||||
tone-play-toggle {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
tone-slider {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="Control Voltage">
|
||||
<div slot="explanation">
|
||||
One of the most powerful features of Tone.js and the Web Audio API is the ability to
|
||||
perform math and logic on audio-rate signal. Signals
|
||||
can be ramped and scheduled to control Audio Parameters and
|
||||
other Signals making it simple to create elaborate,
|
||||
interconnected automations.
|
||||
<br><br>
|
||||
This example applies a series of mappings to a
|
||||
signal value and applies the results of those mappings
|
||||
to the frequency attribute of 2
|
||||
<a href="https://tonejs.github.io/docs/Oscillator">Tone.Oscillators</a>
|
||||
and a <a href="https://tonejs.github.io/docs/LFO">Tone.LFO</a>.
|
||||
</div>
|
||||
<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"
|
||||
/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
<style type="text/css">
|
||||
tone-play-toggle {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
tone-slider {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="Control Voltage">
|
||||
<div slot="explanation">
|
||||
One of the most powerful features of Tone.js and the Web Audio
|
||||
API is the ability to perform math and logic on audio-rate
|
||||
signal. Signals can be ramped and scheduled to control Audio
|
||||
Parameters and other Signals making it simple to create
|
||||
elaborate, interconnected automations.
|
||||
<br /><br />
|
||||
This example applies a series of mappings to a signal value and
|
||||
applies the results of those mappings to the frequency attribute
|
||||
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">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
<tone-slider label="Modulation Rate" min="0.1" max="1" exp="2" value="0.5"></tone-slider>
|
||||
</div>
|
||||
</tone-example>
|
||||
|
||||
<script type="text/javascript">
|
||||
// use this to pan the two oscillators hard left/right
|
||||
const merge = new Tone.Merge().toDestination();
|
||||
<div id="content">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
<tone-slider
|
||||
label="Modulation Rate"
|
||||
min="0.1"
|
||||
max="1"
|
||||
exp="2"
|
||||
value="0.5"
|
||||
></tone-slider>
|
||||
</div>
|
||||
</tone-example>
|
||||
|
||||
// two oscillators panned hard left / hard right
|
||||
const rightOsc = new Tone.Oscillator({
|
||||
type: "sawtooth",
|
||||
volume: -20
|
||||
}).connect(merge, 0, 0);
|
||||
<script type="text/javascript">
|
||||
// use this to pan the two oscillators hard left/right
|
||||
const merge = new Tone.Merge().toDestination();
|
||||
|
||||
const leftOsc = new Tone.Oscillator({
|
||||
type: "square",
|
||||
volume: -20
|
||||
}).connect(merge, 0, 1);
|
||||
// two oscillators panned hard left / hard right
|
||||
const rightOsc = new Tone.Oscillator({
|
||||
type: "sawtooth",
|
||||
volume: -20,
|
||||
}).connect(merge, 0, 0);
|
||||
|
||||
// create an oscillation that goes from 0 to 1200
|
||||
// connection it to the detune of the two oscillators
|
||||
const detuneLFO = new Tone.LFO({
|
||||
type: "square",
|
||||
min: 0,
|
||||
max: 1200
|
||||
}).fan(rightOsc.detune, leftOsc.detune).start();
|
||||
const leftOsc = new Tone.Oscillator({
|
||||
type: "square",
|
||||
volume: -20,
|
||||
}).connect(merge, 0, 1);
|
||||
|
||||
// the frequency signal
|
||||
const frequency = new Tone.Signal(0.5);
|
||||
// create an oscillation that goes from 0 to 1200
|
||||
// connection it to the detune of the two oscillators
|
||||
const detuneLFO = new Tone.LFO({
|
||||
type: "square",
|
||||
min: 0,
|
||||
max: 1200,
|
||||
})
|
||||
.fan(rightOsc.detune, leftOsc.detune)
|
||||
.start();
|
||||
|
||||
// the move the 0 to 1 value into frequency range
|
||||
const scale = new Tone.ScaleExp(110, 440);
|
||||
|
||||
// multiply the frequency by 2.5 to get a 10th above
|
||||
const mult = new Tone.Multiply(2.5);
|
||||
|
||||
// chain the components together
|
||||
frequency.chain(scale, mult);
|
||||
scale.connect(rightOsc.frequency);
|
||||
mult.connect(leftOsc.frequency);
|
||||
// the frequency signal
|
||||
const frequency = new Tone.Signal(0.5);
|
||||
|
||||
// multiply the frequency by 2 to get the octave above
|
||||
const detuneScale = new Tone.Scale(14, 4);
|
||||
frequency.chain(detuneScale, detuneLFO.frequency);
|
||||
// the move the 0 to 1 value into frequency range
|
||||
const scale = new Tone.ScaleExp(110, 440);
|
||||
|
||||
// start the oscillators with the play button
|
||||
document.querySelector("tone-play-toggle").addEventListener("start", () => {
|
||||
rightOsc.start();
|
||||
leftOsc.start();
|
||||
});
|
||||
document.querySelector("tone-play-toggle").addEventListener("stop", () => {
|
||||
rightOsc.stop();
|
||||
leftOsc.stop();
|
||||
});
|
||||
// multiply the frequency by 2.5 to get a 10th above
|
||||
const mult = new Tone.Multiply(2.5);
|
||||
|
||||
// ramp the frequency with the slider
|
||||
document.querySelector("tone-slider").addEventListener("input", e => {
|
||||
frequency.rampTo(parseFloat(e.target.value), 0.1);
|
||||
});
|
||||
// chain the components together
|
||||
frequency.chain(scale, mult);
|
||||
scale.connect(rightOsc.frequency);
|
||||
mult.connect(leftOsc.frequency);
|
||||
|
||||
</script>
|
||||
// multiply the frequency by 2 to get the octave above
|
||||
const detuneScale = new Tone.Scale(14, 4);
|
||||
frequency.chain(detuneScale, detuneLFO.frequency);
|
||||
|
||||
</body>
|
||||
// start the oscillators with the play button
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("start", () => {
|
||||
rightOsc.start();
|
||||
leftOsc.start();
|
||||
});
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("stop", () => {
|
||||
rightOsc.stop();
|
||||
leftOsc.stop();
|
||||
});
|
||||
|
||||
// ramp the frequency with the slider
|
||||
document
|
||||
.querySelector("tone-slider")
|
||||
.addEventListener("input", (e) => {
|
||||
frequency.rampTo(parseFloat(e.target.value), 0.1);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,66 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Synth</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Synth</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
tone-piano {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<tone-example label="Synth">
|
||||
<div slot="explanation">
|
||||
<a href="https://tonejs.github.io/docs/Synth" target="_blank">Tone.Synth</a> is composed simply of a
|
||||
<a href="https://tonejs.github.io/docs/OmniOscillator" target="_blank">Tone.OmniOscillator</a>
|
||||
routed through a
|
||||
<a href="https://tonejs.github.io/docs/AmplitudeEnvelope" target="_blank">Tone.AmplitudeEnvelope</a>.
|
||||
</div>
|
||||
<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"
|
||||
/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
tone-piano {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<tone-example label="Synth">
|
||||
<div slot="explanation">
|
||||
<a
|
||||
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>
|
||||
</tone-example>
|
||||
<div id="content"></div>
|
||||
</tone-example>
|
||||
|
||||
<script type="text/javascript">
|
||||
const synth = new Tone.Synth({
|
||||
oscillator: {
|
||||
type: "amtriangle",
|
||||
harmonicity: 0.5,
|
||||
modulationType: "sine"
|
||||
},
|
||||
envelope: {
|
||||
attackCurve: "exponential",
|
||||
attack: 0.05,
|
||||
decay: 0.2,
|
||||
sustain: 0.2,
|
||||
release: 1.5,
|
||||
},
|
||||
portamento: 0.05
|
||||
}).toDestination();
|
||||
<script type="text/javascript">
|
||||
const synth = new Tone.Synth({
|
||||
oscillator: {
|
||||
type: "amtriangle",
|
||||
harmonicity: 0.5,
|
||||
modulationType: "sine",
|
||||
},
|
||||
envelope: {
|
||||
attackCurve: "exponential",
|
||||
attack: 0.05,
|
||||
decay: 0.2,
|
||||
sustain: 0.2,
|
||||
release: 1.5,
|
||||
},
|
||||
portamento: 0.05,
|
||||
}).toDestination();
|
||||
|
||||
piano({
|
||||
tone: synth,
|
||||
parent: document.querySelector("#content"),
|
||||
noteon: (note) => synth.triggerAttack(note.name),
|
||||
noteoff: (note) => synth.triggerRelease()
|
||||
});
|
||||
piano({
|
||||
tone: synth,
|
||||
parent: document.querySelector("#content"),
|
||||
noteon: (note) => synth.triggerAttack(note.name),
|
||||
noteoff: (note) => synth.triggerRelease(),
|
||||
});
|
||||
|
||||
ui({
|
||||
tone: synth,
|
||||
name: "Synth",
|
||||
parent: document.querySelector("#content"),
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
ui({
|
||||
tone: synth,
|
||||
name: "Synth",
|
||||
parent: document.querySelector("#content"),
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,57 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Step Sequencer</title>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Step Sequencer</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
|
||||
<meta
|
||||
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>
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
<style type="text/css">
|
||||
tone-transport {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="Step Sequencer">
|
||||
<tone-loader></tone-loader>
|
||||
<div slot="explanation">
|
||||
<a href="https://tonejs.github.io/docs/Transport">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>
|
||||
<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"
|
||||
/>
|
||||
<script src="../build/Tone.js"></script>
|
||||
<script src="./js/tone-ui.js"></script>
|
||||
<script src="./js/components.js"></script>
|
||||
<style type="text/css">
|
||||
tone-transport {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<tone-example label="Step Sequencer">
|
||||
<tone-loader></tone-loader>
|
||||
<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">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
<tone-slider label="tempo" units="bpm" min="60" max="240" value="120"></tone-slider>
|
||||
<tone-step-sequencer></tone-step-sequencer>
|
||||
</div>
|
||||
</tone-example>
|
||||
<div id="content">
|
||||
<tone-play-toggle></tone-play-toggle>
|
||||
<tone-slider
|
||||
label="tempo"
|
||||
units="bpm"
|
||||
min="60"
|
||||
max="240"
|
||||
value="120"
|
||||
></tone-slider>
|
||||
<tone-step-sequencer></tone-step-sequencer>
|
||||
</div>
|
||||
</tone-example>
|
||||
|
||||
<script type="text/javascript">
|
||||
const keys = new Tone.Players({
|
||||
urls: {
|
||||
0: "A1.mp3",
|
||||
1: "Cs2.mp3",
|
||||
2: "E2.mp3",
|
||||
3: "Fs2.mp3",
|
||||
},
|
||||
fadeOut: "64n",
|
||||
baseUrl: "https://tonejs.github.io/audio/casio/"
|
||||
}).toDestination();
|
||||
<script type="text/javascript">
|
||||
const keys = new Tone.Players({
|
||||
urls: {
|
||||
0: "A1.mp3",
|
||||
1: "Cs2.mp3",
|
||||
2: "E2.mp3",
|
||||
3: "Fs2.mp3",
|
||||
},
|
||||
fadeOut: "64n",
|
||||
baseUrl: "https://tonejs.github.io/audio/casio/",
|
||||
}).toDestination();
|
||||
|
||||
document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());
|
||||
document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop());
|
||||
document.querySelector("tone-slider").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>
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("start", () => Tone.Transport.start());
|
||||
document
|
||||
.querySelector("tone-play-toggle")
|
||||
.addEventListener("stop", () => Tone.Transport.stop());
|
||||
document
|
||||
.querySelector("tone-slider")
|
||||
.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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue