<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>