<!DOCTYPE html> <html> <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"> <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/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> <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 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); Tone.Transport.bpm.value = 115; 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> </html>