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

linting

Browse source
This commit is contained in:
Yotam Mann 2020-07-18 17:20:19 -07:00
parent 742a965d33
commit 2036bca271
34 changed files with 302 additions and 320 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
examples/amSynth.html
View file

@ -51,13 +51,13 @@
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>

1
examples/analysis.html
View file

@ -66,7 +66,6 @@
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
</script>
</body>
</html>

22
examples/animationSync.html
View file

@ -55,26 +55,26 @@
</tone-example>
<script type="text/javascript">
var piano = new Tone.Synth({
"oscillator" : {
"type" : "fmsine4",
"modulationType" : "square"
const piano = new Tone.Synth({
oscillator: {
type: "fmsine4",
modulationType: "square"
}
}).toDestination();
var loop = new Tone.Pattern(function(time, note){
const loop = new Tone.Pattern(((time, note) => {
piano.triggerAttackRelease(note, "16n", time);
// Draw.schedule takes a callback and a time to invoke the callback
Tone.Draw.schedule(function(){
//the callback synced to the animation frame at the given time
Tone.Draw.schedule(() => {
// the callback synced to the animation frame at the given time
const noteElement = document.querySelector("#"+note);
noteElement.classList.add("active");
setTimeout(() => {
noteElement.classList.remove("active");
}, 100);
}, time);
}, ["C4", "E4", "G4", "B4", "D5"]).start(0);
}), ["C4", "E4", "G4", "B4", "D5"]).start(0);
loop.interval = "16n";
@ -82,10 +82,10 @@
drawer().add({
tone: piano,
title: 'Piano',
})
title: "Piano",
});
//connect the UI with the components
// 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());

1
examples/bembe.html
View file

@ -76,7 +76,6 @@
// 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>

85
examples/buses.html
View file

@ -32,54 +32,53 @@
</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,
});
// 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);
});
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>

26
examples/daw.html
View file

@ -52,26 +52,26 @@
</tone-example>
<script type="text/javascript">
//set the transport
// set the transport
Tone.Transport.bpm.value = 108;
Tone.Transport.loop = true;
Tone.Transport.loopStart = "4m";
Tone.Transport.loopEnd = "8m";
var kick = new Tone.Player({
url : "./audio/loop/kick.[mp3|ogg]",
loop : true
const kick = new Tone.Player({
url: "./audio/loop/kick.[mp3|ogg]",
loop: true
}).toDestination().sync().start(0);
var snare = new Tone.Player({
url : "./audio/loop/snare.[mp3|ogg]",
loop : true
const snare = new Tone.Player({
url: "./audio/loop/snare.[mp3|ogg]",
loop: true
}).toDestination().sync().start("2n");
var hh = new Tone.Player({
url : "./audio/loop/hh.[mp3|ogg]",
loop : true
}).toDestination().sync().start("3:3", "4n"); //start with an offset
const hh = new Tone.Player({
url: "./audio/loop/hh.[mp3|ogg]",
loop: true
}).toDestination().sync().start("3:3", "4n"); // start with an offset
// connect the UI with the components
document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());
@ -80,9 +80,9 @@
// keep the playhead on track
setInterval(() => {
// scale it between 0-1
const progress = (Tone.Transport.progress + 1) / 2
const progress = (Tone.Transport.progress + 1) / 2;
document.querySelector("#progress").style = `left: ${progress*100}%`;
}, 16)
}, 16);
</script>
</body>
</html>

28
examples/envelope.html
View file

@ -41,28 +41,28 @@
</tone-example>
<script type="text/javascript">
var env = new Tone.AmplitudeEnvelope({
"attack" : 0.11,
"decay" : 0.21,
"sustain" : 0.5,
"release" : 1.2
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
var osc = new Tone.Oscillator({
"partials" : [3, 2, 1],
"type" : "custom",
"frequency" : "C#4",
"volume" : -8,
// 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
// bind the interface
drawer().add({
tone: env,
name: 'Envelope'
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());

5
examples/events.html
View file

@ -133,11 +133,10 @@
open: false,
});
//bind the interface
// 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>

4
examples/fmSynth.html
View file

@ -47,13 +47,13 @@
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>

17
examples/funkyShape.html
View file

@ -28,16 +28,15 @@
</tone-example>
<script type="text/javascript">
new p5((p5) => {
class FunkyShape {
/*
FunkyShape init gives initial and offset values for
the perlin noise functions in update.
Giving different initial values ensures that
each funky shape follows its own funky path
*/
FunkyShape init gives initial and offset values for
the perlin noise functions in update.
Giving different initial values ensures that
each funky shape follows its own funky path
*/
init(xInc, yInc, xOff, yOff, radius) {
this.xInc = xInc;
this.yInc = yInc;
@ -61,7 +60,7 @@
};
};
}
// using our FunkyShape class
// to create a funkyCircle class
const funkyCircle = new FunkyShape();
@ -191,7 +190,7 @@
bleep.start();
const bleepLoop = new Tone.Loop(((time) => {
bleepEnvelope.triggerAttack(time);
bleepEnvelope.triggerAttack(time);
}), "2n").start(0);
// KICK
@ -221,7 +220,7 @@
Tone.Transport.loopEnd = "1:0";
Tone.Transport.loop = true;
//bind the interface
// 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());

18
examples/grainPlayer.html
View file

@ -43,20 +43,20 @@
</tone-example>
<script type="text/javascript">
//the player
var player = new Tone.GrainPlayer({
"url" : "https://tonejs.github.io/audio/berklee/arpeggio3crazy.mp3",
"loop" : true,
"grainSize" : 0.1,
"overlap" : 0.05,
// 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();
ui({
parent: document.querySelector('#content'),
parent: document.querySelector("#content"),
tone: player,
})
});
//bind the interface
// bind the interface
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());

6
examples/index.html
View file

@ -8,9 +8,9 @@
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
<script type="text/javascript">
//forward links with hashes
if (window.location.hash !== ""){
var hash = window.location.hash.substring(1);
// forward links with hashes
if (window.location.hash !== "") {
const hash = window.location.hash.substring(1);
window.location.href = window.location.pathname+hash;
}
</script>

1
examples/jump.html
View file

@ -51,7 +51,6 @@
attackCurve: "exponential"
},
}).toDestination();
// Van Halen - Jump MIDI from http://www.midiworld.com/files/1121/
// converted using

24
examples/mic.html
View file

@ -34,23 +34,23 @@
</tone-example>
<script type="text/javascript">
//you probably DONT want to connect the microphone
//directly to the master output because of feedback.
var mic = new Tone.UserMedia();
// you probably DONT want to connect the microphone
// directly to the master output because of feedback.
const mic = new Tone.UserMedia();
const micFFT = new Tone.FFT()
mic.connect(micFFT)
const micFFT = new Tone.FFT();
mic.connect(micFFT);
fft({
tone: micFFT,
parent: document.querySelector('#content')
})
parent: document.querySelector("#content")
});
//bind the interface
const micButton = document.querySelector('tone-mic-button')
micButton.supported = Tone.UserMedia.supported
micButton.addEventListener('open', () => mic.open())
micButton.addEventListener('close', () => mic.close())
// bind the interface
const micButton = document.querySelector("tone-mic-button");
micButton.supported = Tone.UserMedia.supported;
micButton.addEventListener("open", () => mic.open());
micButton.addEventListener("close", () => mic.close());
</script>

14
examples/mixer.html
View file

@ -36,7 +36,6 @@
</tone-example>
<script type="text/javascript">
function makeChannel(name, url, pan) {
const channel = new Tone.Channel({
pan
@ -54,23 +53,22 @@
parent: document.querySelector("#content")
});
}
// create a meter on the destination node
const toneMeter = new Tone.Meter({channels: 2})
Tone.Destination.chain(toneMeter)
const toneMeter = new Tone.Meter({ channels: 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);
document.querySelector('tone-play-toggle').addEventListener('start', () => Tone.Transport.start())
document.querySelector('tone-play-toggle').addEventListener('stop', () => Tone.Transport.stop())
document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());
document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop());
</script>
</body>
</html>

13
examples/monoSynth.html
View file

@ -31,7 +31,6 @@
</tone-example>
<script type="text/javascript">
const synth = new Tone.PolySynth(Tone.MonoSynth, {
volume: -8,
oscillator: {
@ -56,14 +55,14 @@
piano({
noteon: (note) => synth.triggerAttack(note.name),
noteoff: (note) => synth.triggerRelease(note.name),
parent: document.querySelector('#content')
})
parent: document.querySelector("#content")
});
ui({
tone: synth,
parent: document.querySelector('#content'),
name: 'MonoSynth'
})
parent: document.querySelector("#content"),
name: "MonoSynth"
});
</script>
</body>

24
examples/noises.html
View file

@ -36,28 +36,28 @@
</tone-example>
<script type="text/javascript">
//make the noise and connect it to the output
// make the noise and connect it to the output
const noise = new Tone.Noise({
volume : -10,
type : "brown"
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'),
parent: document.querySelector("#content"),
tone: toneWaveform,
})
});
ui({
parent: document.querySelector('#content'),
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())
// bind the inteface
document.querySelector("tone-momentary-button").addEventListener("down", () => noise.start());
document.querySelector("tone-momentary-button").addEventListener("up", () => noise.stop());
</script>
</body>
</html>

6
examples/offline.html
View file

@ -93,10 +93,10 @@
// set the buffer when it's done
renderingPromise.then(buffer => player.buffer = buffer);
renderingPromise.then(() => document.querySelector('tone-play-toggle').disabled = false)
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())
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
</script>
</body>

18
examples/oscillator.html
View file

@ -34,20 +34,20 @@
<script type="text/javascript">
var osc = new Tone.Oscillator({
"type" : "square",
"frequency" : 440,
"volume" : -16
const osc = new Tone.Oscillator({
type: "square",
frequency: 440,
volume: -16
}).toDestination();
ui({
tone: osc,
parent: document.querySelector('#content')
})
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())
// bind the interface
document.querySelector("tone-momentary-button").addEventListener("down", () => osc.start());
document.querySelector("tone-momentary-button").addEventListener("up", () => osc.stop());
</script>
</body>
</html>

30
examples/pianoPhase.html
View file

@ -62,7 +62,6 @@
</tone-example>
<script type="text/javascript">
// set the bpm and time signature first
Tone.Transport.timeSignature = [6, 4];
Tone.Transport.bpm.value = 180;
@ -112,27 +111,26 @@
// set the playback rate of the right part to be slightly slower
partR.playbackRate = 0.985;
//bind the interface
document.querySelector('tone-play-toggle').addEventListener('start', () => Tone.Transport.start())
document.querySelector('tone-play-toggle').addEventListener('stop', () => Tone.Transport.stop())
// bind the interface
document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());
document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop());
// update the width of the fill bars to reflect the left and right progress
function progressToWidth(progress){
progress = Math.cos(progress * Math.PI * 2 + Math.PI)
progress = (progress + 1) / 2
return `${progress * 100}%`
function progressToWidth(progress) {
progress = Math.cos(progress * Math.PI * 2 + Math.PI);
progress = (progress + 1) / 2;
return `${progress * 100}%`;
}
function loop(){
requestAnimationFrame(loop)
function loop() {
requestAnimationFrame(loop);
// make it go out and back for each loop
document.querySelector("#left").style.width = progressToWidth(partL.progress)
document.querySelector("#right").style.width = progressToWidth(partR.progress)
document.querySelector("#left").style.width = progressToWidth(partL.progress);
document.querySelector("#right").style.width = progressToWidth(partR.progress);
}
loop()
loop();
// document.querySelector("#left").bind(partL);
// document.querySelector("#right").bind(partR);
/*// GUI //
/* // GUI //
Interface.Button({
key : 32,
@ -200,7 +198,7 @@
rightContext.stroke();
rightContext.restore();
}
loop();*/
loop(); */
</script>
</body>

24
examples/pingPongDelay.html
View file

@ -29,26 +29,26 @@
</tone-example>
<script type="text/javascript">
//the feedback delay
var feedbackDelay = new Tone.PingPongDelay({
"delayTime" : "8n",
"feedback" : 0.6,
"wet" : 0.5
// the feedback delay
const feedbackDelay = new Tone.PingPongDelay({
delayTime: "8n",
feedback: 0.6,
wet: 0.5
}).toDestination();
//play a snare sound through it
// play a snare sound through it
const player = new Tone.Player("https://tonejs.github.io/audio/drum-samples/CR78/snare.mp3").connect(feedbackDelay);
const toneMeter = new Tone.Meter({channels: 2})
feedbackDelay.connect(toneMeter)
const toneMeter = new Tone.Meter({ channels: 2 });
feedbackDelay.connect(toneMeter);
meter({
tone: toneMeter,
parent: document.querySelector('#content')
})
parent: document.querySelector("#content")
});
document.querySelector("tone-momentary-button").addEventListener('down', () => player.start())
document.querySelector("tone-momentary-button").addEventListener('up', () => player.stop())
document.querySelector("tone-momentary-button").addEventListener("down", () => player.start());
document.querySelector("tone-momentary-button").addEventListener("up", () => player.stop());
</script>
</body>
</html>

18
examples/pitchShift.html
View file

@ -35,20 +35,20 @@
</tone-example>
<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)
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;
const toneFFT = new Tone.FFT()
pitchShift.connect(toneFFT)
const toneFFT = new Tone.FFT();
pitchShift.connect(toneFFT);
fft({
parent: document.querySelector('#content'),
parent: document.querySelector("#content"),
tone: toneFFT,
})
});
//bind the interface
document.querySelector("tone-play-toggle").addEventListener('start', () => player.start());
document.querySelector("tone-play-toggle").addEventListener('stop', () => player.stop());
// 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;
// });

22
examples/player.html
View file

@ -32,22 +32,22 @@
</tone-example>
<script type="text/javascript">
//the player
var player = new Tone.Player({
"url" : "https://tonejs.github.io/audio/loop/FWDL.mp3",
"loop" : true,
"loopStart" : 0.5,
"loopEnd" : 0.7,
// 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();
ui({
tone: player,
parent: document.querySelector('#content')
})
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());
// bind the interface
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
</script>
</body>

14
examples/polySynth.html
View file

@ -34,23 +34,23 @@
</tone-example>
<script type="text/javascript">
var synth = new Tone.PolySynth(Tone.Synth, {
"oscillator" : {
"partials" : [0, 2, 3, 4],
const synth = new Tone.PolySynth(Tone.Synth, {
oscillator: {
partials: [0, 2, 3, 4],
}
}).toDestination();
piano({
parent: document.querySelector('#content'),
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'),
})
parent: document.querySelector("#content"),
});
</script>
</body>
</html>

28
examples/quantization.html
View file

@ -50,28 +50,28 @@
</tone-example>
<script type="text/javascript">
var polySynth = new Tone.PolySynth(Tone.Synth).toDestination();
const polySynth = new Tone.PolySynth(Tone.Synth).toDestination();
function loop(){
requestAnimationFrame(loop)
const [bar, beat, sixteenth] = Tone.Transport.position.split(':')
document.querySelector('#progress').textContent = `
function loop() {
requestAnimationFrame(loop);
const [bar, beat, sixteenth] = Tone.Transport.position.split(":");
document.querySelector("#progress").textContent = `
bar: ${bar}, beat: ${beat}, sixteenth: ${sixteenth}
`
`;
}
loop()
loop();
//bind the interface
// bind the interface
document.querySelector("tone-play-toggle").addEventListener("start", e => {
Tone.Transport.start()
//enable all of the buttons if it's playing
Tone.Transport.start();
// enable all of the buttons if it's playing
Array.from(document.querySelectorAll("tone-button")).forEach(el => el.disabled = false);
});
document.querySelector("tone-play-toggle").addEventListener('stop', () => {
Tone.Transport.stop()
//disable all of the buttons if it's not playing
document.querySelector("tone-play-toggle").addEventListener("stop", () => {
Tone.Transport.stop();
// disable all of the buttons if it's not playing
Array.from(document.querySelectorAll("tone-button")).forEach(el => el.disabled = true);
})
});
document.querySelector("#at8n").addEventListener("click", e => {
polySynth.triggerAttackRelease("B4", "8n", "@8n");
});

19
examples/rampTo.html
View file

@ -36,20 +36,20 @@
</tone-example>
<script type="text/javascript">
var oscillators = [];
const oscillators = [];
var bassFreq = 32;
const bassFreq = 32;
for (var i = 0; i < 8; i++){
for (let i = 0; i < 8; i++) {
oscillators.push(new Tone.Oscillator({
"frequency" : bassFreq * i,
"type" : "sawtooth4",
"volume" : -Infinity,
"detune" : Math.random() * 30 - 15,
frequency: bassFreq * i,
type: "sawtooth4",
volume: -Infinity,
detune: Math.random() * 30 - 15,
}).toDestination());
}
//bind the interface
// bind the interface
document.querySelector("tone-play-toggle").addEventListener("start", e => {
oscillators.forEach(o => {
o.start();
@ -62,8 +62,7 @@
o.stop("+1.2");
o.volume.rampTo(-Infinity, 1);
});
})
});
document.querySelector("tone-slider").addEventListener("input", e => {
oscillators.forEach((osc, i) => {

12
examples/reverb.html
View file

@ -34,7 +34,7 @@
</tone-example>
<script type="text/javascript">
var reverb = new Tone.Reverb().toDestination();
const reverb = new Tone.Reverb().toDestination();
const player = new Tone.Player({
url: "https://tonejs.github.io/audio/berklee/shaker_slow_1.mp3",
@ -43,13 +43,13 @@
}).connect(reverb);
ui({
parent: document.querySelector('#content'),
parent: document.querySelector("#content"),
tone: reverb
})
});
//bind the interface
document.querySelector("tone-play-toggle").addEventListener('start', () => player.start())
document.querySelector("tone-play-toggle").addEventListener('stop', () => player.stop())
// bind the interface
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
</script>
</body>

6
examples/sampler.html
View file

@ -31,10 +31,8 @@
</tone-example>
<script type="text/javascript">
const sampler = new Tone.Sampler({
urls: {
A0: "A0.mp3",
C1: "C1.mp3",
"D#1": "Ds1.mp3",
@ -71,10 +69,10 @@
}).toDestination();
piano({
parent: document.querySelector('#content'),
parent: document.querySelector("#content"),
noteon: note => sampler.triggerAttack(note.name),
noteoff: note => sampler.triggerRelease(note.name),
})
});
</script>
</body>

28
examples/shiny.html
View file

@ -36,7 +36,6 @@
</tone-example>
<script type="text/javascript">
// a compressor
const drumCompress = new Tone.Compressor({
threshold: -30,
@ -58,7 +57,7 @@
}).chain(distortion, drumCompress);
const hatsLoop = new Tone.Loop({
callback: function (time) {
callback: function(time) {
hats.start(time).stop(time + 0.05);
},
interval: "16n",
@ -124,13 +123,13 @@
bass.triggerAttackRelease(event.note, event.dur, time);
}
}), [{ time: "0:0", note: "C2", dur: "4n.", prob: 1 }, { time: "0:2", note: "C2", dur: "8n", prob: 0.6 },
{ time: "0:2.6666", note: "C2", dur: "8n", prob: 0.4 }, { time: "0:3.33333", note: "C2", dur: "8n", prob: 0.9 },
{ time: "1:0", note: "C2", dur: "4n.", prob: 1 }, { time: "1:2", note: "C2", dur: "8n", prob: 0.6 },
{ time: "1:2.6666", note: "C2", dur: "8n", prob: 0.4 }, { time: "1:3.33333", note: "E2", dur: "8n", prob: 0.9 },
{ time: "2:0", note: "F2", dur: "4n.", prob: 1 }, { time: "2:2", note: "F2", dur: "8n", prob: 0.6 },
{ time: "2:2.6666", note: "F2", dur: "8n", prob: 0.4 }, { time: "2:3.33333", note: "F2", dur: "8n", prob: 0.9 },
{ time: "3:0", note: "F2", dur: "4n.", prob: 1 }, { time: "3:2", note: "F2", dur: "8n", prob: 0.6 },
{ time: "3:2.6666", note: "F2", dur: "8n", prob: 0.4 }, { time: "3:3.33333", note: "B1", dur: "8n", prob: 0.9 }]).start(0);
{ time: "0:2.6666", note: "C2", dur: "8n", prob: 0.4 }, { time: "0:3.33333", note: "C2", dur: "8n", prob: 0.9 },
{ time: "1:0", note: "C2", dur: "4n.", prob: 1 }, { time: "1:2", note: "C2", dur: "8n", prob: 0.6 },
{ time: "1:2.6666", note: "C2", dur: "8n", prob: 0.4 }, { time: "1:3.33333", note: "E2", dur: "8n", prob: 0.9 },
{ time: "2:0", note: "F2", dur: "4n.", prob: 1 }, { time: "2:2", note: "F2", dur: "8n", prob: 0.6 },
{ time: "2:2.6666", note: "F2", dur: "8n", prob: 0.4 }, { time: "2:3.33333", note: "F2", dur: "8n", prob: 0.9 },
{ time: "3:0", note: "F2", dur: "4n.", prob: 1 }, { time: "3:2", note: "F2", dur: "8n", prob: 0.6 },
{ time: "3:2.6666", note: "F2", dur: "8n", prob: 0.4 }, { time: "3:3.33333", note: "B1", dur: "8n", prob: 0.9 }]).start(0);
bassPart.loop = true;
bassPart.loopEnd = "4m";
@ -212,7 +211,6 @@
synth.vibratoAmount.value = y;
}
const drwr = drawer({
parent: document.querySelector("#content"),
open: false,
@ -247,12 +245,12 @@
name: "Synth"
});
document.querySelector('tone-slider-pad').addEventListener('move', e => move(e.detail))
document.querySelector('tone-slider-pad').addEventListener('down', e => triggerAttack(e.detail))
document.querySelector('tone-slider-pad').addEventListener('up', () => synth.triggerRelease())
document.querySelector("tone-slider-pad").addEventListener("move", e => move(e.detail));
document.querySelector("tone-slider-pad").addEventListener("down", e => triggerAttack(e.detail));
document.querySelector("tone-slider-pad").addEventListener("up", () => synth.triggerRelease());
document.querySelector('tone-play-toggle').addEventListener('start', () => Tone.Transport.start())
document.querySelector('tone-play-toggle').addEventListener('stop', () => Tone.Transport.stop())
document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());
document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop());
</script>
</body>
</html>

53
examples/signal.html
View file

@ -44,47 +44,48 @@
</div>
</tone-example>
<script type="text/javascript">//use this to pan the two oscillators hard left/right
var merge = new Tone.Merge().toDestination();
<script type="text/javascript">
// use this to pan the two oscillators hard left/right
const merge = new Tone.Merge().toDestination();
//two oscillators panned hard left / hard right
var rightOsc = new Tone.Oscillator({
"type" : "sawtooth",
"volume" : -20
// two oscillators panned hard left / hard right
const rightOsc = new Tone.Oscillator({
type: "sawtooth",
volume: -20
}).connect(merge, 0, 0);
var leftOsc = new Tone.Oscillator({
"type" : "square",
"volume" : -20
const leftOsc = new Tone.Oscillator({
type: "square",
volume: -20
}).connect(merge, 0, 1);
//create an oscillation that goes from 0 to 1200
//connection it to the detune of the two oscillators
var detuneLFO = new Tone.LFO({
"type" : "square",
"min" : 0,
"max" : 1200
// 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 frequency signal
var frequency = new Tone.Signal(0.5);
// the frequency signal
const frequency = new Tone.Signal(0.5);
//the move the 0 to 1 value into frequency range
var scale = new Tone.ScaleExp(110, 440);
// 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
var mult = new Tone.Multiply(2.5);
// multiply the frequency by 2.5 to get a 10th above
const mult = new Tone.Multiply(2.5);
//chain the components together
// chain the components together
frequency.chain(scale, mult);
scale.connect(rightOsc.frequency);
mult.connect(leftOsc.frequency);
//multiply the frequency by 2 to get the octave above
var detuneScale = new Tone.Scale(14, 4);
// multiply the frequency by 2 to get the octave above
const detuneScale = new Tone.Scale(14, 4);
frequency.chain(detuneScale, detuneLFO.frequency);
//start the oscillators with the play button
// start the oscillators with the play button
document.querySelector("tone-play-toggle").addEventListener("start", () => {
rightOsc.start();
leftOsc.start();
@ -94,7 +95,7 @@
leftOsc.stop();
});
//ramp the frequency with the slider
// ramp the frequency with the slider
document.querySelector("tone-slider").addEventListener("input", e => {
frequency.rampTo(parseFloat(e.target.value), 0.1);
});

2
examples/simpleHtml.html
View file

@ -9,7 +9,7 @@
<script>
function playNote() {
// create a synth
var synth = new Tone.Synth().toDestination();
const synth = new Tone.Synth().toDestination();
// play a note from that synth
synth.triggerAttackRelease("C4", "8n");
}

26
examples/simpleSynth.html
View file

@ -33,19 +33,19 @@
<script type="text/javascript">
const synth = new Tone.Synth({
"oscillator" : {
"type" : "amtriangle",
"harmonicity" : 0.5,
"modulationType" : "sine"
oscillator: {
type: "amtriangle",
harmonicity: 0.5,
modulationType: "sine"
},
"envelope" : {
"attackCurve" : "exponential",
"attack" : 0.05,
"decay" : 0.2,
"sustain" : 0.2,
"release" : 1.5,
envelope: {
attackCurve: "exponential",
attack: 0.05,
decay: 0.2,
sustain: 0.2,
release: 1.5,
},
"portamento" : 0.05
portamento: 0.05
}).toDestination();
piano({
@ -53,13 +53,13 @@
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>

11
examples/spatialPanner.html
View file

@ -78,9 +78,8 @@
createPlayerPlusPanner("https://tonejs.github.io/audio/berklee/tapping1.mp3", -2, 0, 2);
createPlayerPlusPanner("https://tonejs.github.io/audio/berklee/thump1.mp3", -2, 0, -2);
document.querySelector("tone-play-toggle").addEventListener('start', () => Tone.Transport.start());
document.querySelector("tone-play-toggle").addEventListener('stop', () => Tone.Transport.stop());
document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());
document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop());
function setRotation(angle) {
Tone.Listener.forwardX.value = Math.sin(angle);
@ -88,9 +87,9 @@
Tone.Listener.forwardZ.value = -Math.cos(angle);
}
document.querySelector("#xSlider").addEventListener('input', (e) => Tone.Listener.positionX.value = parseFloat(e.target.value));
document.querySelector("#zSlider").addEventListener('input', (e) => Tone.Listener.positionY.value = parseFloat(e.target.value));
document.querySelector("#rotation").addEventListener('input', (e) => setRotation(parseFloat(e.target.value)));
document.querySelector("#xSlider").addEventListener("input", (e) => Tone.Listener.positionX.value = parseFloat(e.target.value));
document.querySelector("#zSlider").addEventListener("input", (e) => Tone.Listener.positionY.value = parseFloat(e.target.value));
document.querySelector("#rotation").addEventListener("input", (e) => setRotation(parseFloat(e.target.value)));
</script>

12
examples/stepSequencer.html
View file

@ -33,7 +33,6 @@
</div>
</tone-example>
<script type="text/javascript">
const keys = new Tone.Players({
urls: {
@ -42,16 +41,15 @@
2: "E2.mp3",
3: "Fs2.mp3",
},
volume: -8,
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")
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>