<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Grain Player</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> <style type="text/css"> tone-play-toggle, tone-fft { margin-bottom: 10px; } tone-fft { background-color: black; height: 40px; width: 100%; border-radius: 20px; } </style> <tone-example label="Granular Synthesis"> <div slot="explanation"> <a href="https://tonejs.github.io/docs/GrainPlayer">Tone.GrainPlayer</a> uses <a href="https://en.wikipedia.org/wiki/Granular_synthesis">granular synthesis</a> 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. </div> <tone-loader></tone-loader> <div id="content"> <tone-play-toggle></tone-play-toggle> </div> </tone-example> <script type="text/javascript"> // 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"), tone: player, }); // bind the interface document.querySelector("tone-play-toggle").addEventListener("start", () => player.start()); document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop()); </script> </body> </html>