-
Notifications
You must be signed in to change notification settings - Fork 991
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
25 changed files
with
2,493 additions
and
1,798 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
Oops, something went wrong.