<!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://unpkg.com/@webcomponents/webcomponentsjs@^2/webcomponents-bundle.js"></script>
	<script src="../build/Tone.js"></script>
	<script src="./js/tonejs-ui.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>
		<tone-explanation label="Granular Synthesis">
			<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.
		</tone-explanation>
		
		<tone-loader></tone-loader>

		<tone-content>
			<tone-fft></tone-fft>
			<tone-play-toggle></tone-play-toggle>
			<tone-grain-player></tone-grain-player>
		</tone-content>
	</tone-example>

	<script type="text/javascript">
		//the player
		var player = new Tone.GrainPlayer({
			"url" : "./audio/FWDL.[mp3|ogg]",
			"loop" : true,
			"grainSize" : 0.1,
			"overlap" : 0.05,
		}).toMaster();

		//bind the interface
		document.querySelector("tone-fft").bind(player);
		document.querySelector("tone-play-toggle").bind(player);
		document.querySelector("tone-grain-player").bind(player);
	</script>
</body>
</html>