Tone.js/examples/transport.html

73 lines
No EOL
1.6 KiB
HTML

<html>
<head>
<title>TRANSPORT</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="../Tone.js"></script>
<link rel="stylesheet" type="text/css" href="exampleStyle.css">
</head>
<body>
<div>Setup a series of events along a 1 bar loop</div>
<br>
<button>start</button>
<div id="transportTime">0:0:0</div>
<br><br>
<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(){
$("#loading").remove();
});
player.retrigger = true;
player.toMaster();
setInterval(function(){
$("#transportTime").text(Tone.Transport.getTransportTime());
}, 100);
Tone.Transport.setTimeline(function(time){
player.start(time);
$("#output").text("a");
}, "0:0");
Tone.Transport.setTimeline(function(time){
player.start(time);
$("#output").text("series");
}, "0:1");
Tone.Transport.setTimeline(function(time){
player.start(time);
$("#output").text("of");
}, "2n");
Tone.Transport.setTimeline(function(time){
player.start(time);
$("#output").text("timed");
}, "0:3");
Tone.Transport.setTimeline(function(time){
player.start(time);
$("#output").text("events");
}, "0:3:2");
$("button").click(function(){
if (Tone.Transport.state === "started"){
Tone.Transport.stop();
$(this).text("start");
$("#output").text("");
} else {
Tone.Transport.start();
$(this).text("stop");
}
});
</script>
</body>
</html>