From 77a8e225f44d0069c2d342c7b70644d4bb514f57 Mon Sep 17 00:00:00 2001 From: Yotam Mann Date: Mon, 6 May 2024 16:23:42 -0400 Subject: [PATCH] updating example links --- examples/amSynth.html | 130 +++++---- examples/analysis.html | 140 +++++---- examples/bembe.html | 174 +++++++----- examples/buses.html | 206 +++++++++----- examples/envelope.html | 151 ++++++---- examples/events.html | 304 ++++++++++++-------- examples/fmSynth.html | 119 ++++---- examples/grainPlayer.html | 132 +++++---- examples/jump.html | 551 +++++++++++++++++++----------------- examples/lfoEffects.html | 232 ++++++++++----- examples/meter.html | 112 +++++--- examples/mixer.html | 155 +++++----- examples/monoSynth.html | 136 +++++---- examples/noises.html | 126 +++++---- examples/offline.html | 214 ++++++++------ examples/oscillator.html | 108 ++++--- examples/pingPongDelay.html | 111 +++++--- examples/pitchShift.html | 135 +++++---- examples/player.html | 108 ++++--- examples/polySynth.html | 114 ++++---- examples/reverb.html | 111 +++++--- examples/sampler.html | 161 ++++++----- examples/signal.html | 211 ++++++++------ examples/simpleSynth.html | 140 +++++---- examples/stepSequencer.html | 134 +++++---- 25 files changed, 2455 insertions(+), 1760 deletions(-) diff --git a/examples/amSynth.html b/examples/amSynth.html index 16a86ee2..bbc3c955 100644 --- a/examples/amSynth.html +++ b/examples/amSynth.html @@ -1,64 +1,78 @@ - + - - - AMSynth + + + AMSynth - - - - - - - - - - -
- Tone.AMSynth - is composed of two - Tone.Synths - where one Tone.Synth modulates the amplitude of a second Tone.Synth. -
+ + + + + + + + + + +
+ Tone.AMSynth + is composed of two + Tone.Synths + where one Tone.Synth modulates the amplitude of a second + Tone.Synth. +
-
-
- - - - + 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"), + }); + + diff --git a/examples/analysis.html b/examples/analysis.html index b80cffb5..3b0cd97a 100644 --- a/examples/analysis.html +++ b/examples/analysis.html @@ -1,71 +1,93 @@ - + - - - Analyser + + + Analyser - - + + - - - - - + + + + + + + + + - - - - +
+ Tone.FFT + returns the amplitude of the incoming signal at different + frequencies. + Tone.Waveform + returns the signal value between 0-1. +
-
- Tone.FFT - returns the amplitude of the incoming signal at different frequencies. - Tone.Waveform - returns the signal value between 0-1. -
+
+ +
+ -
- -
- + - + document + .querySelector("tone-play-toggle") + .addEventListener("start", () => player.start()); + document + .querySelector("tone-play-toggle") + .addEventListener("stop", () => player.stop()); + + diff --git a/examples/bembe.html b/examples/bembe.html index c033eea6..6f303d6a 100644 --- a/examples/bembe.html +++ b/examples/bembe.html @@ -1,82 +1,116 @@ - + - - - MetalSynth + + + MetalSynth - - + + - - - - - + + + + + + + + +
+ Tone.MetalSynth + creates metallic, inharmonic sounds using 6 + Tone.FMOscillators + with a tuning based on the TR-808 Cymbal. + Tone.MembraneSynth + makes kick and tom-like sounds using a frequency envelope which + is triggered on notes attack. +
- - - -
- Tone.MetalSynth - creates metallic, inharmonic sounds using 6 - Tone.FMOscillators - with a tuning based on the TR-808 Cymbal. - Tone.MembraneSynth - makes kick and tom-like sounds using a frequency envelope which is triggered on notes attack. -
+
+ +
+ -
- -
- + - + // 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()); + + diff --git a/examples/buses.html b/examples/buses.html index 0b4b79e1..e737741d 100644 --- a/examples/buses.html +++ b/examples/buses.html @@ -1,84 +1,142 @@ - + - - - Buses + + + Buses - - + + - - - - - - - - -
- Buses make it easy to share effects across many instruments. send - audio to a named bus from an instrument and then receive that - channel on your effect. The gain values are all in decibels. -

- Docs on send and - receive. -
-
- - - - -
- + + + + + + + + +
+ Buses make it easy to share effects across many instruments. + send audio to a named bus from an instrument and + then receive that channel on your effect. The gain + values are all in decibels.

+ Docs on + send + and + receive. +
+
+ + + + +
+ - - + 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); + }); + + diff --git a/examples/envelope.html b/examples/envelope.html index e45a4127..86cf4d69 100644 --- a/examples/envelope.html +++ b/examples/envelope.html @@ -1,71 +1,100 @@ - + - - - Envelope + + + Envelope - - + + - - - - - - - - - -
- Envelopes ramp amplitude, frequency or any other parameter over time. - Tone.Envelope and the classes that extend it - implement an ADSR envelope type - which splits its ramp into four distinct phases: Attack, Decay, Sustain, Release. - -
+ tone-trigger { + margin-bottom: 10px; + } + + +
+ Envelopes ramp amplitude, frequency or any other parameter over + time. + Tone.Envelope + and the classes that extend it implement an + ADSR + envelope type which splits its ramp into four distinct phases: + Attack, Decay, Sustain, Release. + +
-
- -
+
+ +
+ - + - + document + .querySelector("tone-momentary-button") + .addEventListener("down", (e) => env.triggerAttack()); + document + .querySelector("tone-momentary-button") + .addEventListener("up", (e) => env.triggerRelease()); + + diff --git a/examples/events.html b/examples/events.html index ef1968e7..00c427d8 100644 --- a/examples/events.html +++ b/examples/events.html @@ -1,143 +1,197 @@ - + - - - Events + + + Events - - + + - - - - - - - - -
- Tone's Event classes (Tone.ToneEvent, - Tone.Loop, - Tone.Part and - Tone.Sequence) - simplify scheduling events along the Transport. Each class abstracts away calls to - Transport.schedule or - scheduleRepeat - and lets you create precise, rhythmic events which are startable, stoppable and loopable. - (note that ToneEvent was called Event before Tone.js 14.x) -
+ + + + + + + + +
+ Tone's Event classes (Tone.ToneEvent, + Tone.Loop, + Tone.Part + and + Tone.Sequence) simplify scheduling events along the Transport. Each class + abstracts away calls to + Transport.schedule + or + scheduleRepeat + and lets you create precise, rhythmic events which are + startable, stoppable and loopable. (note that ToneEvent was + called + Event + before Tone.js 14.x) +
-
- -
- +
+ +
+ - - + 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()); + + diff --git a/examples/fmSynth.html b/examples/fmSynth.html index 1e0da913..0973e08e 100644 --- a/examples/fmSynth.html +++ b/examples/fmSynth.html @@ -1,59 +1,74 @@ - + - - - FMSynth + + + FMSynth - - + + - - - - - - - - -
- Tone.FMSynth - is composed of two - Tone.Synths - where one Tone.Synth modulates the frequency of a second Tone.Synth. -
+ + + + + + + + +
+ Tone.FMSynth + is composed of two + Tone.Synths + where one Tone.Synth modulates the frequency of a second + Tone.Synth. +
-
-
- - - - + 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"), + }); + + diff --git a/examples/grainPlayer.html b/examples/grainPlayer.html index d509a0ee..4c30e327 100644 --- a/examples/grainPlayer.html +++ b/examples/grainPlayer.html @@ -1,65 +1,87 @@ - + - - - Grain Player + + + Grain Player - - + + - - - - - - - - - -
- Tone.GrainPlayer uses - granular synthesis - 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. -
- - + tone-fft { + background-color: black; + height: 40px; + width: 100%; + border-radius: 20px; + } + + +
+ Tone.GrainPlayer + uses + granular synthesis + 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. +
-
- -
- + - - + // bind the interface + document + .querySelector("tone-play-toggle") + .addEventListener("start", () => player.start()); + document + .querySelector("tone-play-toggle") + .addEventListener("stop", () => player.stop()); + + diff --git a/examples/jump.html b/examples/jump.html index a58cf9c9..db02ba0f 100644 --- a/examples/jump.html +++ b/examples/jump.html @@ -1,268 +1,305 @@ - + - - - FatOscillator + + + FatOscillator - - + + - - - - - - - - - -
- Tone.FatOscillator creates multiple oscillators - and detunes them slightly from each other to thicken the sound. The count parameter sets - the number of oscillators and spread sets the total spread (in cents) between the oscillators. -

- FatOscillator is also available in Tone.OmniOscillator - 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": omniOscillator.type = "fatsawtooth". -

- Jump by Van Halen MIDI converted using @tonejs/midi -
+ + + + + + + + + +
+ Tone.FatOscillator + creates multiple oscillators and detunes them slightly from each + other to thicken the sound. The count parameter + sets the number of oscillators and spread sets the + total spread (in cents) between the oscillators.

+ FatOscillator is also available in + Tone.OmniOscillator + 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": + omniOscillator.type = "fatsawtooth".

+ Jump by Van Halen MIDI + converted using + @tonejs/midi +
-
- -
- +
+ +
+ - - + // bind the interface + document + .querySelector("tone-play-toggle") + .addEventListener("start", () => Tone.Transport.start()); + document + .querySelector("tone-play-toggle") + .addEventListener("stop", () => Tone.Transport.stop()); + + diff --git a/examples/lfoEffects.html b/examples/lfoEffects.html index a1cddac8..9488897c 100644 --- a/examples/lfoEffects.html +++ b/examples/lfoEffects.html @@ -1,87 +1,169 @@ - + - - - LFO Effects + + + LFO Effects - - + + - - - - - - - - -
- These effects use an LFO (Low Frequency Oscillator) to modulate the effect. Click and drag the dot to change the frequency and depth of the effect. -

- Docs on Tone.AutoPanner, - Tone.AutoFilter, and - Tone.Tremolo -
+ + + + + + + + +
+ These effects use an + LFO + (Low Frequency Oscillator) to modulate the effect. Click and + drag the dot to change the frequency and depth of the effect. +

+ Docs on + Tone.AutoPanner, + Tone.AutoFilter, and + Tone.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)) + ); + + diff --git a/examples/meter.html b/examples/meter.html index b3a11c53..809dfabe 100644 --- a/examples/meter.html +++ b/examples/meter.html @@ -1,57 +1,75 @@ - + - - - Meter + + + Meter - - + + - - - - - - - - - -
- Tone.Meter - gives you the level of the incoming signal in decibels. -
+ + + + + + + + + +
+ Tone.Meter + gives you the level of the incoming signal in decibels. +
-
- -
- +
+ +
+ - - + // bind the interface + document + .querySelector("tone-play-toggle") + .addEventListener("start", () => player.start()); + document + .querySelector("tone-play-toggle") + .addEventListener("stop", () => player.stop()); + + diff --git a/examples/mixer.html b/examples/mixer.html index 8c2a7325..9c36139c 100644 --- a/examples/mixer.html +++ b/examples/mixer.html @@ -1,74 +1,99 @@ - + - - - Mixer + + + Mixer - - + + - - - - - - - - - -
- Tone.Channel provides a simple channel interface. It allows for panning and volume changes as well as the ability to solo (exclude audio in other Tone.Channels). -
- - -
- -
- + + + + + + + + + +
+ Tone.Channel + provides a simple channel interface. It allows for panning and + volume changes as well as the ability to + solo + (exclude audio in other Tone.Channels). +
- - + document + .querySelector("tone-play-toggle") + .addEventListener("start", () => Tone.Transport.start()); + document + .querySelector("tone-play-toggle") + .addEventListener("stop", () => Tone.Transport.stop()); + + diff --git a/examples/monoSynth.html b/examples/monoSynth.html index 8b94d2f7..60e11812 100644 --- a/examples/monoSynth.html +++ b/examples/monoSynth.html @@ -1,69 +1,81 @@ - + - - - MonoSynth + + + MonoSynth - - + + - - - - - - - - - -
- Tone.MonoSynth - is composed of one oscillator, one filter, and two envelopes. - Both envelopes are triggered simultaneously when a note is triggered. -
- -
-
- - - + + + + + + + + +
+ Tone.MonoSynth + is composed of one oscillator, one filter, and two envelopes. + Both envelopes are triggered simultaneously when a note is + triggered. +
- 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" - }); +
+ - - + + diff --git a/examples/noises.html b/examples/noises.html index f130988e..35da0296 100644 --- a/examples/noises.html +++ b/examples/noises.html @@ -1,63 +1,81 @@ - + - - - Noise + + + Noise - - + + - - - - - - - - - -
- Tone.Noise - has 3 different types of noise. Careful, it's loud! -
+ + + + + + + + + +
+ Tone.Noise + has 3 different types of noise. Careful, it's loud! +
-
- -
- +
+ +
+ - - + 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()); + + diff --git a/examples/offline.html b/examples/offline.html index c470a4b6..ac6b156d 100644 --- a/examples/offline.html +++ b/examples/offline.html @@ -1,103 +1,139 @@ - + - - - Offline + + + Offline - - + + - - - - - - - - - - -
- Tone.Offline renders a chunk of Tone.js code into an AudioBuffer. An offline instance of Tone.Transport is passed into the callback which can be used to schedule events. It may take a moment to render the sound. -

- Tone.Offline docs. -
+ + + + + + + + + + +
+ Tone.Offline renders a chunk of Tone.js code into an + AudioBuffer. An offline instance of Tone.Transport is passed + into the callback which can be used to schedule events. It may + take a moment to render the sound. +

+ Tone.Offline + docs. +
-
- -
- +
+ +
+ - - + document + .querySelector("tone-play-toggle") + .addEventListener("start", () => player.start()); + document + .querySelector("tone-play-toggle") + .addEventListener("stop", () => player.stop()); + + diff --git a/examples/oscillator.html b/examples/oscillator.html index 15677bff..ab771e33 100644 --- a/examples/oscillator.html +++ b/examples/oscillator.html @@ -1,53 +1,71 @@ - + - - - Oscillator + + + Oscillator - - + + - - - - - - - - - -
- The oscillator has 4 basic types which can be altered by setting the number - of partials and partials array. -

- Tone.Oscillator docs. -
+ + + + + + + + + +
+ The oscillator has 4 basic types which can be altered by setting + the number of partials and partials array. +

+ Tone.Oscillator + docs. +
-
- -
- +
+ +
+ + - + // bind the interface + document + .querySelector("tone-momentary-button") + .addEventListener("down", () => osc.start()); + document + .querySelector("tone-momentary-button") + .addEventListener("up", () => osc.stop()); + + diff --git a/examples/pingPongDelay.html b/examples/pingPongDelay.html index a68133cd..8bb7e960 100644 --- a/examples/pingPongDelay.html +++ b/examples/pingPongDelay.html @@ -1,54 +1,77 @@ - + - - - Ping Pong Delay + + + Ping Pong Delay - - + + - - - - - - - - - + + + + + + + + + -
- 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. -

- Tone.PingPongDelay docs. -
+
+ 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. +

+ Tone.PingPongDelay + docs. +
-
- -
- - - - + 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()); + + diff --git a/examples/pitchShift.html b/examples/pitchShift.html index ac57e1c1..32faee98 100644 --- a/examples/pitchShift.html +++ b/examples/pitchShift.html @@ -1,61 +1,90 @@ - + - - - Pitch Shift + + + Pitch Shift - - + + - - - - - - - - - -
- This example demonstrates the Pitch Shift effect. -

- Tone.Pitch Shift docs. -
- - -
- - -
- + + + + + + + + + +
+ This example demonstrates the Pitch Shift effect. +

+ Tone.Pitch Shift + docs. +
- - + // 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); + }); + + diff --git a/examples/player.html b/examples/player.html index 5c1314d1..6c1598f0 100644 --- a/examples/player.html +++ b/examples/player.html @@ -1,54 +1,70 @@ - + - - - Player + + + Player - - + + - - - - - - - - - - -
- Click on the button to play the audio file on loop - using Tone.Player. -
+ + + + + + + + + + +
+ Click on the button to play the audio file on loop using + Tone.Player. +
-
- -
- - - + ui({ + tone: 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()); + + diff --git a/examples/polySynth.html b/examples/polySynth.html index 096438d7..24fe971b 100644 --- a/examples/polySynth.html +++ b/examples/polySynth.html @@ -1,56 +1,68 @@ - + - - - PolySynth + + + PolySynth - - + + - - - - - - - - - -
- Tone.PolySynth - 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. -
- -
-
- - - + + + + + + + + +
+ Tone.PolySynth + 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. +
- 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"), - }); - - - \ No newline at end of file +
+ + + + + diff --git a/examples/reverb.html b/examples/reverb.html index 6efc996c..6255a234 100644 --- a/examples/reverb.html +++ b/examples/reverb.html @@ -1,56 +1,73 @@ - + - - - Reverb + + + Reverb - - + + - - - - - - - - - -
- Tone.Reverb - 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. -
+ + + + + + + + + +
+ Tone.Reverb + 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. +
-
- -
- - - - + // bind the interface + document + .querySelector("tone-play-toggle") + .addEventListener("start", () => player.start()); + document + .querySelector("tone-play-toggle") + .addEventListener("stop", () => player.stop()); + + diff --git a/examples/sampler.html b/examples/sampler.html index 526fc156..690189d3 100644 --- a/examples/sampler.html +++ b/examples/sampler.html @@ -1,79 +1,98 @@ - + - - - Sampler + + + Sampler - - + + - - - - - - - - - - + + + + + + + + + + -
- Tone.Sampler 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. -
+
+ Tone.Sampler + 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. +
-
-
- +
+ - - - + piano({ + parent: document.querySelector("#content"), + noteon: (note) => sampler.triggerAttack(note.name), + noteoff: (note) => sampler.triggerRelease(note.name), + }); + + diff --git a/examples/signal.html b/examples/signal.html index d0289e96..9ae68930 100644 --- a/examples/signal.html +++ b/examples/signal.html @@ -1,106 +1,135 @@ - + - - - Signal + + + Signal - - + + - - - - - - - - - -
- 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. -

- This example applies a series of mappings to a - signal value and applies the results of those mappings - to the frequency attribute of 2 - Tone.Oscillators - and a Tone.LFO. -
+ + + + + + + + + +
+ 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. +

+ This example applies a series of mappings to a signal value and + applies the results of those mappings to the frequency attribute + of 2 + Tone.Oscillators + and a + Tone.LFO. +
-
- - -
- - - + // 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 + 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); + }); + + diff --git a/examples/simpleSynth.html b/examples/simpleSynth.html index 4abe621f..d8a6813e 100644 --- a/examples/simpleSynth.html +++ b/examples/simpleSynth.html @@ -1,66 +1,88 @@ - + - - - Synth + + + Synth - - + + - - - - - - - - - -
- Tone.Synth is composed simply of a - Tone.OmniOscillator - routed through a - Tone.AmplitudeEnvelope. -
+ + + + + + + + + +
+ Tone.Synth + is composed simply of a + Tone.OmniOscillator + routed through a + Tone.AmplitudeEnvelope. +
-
-
- +
+ - - - \ No newline at end of file + ui({ + tone: synth, + name: "Synth", + parent: document.querySelector("#content"), + }); + + + diff --git a/examples/stepSequencer.html b/examples/stepSequencer.html index 4fac4fe0..e97f5a5f 100644 --- a/examples/stepSequencer.html +++ b/examples/stepSequencer.html @@ -1,57 +1,91 @@ - + - - - Step Sequencer + + + Step Sequencer - - + + - - - - - - - - - - -
- Tone.Transport - is the application-wide timekeeper. It's clock source enables sample-accurate scheduling as well as tempo-curves and automation. This example uses Tone.Sequence to invoke a callback every 16th note. -
+ + + + + + + + + + +
+ Tone.Transport + 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. +
-
- - - -
- +
+ + + +
+ - - + 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"); + }); + +