Skip to content

Commit 73f158f

Browse files
tambientambien
authored
updating example links (#1246)
1 parent f06ff17 commit 73f158f

25 files changed

+2493
-1798
lines changed

‎examples/amSynth.html

+72-58
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,78 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<title>AMSynth</title>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>AMSynth</title>
66

7-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
8-
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
9-
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
10-
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
11-
<script src="../build/Tone.js"></script>
12-
<script src="./js/tone-ui.js"></script>
13-
<script src="./js/components.js"></script>
14-
</head>
15-
<body>
16-
<tone-example label="AMSynth">
17-
<div slot="explanation">
18-
<a href="https://tonejs.github.io/docs/AMSynth">Tone.AMSynth</a>
19-
is composed of two
20-
<a href="https://tonejs.github.io/docs/Synth">Tone.Synths</a>
21-
where one Tone.Synth modulates the amplitude of a second Tone.Synth.
22-
</div>
7+
<meta
8+
name="viewport"
9+
content="width=device-width, initial-scale=1, maximum-scale=1"
10+
/>
11+
<link
12+
rel="icon"
13+
type="image/png"
14+
sizes="174x174"
15+
href="./favicon.png"
16+
/>
17+
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
18+
<link
19+
href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
20+
rel="stylesheet"
21+
/>
22+
<script src="../build/Tone.js"></script>
23+
<script src="./js/tone-ui.js"></script>
24+
<script src="./js/components.js"></script>
25+
</head>
26+
<body>
27+
<tone-example label="AMSynth">
28+
<div slot="explanation">
29+
<a href="https://tonejs.github.io/docs/latest/classes/AMSynth"
30+
>Tone.AMSynth</a
31+
>
32+
is composed of two
33+
<a href="https://tonejs.github.io/docs/latest/classes/Synth"
34+
>Tone.Synths</a
35+
>
36+
where one Tone.Synth modulates the amplitude of a second
37+
Tone.Synth.
38+
</div>
2339

24-
<div id="content">
25-
</div>
26-
</tone-example>
27-
28-
<script type="text/javascript">
29-
const synth = new Tone.AMSynth({
30-
harmonicity: 2.5,
31-
oscillator: {
32-
type: "fatsawtooth"
33-
},
34-
envelope: {
35-
attack: 0.1,
36-
decay: 0.2,
37-
sustain: 0.2,
38-
release: 0.3
39-
},
40-
modulation: {
41-
type: "square"
42-
},
43-
modulationEnvelope: {
44-
attack: 0.5,
45-
decay: 0.01
46-
}
47-
}).toDestination();
40+
<div id="content"></div>
41+
</tone-example>
4842

49-
piano({
50-
tone: synth,
51-
parent: document.querySelector("#content"),
52-
noteon: (note) => synth.triggerAttack(note.name),
53-
noteoff: (note) => synth.triggerRelease()
54-
});
43+
<script type="text/javascript">
44+
const synth = new Tone.AMSynth({
45+
harmonicity: 2.5,
46+
oscillator: {
47+
type: "fatsawtooth",
48+
},
49+
envelope: {
50+
attack: 0.1,
51+
decay: 0.2,
52+
sustain: 0.2,
53+
release: 0.3,
54+
},
55+
modulation: {
56+
type: "square",
57+
},
58+
modulationEnvelope: {
59+
attack: 0.5,
60+
decay: 0.01,
61+
},
62+
}).toDestination();
5563

56-
ui({
57-
tone: synth,
58-
name: "AMSynth",
59-
parent: document.querySelector("#content"),
60-
});
61-
62-
</script>
63-
</body>
64+
piano({
65+
tone: synth,
66+
parent: document.querySelector("#content"),
67+
noteon: (note) => synth.triggerAttack(note.name),
68+
noteoff: (note) => synth.triggerRelease(),
69+
});
70+
71+
ui({
72+
tone: synth,
73+
name: "AMSynth",
74+
parent: document.querySelector("#content"),
75+
});
76+
</script>
77+
</body>
6478
</html>

‎examples/analysis.html

+81-59
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,93 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<title>Analyser</title>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Analyser</title>
66

7-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
8-
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
7+
<meta
8+
name="viewport"
9+
content="width=device-width, initial-scale=1, maximum-scale=1"
10+
/>
11+
<link
12+
rel="icon"
13+
type="image/png"
14+
sizes="174x174"
15+
href="./favicon.png"
16+
/>
917

10-
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
11-
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
12-
<script src="../build/Tone.js"></script>
13-
<script src="./js/tone-ui.js"></script>
14-
<script src="./js/components.js"></script>
18+
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
19+
<link
20+
href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
21+
rel="stylesheet"
22+
/>
23+
<script src="../build/Tone.js"></script>
24+
<script src="./js/tone-ui.js"></script>
25+
<script src="./js/components.js"></script>
26+
</head>
27+
<body>
28+
<tone-example label="Analyser">
29+
<tone-loader></tone-loader>
1530

16-
</head>
17-
<body>
18-
<tone-example label="Analyser">
19-
<tone-loader></tone-loader>
31+
<div slot="explanation">
32+
<a
33+
href="https://tonejs.github.io/docs/latest/classes/FFT"
34+
target="_blank"
35+
>Tone.FFT</a
36+
>
37+
returns the amplitude of the incoming signal at different
38+
frequencies.
39+
<a
40+
href="https://tonejs.github.io/docs/latest/classes/Waveform"
41+
target="_blank"
42+
>Tone.Waveform</a
43+
>
44+
returns the signal value between 0-1.
45+
</div>
2046

21-
<div slot="explanation">
22-
<a href="https://tonejs.github.io/docs/FFT" target="_blank">Tone.FFT</a>
23-
returns the amplitude of the incoming signal at different frequencies.
24-
<a href="https://tonejs.github.io/docs/Waveform" target="_blank">Tone.Waveform</a>
25-
returns the signal value between 0-1.
26-
</div>
47+
<div id="content">
48+
<tone-play-toggle></tone-play-toggle>
49+
</div>
50+
</tone-example>
2751

28-
<div id="content">
29-
<tone-play-toggle></tone-play-toggle>
30-
</div>
31-
</tone-example>
52+
<script type="text/javascript">
53+
const player = new Tone.Player({
54+
url: "https://tonejs.github.io/audio/berklee/arpeggio2.mp3",
55+
loop: true,
56+
}).toDestination();
3257

33-
<script type="text/javascript">
34-
const player = new Tone.Player({
35-
url: "https://tonejs.github.io/audio/berklee/arpeggio2.mp3",
36-
loop: true
37-
}).toDestination();
58+
const toneMeter = new Tone.Meter();
59+
player.connect(toneMeter);
3860

39-
const toneMeter = new Tone.Meter();
40-
player.connect(toneMeter);
61+
const toneFFT = new Tone.FFT();
62+
player.connect(toneFFT);
4163

42-
const toneFFT = new Tone.FFT();
43-
player.connect(toneFFT);
64+
const toneWaveform = new Tone.Waveform();
65+
player.connect(toneWaveform);
4466

45-
const toneWaveform = new Tone.Waveform();
46-
player.connect(toneWaveform);
67+
// bind the GUI
68+
drawer().add({
69+
tone: player,
70+
title: "Player",
71+
});
72+
meter({
73+
tone: toneMeter,
74+
parent: document.querySelector("#content"),
75+
});
76+
fft({
77+
tone: toneFFT,
78+
parent: document.querySelector("#content"),
79+
});
80+
waveform({
81+
tone: toneWaveform,
82+
parent: document.querySelector("#content"),
83+
});
4784

48-
// bind the GUI
49-
drawer().add({
50-
tone: player,
51-
title: "Player",
52-
});
53-
meter({
54-
tone: toneMeter,
55-
parent: document.querySelector("#content")
56-
});
57-
fft({
58-
tone: toneFFT,
59-
parent: document.querySelector("#content")
60-
});
61-
waveform({
62-
tone: toneWaveform,
63-
parent: document.querySelector("#content")
64-
});
65-
66-
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
67-
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
68-
69-
</script>
70-
</body>
85+
document
86+
.querySelector("tone-play-toggle")
87+
.addEventListener("start", () => player.start());
88+
document
89+
.querySelector("tone-play-toggle")
90+
.addEventListener("stop", () => player.stop());
91+
</script>
92+
</body>
7193
</html>

0 commit comments

Comments
 (0)