<html>
<head>
	<title>TRANSPORT</title>

	<script type="text/javascript" src="../build/Tone.js"></script>
</head>
<body>
	<button>start</button>
	<div id="output"></div>
	<div id="loading">loading...</div>
	<script type="text/javascript">

		Tone.Transport.loop = true;
		Tone.Transport.setLoopStart("0:0");
		Tone.Transport.setLoopEnd("1:0");
		Tone.Transport.setBpm(145);

		var player = new Tone.Player("./audio/505/hh.mp3", function(){
			document.querySelector("#loading").remove();
		});
		player.toMaster();

		//setting events
		var output = document.querySelector("#output");

		Tone.Transport.setTimeout(function(time){
			player.start(time);
			output.textContent = "a";
		}, "0:0");

		Tone.Transport.setTimeout(function(time){
			player.start(time);
			output.textContent = "series";
		}, "0:1");

		Tone.Transport.setTimeout(function(time){
			player.start(time);
			output.textContent = "of";
		}, "2n");

		Tone.Transport.setTimeout(function(time){
			player.start(time);
			output.textContent = "timed";
		}, "0:3");

		Tone.Transport.setTimeout(function(time){
			player.start(time);
			output.textContent = "events";
		}, "0:3:2");

		var button = document.querySelector("button");

		button.onclick = function(){
			if (Tone.Transport.state === "playing"){
				Tone.Transport.stop();
				button.textContent = "start";
			} else {
				Tone.Transport.start();
				button.textContent = "stop";
			}
		}


	</script>
</body>
</html>