2014-06-23 21:00:51 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
2014-06-24 16:12:56 +00:00
|
|
|
<title>STEP SEQUENCER</title>
|
2014-06-23 21:00:51 +00:00
|
|
|
|
2014-06-24 16:12:56 +00:00
|
|
|
<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">
|
2014-06-23 21:00:51 +00:00
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2014-06-24 16:12:56 +00:00
|
|
|
<div>16 Step Sequencer. Each column is a 16th note and each row is a different note.</div>
|
|
|
|
|
<br>
|
|
|
|
|
<button>start</button>
|
|
|
|
|
<br><br>
|
|
|
|
|
<div id="checkboxes"></div>
|
|
|
|
|
<div id="output"></div>
|
|
|
|
|
<div id="loading">loading...</div>
|
2014-07-02 21:19:19 +00:00
|
|
|
<br><br>
|
|
|
|
|
<input type='range' value='120' min='100' max='160'>
|
|
|
|
|
<div id='tempo' >bpm: 120</div>
|
2014-06-24 16:12:56 +00:00
|
|
|
<script type="text/javascript">
|
2014-06-23 21:00:51 +00:00
|
|
|
|
2014-06-24 16:12:56 +00:00
|
|
|
//which beat in the 16 beats
|
|
|
|
|
var stepNumber = 0;
|
|
|
|
|
//the number of loaded players
|
|
|
|
|
var loadedCount = 0;
|
|
|
|
|
//2d array of checkboxes
|
|
|
|
|
var checkboxes = [];
|
|
|
|
|
//array of radio buttons
|
|
|
|
|
var radios = [];
|
2014-06-23 21:00:51 +00:00
|
|
|
|
2014-06-24 16:12:56 +00:00
|
|
|
//all of the audio players
|
|
|
|
|
var players = [
|
|
|
|
|
new Tone.Player("./audio/casio/A1.mp3", playerLoaded),
|
|
|
|
|
new Tone.Player("./audio/casio/Cs2.mp3", playerLoaded),
|
|
|
|
|
new Tone.Player("./audio/casio/E2.mp3", playerLoaded),
|
|
|
|
|
new Tone.Player("./audio/casio/Fs2.mp3", playerLoaded)
|
|
|
|
|
];
|
2014-06-23 21:00:51 +00:00
|
|
|
|
2014-06-24 16:12:56 +00:00
|
|
|
//player onload callback
|
|
|
|
|
function playerLoaded(player){
|
|
|
|
|
//able to be retriggered before the file is done playing
|
|
|
|
|
player.retrigger = true;
|
|
|
|
|
player.toMaster();
|
|
|
|
|
loadedCount++;
|
|
|
|
|
if (loadedCount === players.length){
|
|
|
|
|
$("#loading").remove();
|
|
|
|
|
}
|
|
|
|
|
}
|
2014-06-23 21:00:51 +00:00
|
|
|
|
|
|
|
|
|
2014-06-24 16:12:56 +00:00
|
|
|
//make the checkboxes
|
|
|
|
|
//1 row for each player
|
|
|
|
|
//16 beats in each row
|
|
|
|
|
function makeCheckboxes(){
|
|
|
|
|
for (var row = 0; row < players.length; row++){
|
|
|
|
|
checkboxes[row] = [];
|
|
|
|
|
for (var beat = 0; beat < 16; beat++){
|
|
|
|
|
var checkbox = $("<input type='checkbox'>").appendTo("#checkboxes");
|
|
|
|
|
checkboxes[row].push(checkbox);
|
|
|
|
|
//randomly set some as checked initially
|
|
|
|
|
if (Math.random() < 0.25){
|
|
|
|
|
checkbox.prop("checked", true);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
$("#checkboxes").append("<br>")
|
|
|
|
|
}
|
|
|
|
|
}
|
2014-06-23 21:00:51 +00:00
|
|
|
|
2014-06-24 16:12:56 +00:00
|
|
|
//make the radio buttons to show which beat we're on
|
|
|
|
|
function makeRadios(){
|
|
|
|
|
for (var beat = 0; beat < 16; beat++){
|
|
|
|
|
var radio = $("<input type='radio' name='step'>").appendTo("#checkboxes");
|
|
|
|
|
radios.push(radio);
|
|
|
|
|
}
|
|
|
|
|
$("#checkboxes").append("<br>");
|
|
|
|
|
}
|
2014-06-23 21:00:51 +00:00
|
|
|
|
2014-06-24 16:21:25 +00:00
|
|
|
//called when the start button is clicked
|
2014-06-24 16:12:56 +00:00
|
|
|
function startTransport(){
|
|
|
|
|
if (Tone.Transport.state === "started"){
|
|
|
|
|
Tone.Transport.stop();
|
|
|
|
|
$("button").text("start");
|
|
|
|
|
$("#output").text("");
|
|
|
|
|
} else {
|
|
|
|
|
stepNumber = 0;
|
|
|
|
|
$("button").text("stop");
|
|
|
|
|
Tone.Transport.setInterval(onStep, "16n");
|
|
|
|
|
Tone.Transport.start();
|
|
|
|
|
}
|
|
|
|
|
}
|
2014-06-23 21:00:51 +00:00
|
|
|
|
2014-06-24 16:12:56 +00:00
|
|
|
//called every sixteenth note
|
|
|
|
|
function onStep(time){
|
|
|
|
|
//set the right radio
|
|
|
|
|
selectRadio(stepNumber);
|
|
|
|
|
//for each of the rows
|
|
|
|
|
for (var row = 0; row < players.length; row++){
|
|
|
|
|
//check each of the checkbox values
|
|
|
|
|
var box = checkboxes[row][stepNumber];
|
|
|
|
|
if (box.prop("checked")){
|
|
|
|
|
players[row].start(time);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
stepNumber++;
|
|
|
|
|
stepNumber = stepNumber % 16;
|
|
|
|
|
}
|
2014-06-23 21:00:51 +00:00
|
|
|
|
2014-06-24 16:21:25 +00:00
|
|
|
//show the current beat on the radio buttons
|
2014-06-24 16:12:56 +00:00
|
|
|
function selectRadio(stepNumber){
|
|
|
|
|
//unselect the previous one
|
|
|
|
|
var prev = stepNumber - 1;
|
|
|
|
|
if (prev === -1){
|
|
|
|
|
prev = 15;
|
|
|
|
|
}
|
|
|
|
|
radios[prev].prop("checked", false);
|
|
|
|
|
//select the current one
|
|
|
|
|
radios[stepNumber].prop("checked", true);
|
|
|
|
|
}
|
2014-06-23 21:00:51 +00:00
|
|
|
|
2014-06-24 16:12:56 +00:00
|
|
|
//initialization
|
|
|
|
|
$(function(){
|
|
|
|
|
//the start button
|
|
|
|
|
$("button").click(startTransport);
|
|
|
|
|
//the interface
|
|
|
|
|
makeRadios();
|
|
|
|
|
makeCheckboxes();
|
|
|
|
|
Tone.Transport.setBpm(120);
|
2014-07-02 21:19:19 +00:00
|
|
|
$("input").on("input", function(){
|
|
|
|
|
var tempo = $(this).val();
|
|
|
|
|
$("#tempo").text("bpm: "+tempo);
|
|
|
|
|
Tone.Transport.setBpm(tempo);
|
|
|
|
|
});
|
2014-06-24 16:12:56 +00:00
|
|
|
});
|
2014-06-23 21:00:51 +00:00
|
|
|
|
2014-06-24 16:12:56 +00:00
|
|
|
</script>
|
2014-06-23 21:00:51 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
