mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-10 05:54:20 +00:00
styling examples
This commit is contained in:
Yotam Mann
parent
03bec5cb05
commit
39c7da2ab1
11 changed files with 315 additions and 298 deletions
|
|
@ -148,6 +148,9 @@ define(["Tone/core/Tone", "Tone/source/Source"], function(Tone){
|
|||
this.state = Tone.Source.State.STARTED;
|
||||
//default args
|
||||
offset = this.defaultArg(offset, 0);
|
||||
if (this.loop){
|
||||
offset = this.loopStart;
|
||||
}
|
||||
duration = this.defaultArg(duration, this._buffer.duration - offset);
|
||||
//make the source
|
||||
this._source = this.context.createBufferSource();
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
var ExampleList = {
|
||||
"Core" : {
|
||||
// "Notes / Scores" : "score",
|
||||
"Transport" : "stepSequencer",
|
||||
"Notes / Scores" : "score"
|
||||
},
|
||||
"Sources" : {
|
||||
"Oscillators" : "oscillator",
|
||||
"Noise" : "noises",
|
||||
"Player" : "player"
|
||||
},
|
||||
"Components" : {
|
||||
"Envelope" : "envelope",
|
||||
|
|
@ -15,6 +17,7 @@ var ExampleList = {
|
|||
},
|
||||
"Effects" : {
|
||||
"AutoPanner" : "autoPanner",
|
||||
"PingPongDelay" : "pingPongDelay"
|
||||
},
|
||||
"Instruments" : {
|
||||
"MonoSynth" : "monoSynth",
|
||||
|
|
|
|||
|
|
@ -289,6 +289,18 @@ GUI.Checkbox.prototype.disable = function() {
|
|||
this.element.button("disable");
|
||||
};
|
||||
|
||||
GUI.Checkbox.prototype.check = function(bool){
|
||||
if (bool){
|
||||
this.element.addClass("pressed");
|
||||
} else {
|
||||
this.element.removeClass("pressed");
|
||||
}
|
||||
};
|
||||
|
||||
GUI.Checkbox.prototype.isChecked = function(){
|
||||
return this.element.hasClass("pressed");
|
||||
};
|
||||
|
||||
/**
|
||||
* a start stop button
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>FEEDBACK DELAY</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>Pass the sample through a feedback delay</div>
|
||||
<br>
|
||||
<button>hit</button>
|
||||
<div id='loading'>loading...<div>
|
||||
<script type="text/javascript">
|
||||
//the player
|
||||
var player = new Tone.Player("./audio/505/snare.mp3", function(){
|
||||
document.querySelector("#loading").remove();
|
||||
});
|
||||
|
||||
var feedbackDelay = new Tone.FeedbackDelay(.25);
|
||||
//60% feedback
|
||||
feedbackDelay.setFeedback(.2);
|
||||
|
||||
//connections
|
||||
player.connect(feedbackDelay);
|
||||
feedbackDelay.toMaster();
|
||||
feedbackDelay.setWet(0.5);
|
||||
|
||||
$("button").click(function(){
|
||||
player.start();
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,18 +2,33 @@
|
|||
<head>
|
||||
<title>NOISES</title>
|
||||
|
||||
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
|
||||
<script type="text/javascript" src="../deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../deps/jquery-ui.js"></script>
|
||||
<script type="text/javascript" src="../deps/jquery.ui.touch-punch.js"></script>
|
||||
<script type="text/javascript" src="../Tone.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="exampleStyle.css">
|
||||
<script type="text/javascript" src="./Widgets.js"></script>
|
||||
<script type="text/javascript" src="./ExampleList.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="./style/widgets.css">
|
||||
<link rel="stylesheet" type="text/css" href="./style/jquery-ui.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>Change switch to random noise type every quarter-second for 8 seconds</div>
|
||||
<br>
|
||||
<button>start</button>
|
||||
<div id='noise'></div>
|
||||
<div id="Container">
|
||||
<div id="Explanation">
|
||||
Noise
|
||||
<br>
|
||||
<br>
|
||||
Tone has 3 different types of noise. Here's a little noise song.
|
||||
</div>
|
||||
<div id="Content">
|
||||
<div id="Button"></div>
|
||||
<div id='Noise'></div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* globals Tone, GUI */
|
||||
|
||||
var noise = new Tone.Noise();
|
||||
noise.toMaster();
|
||||
|
||||
|
|
@ -24,22 +39,41 @@
|
|||
var randomIndex = Math.floor(Math.random()* noiseTypes.length);
|
||||
var randomNoise = noiseTypes[randomIndex];
|
||||
noise.setType(randomNoise, time);
|
||||
$("#Noise").text(randomNoise);
|
||||
}, "8n");
|
||||
|
||||
$("#noise").text(randomNoise);
|
||||
}, 0.25);
|
||||
|
||||
//stop it after 4 measures
|
||||
Tone.Transport.setTimeout(function(time){
|
||||
noise.stop(time);
|
||||
Tone.Transport.stop();
|
||||
$("#noise").text("");
|
||||
}, 8);
|
||||
$("#Noise").text("done");
|
||||
setTimeout(function(){
|
||||
$("#Noise").text("");
|
||||
}, 500);
|
||||
}, "4m");
|
||||
|
||||
$("button").click(function(){
|
||||
// GUI //
|
||||
|
||||
new GUI.StartButton(Tone.startMobile);
|
||||
new GUI.TopBar(Tone);
|
||||
|
||||
new GUI.Momentary($("#Button"), function(){
|
||||
Tone.Transport.start();
|
||||
noise.start();
|
||||
$(this).remove();
|
||||
});
|
||||
$("#Button").remove();
|
||||
}, "start", "");
|
||||
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
#Content {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
#Content #Button{
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>PANNER</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>Pan a sine wave Left/Right</div>
|
||||
<br>
|
||||
<button type="button">start</button>
|
||||
<input type='range' value='50'>
|
||||
<div id='left'>0</div>
|
||||
<div id='right'>0</div>
|
||||
<script type="text/javascript">
|
||||
|
||||
var pan = new Tone.Panner();
|
||||
var sine = new Tone.Oscillator();
|
||||
|
||||
//connect it up
|
||||
sine.connect(pan);
|
||||
pan.toMaster();
|
||||
|
||||
//meters
|
||||
var outputMeter = new Tone.Meter(2);
|
||||
pan.connect(outputMeter);
|
||||
|
||||
//INTERFACE//
|
||||
|
||||
var button = document.querySelector("button");
|
||||
|
||||
$("button").click(function(){
|
||||
if (sine.state !== "started"){
|
||||
sine.start();
|
||||
$(this).text("stop");
|
||||
} else {
|
||||
sine.stop();
|
||||
$(this).text("start");
|
||||
}
|
||||
});
|
||||
|
||||
//update the meters
|
||||
setInterval(function(){
|
||||
$("#left").text("left: " + outputMeter.getDb(0).toFixed(2) + " db");
|
||||
$("#right").text("right: " + outputMeter.getDb(1).toFixed(2) + " db");
|
||||
}, 100);
|
||||
|
||||
|
||||
$("input").on("input", function(e){
|
||||
var val = $(this).val();
|
||||
pan.setPan(val/100, "0.1");
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
65
examples/pingPongDelay.html
Normal file
65
examples/pingPongDelay.html
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>PINGPONG DELAY</title>
|
||||
|
||||
<script type="text/javascript" src="../deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../deps/jquery-ui.js"></script>
|
||||
<script type="text/javascript" src="../deps/jquery.ui.touch-punch.js"></script>
|
||||
<script type="text/javascript" src="../Tone.js"></script>
|
||||
<script type="text/javascript" src="./Widgets.js"></script>
|
||||
<script type="text/javascript" src="./ExampleList.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="./style/widgets.css">
|
||||
<link rel="stylesheet" type="text/css" href="./style/jquery-ui.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="Container">
|
||||
<div id="Explanation">
|
||||
Ping Pong Delay
|
||||
<br>
|
||||
<br>
|
||||
A Ping Pong Delay is a stereo feedback delay. The stereo effect is more easily heard with headphones.
|
||||
</div>
|
||||
<div id="Content">
|
||||
<div id="Loading">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
/* globals Tone, GUI */
|
||||
|
||||
var player = new Tone.Player("./audio/505/snare.mp3", function(){
|
||||
$("#Loading").remove();
|
||||
});
|
||||
|
||||
var feedbackDelay = new Tone.PingPongDelay("8n");
|
||||
//60% feedback
|
||||
feedbackDelay.setFeedback(0.6);
|
||||
|
||||
//connections
|
||||
player.connect(feedbackDelay);
|
||||
feedbackDelay.toMaster();
|
||||
feedbackDelay.setWet(0.5);
|
||||
|
||||
// GUI //
|
||||
|
||||
new GUI.StartButton(Tone.startMobile);
|
||||
new GUI.TopBar(Tone);
|
||||
|
||||
new GUI.Momentary($("#Content"), function(on){
|
||||
if (on){
|
||||
player.start();
|
||||
}
|
||||
}, "hit", "hit");
|
||||
|
||||
</script>
|
||||
<style type="text/css">
|
||||
#Content {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
.Momentary {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,21 +1,35 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Basic Player</title>
|
||||
<title>PLAYER</title>
|
||||
|
||||
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
|
||||
<script type="text/javascript" src="../deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../deps/jquery-ui.js"></script>
|
||||
<script type="text/javascript" src="../deps/jquery.ui.touch-punch.js"></script>
|
||||
<script type="text/javascript" src="../Tone.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="exampleStyle.css">
|
||||
<script type="text/javascript" src="./Widgets.js"></script>
|
||||
<script type="text/javascript" src="./ExampleList.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="./style/widgets.css">
|
||||
<link rel="stylesheet" type="text/css" href="./style/jquery-ui.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div>press and hold the button to play a 10ms grain from the audio file</div>
|
||||
<br>
|
||||
<button>start</button>
|
||||
<div id='loading'>loading...</button>
|
||||
<div id="Container">
|
||||
<div id="Explanation">
|
||||
Player
|
||||
<br>
|
||||
<br>
|
||||
Press and hold to hear a 10ms grain of audio.
|
||||
</div>
|
||||
<div id="Content">
|
||||
<div id="Loading">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* globals Tone, GUI */
|
||||
|
||||
var player = new Tone.Player("./audio/casio/A1.mp3", function(){
|
||||
$("#loading").remove();
|
||||
$("#Loading").remove();
|
||||
});
|
||||
|
||||
player.loop = true;
|
||||
|
|
@ -25,16 +39,28 @@
|
|||
//connect it to the output
|
||||
player.toMaster();
|
||||
|
||||
$("button").mousedown(function(){
|
||||
player.start(0, player.loopStart);
|
||||
$(this).text("stop");
|
||||
});
|
||||
// GUI //
|
||||
|
||||
$("button").mouseup(function(){
|
||||
player.stop();
|
||||
$(this).text("start");
|
||||
});
|
||||
new GUI.StartButton(Tone.startMobile);
|
||||
new GUI.TopBar(Tone);
|
||||
|
||||
new GUI.Momentary($("#Content"), function(on){
|
||||
if (on){
|
||||
player.start();
|
||||
} else {
|
||||
player.stop();
|
||||
}
|
||||
}, "start", "stop");
|
||||
|
||||
</script>
|
||||
<style type="text/css">
|
||||
#Content {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
.Momentary {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,137 +2,168 @@
|
|||
<head>
|
||||
<title>STEP SEQUENCER</title>
|
||||
|
||||
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
|
||||
<script type="text/javascript" src="../deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../deps/jquery-ui.js"></script>
|
||||
<script type="text/javascript" src="../deps/jquery.ui.touch-punch.js"></script>
|
||||
<script type="text/javascript" src="../Tone.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="exampleStyle.css">
|
||||
<script type="text/javascript" src="./Widgets.js"></script>
|
||||
<script type="text/javascript" src="./ExampleList.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="./style/widgets.css">
|
||||
<link rel="stylesheet" type="text/css" href="./style/jquery-ui.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<br><br>
|
||||
<input type='range' value='120' min='100' max='160'>
|
||||
<div id='tempo' >bpm: 120</div>
|
||||
<div id="Container">
|
||||
<div id="Explanation">
|
||||
Tone.Transport
|
||||
<br>
|
||||
<br>
|
||||
Tone.Transport is the application-wide timekeeper. It uses an OscillatorNode
|
||||
as it's clock source which enables sample-accurate scheduling as well as
|
||||
tempo-curves and automation. This example uses Tone.Transport.setInterval
|
||||
to invoke a callback every 16th note.
|
||||
</div>
|
||||
<div id="Content">
|
||||
<div id="Loading">LOADING...</div>
|
||||
<div id = "StartButton"></div>
|
||||
<div id = "Sequencer"></div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
|
||||
//which beat in the 16 beats
|
||||
/* globals Tone, GUI */
|
||||
|
||||
var keys = new Tone.MultiSampler({
|
||||
"A" : "./audio/casio/A1.mp3",
|
||||
"C#" : "./audio/casio/Cs2.mp3",
|
||||
"E" : "./audio/casio/E2.mp3",
|
||||
"F#" : "./audio/casio/Fs2.mp3",
|
||||
}, function(){
|
||||
$("#Loading").remove();
|
||||
startCheckbox.enable();
|
||||
});
|
||||
keys.toMaster();
|
||||
|
||||
var stepNumber = 0;
|
||||
//the number of loaded players
|
||||
var loadedCount = 0;
|
||||
//2d array of checkboxes
|
||||
var noteNames = ["A", "C#", "E", "F#"];
|
||||
var checkboxes = [];
|
||||
//array of radio buttons
|
||||
var radios = [];
|
||||
var indicators = [];
|
||||
|
||||
//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)
|
||||
];
|
||||
|
||||
//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();
|
||||
Tone.Transport.setLoopEnd("1m");
|
||||
Tone.Transport.loop = true;
|
||||
Tone.Transport.setInterval(function(time){
|
||||
//remove the old indicator
|
||||
$(".Lit").removeClass("Lit");
|
||||
//light up the new one
|
||||
indicators[stepNumber].addClass("Lit");
|
||||
stepNumber++;
|
||||
stepNumber = stepNumber % 16;
|
||||
//get the current column
|
||||
for (var i = 0; i < checkboxes.length; i++){
|
||||
var box = checkboxes[i][stepNumber];
|
||||
if (box.isChecked()){
|
||||
keys.triggerAttack(noteNames[i], time);
|
||||
}
|
||||
}
|
||||
}, "16n");
|
||||
|
||||
// GUI //
|
||||
|
||||
var sequencer = $("#Sequencer");
|
||||
|
||||
//the indicator of the beat
|
||||
function makeIndicator(){
|
||||
for (var beat = 0; beat < 16; beat++){
|
||||
var indicator = $("<div>", {"class" : "Indicator"}).appendTo(sequencer);
|
||||
indicators.push(indicator);
|
||||
}
|
||||
sequencer.append("<br><br>");
|
||||
}
|
||||
|
||||
|
||||
//make the checkboxes
|
||||
//1 row for each player
|
||||
//1 row for each instrument
|
||||
//16 beats in each row
|
||||
function makeCheckboxes(){
|
||||
for (var row = 0; row < players.length; row++){
|
||||
for (var row = 0; row < 4; row++){
|
||||
checkboxes[row] = [];
|
||||
for (var beat = 0; beat < 16; beat++){
|
||||
var checkbox = $("<input type='checkbox'>").appendTo("#checkboxes");
|
||||
var checkbox = new GUI.Checkbox(sequencer, function(){}, "", "");
|
||||
checkboxes[row].push(checkbox);
|
||||
//randomly set some as checked initially
|
||||
if (Math.random() < 0.25){
|
||||
checkbox.prop("checked", true);
|
||||
checkbox.check(true);
|
||||
}
|
||||
}
|
||||
$("#checkboxes").append("<br>")
|
||||
sequencer.append("<br>");
|
||||
}
|
||||
}
|
||||
|
||||
//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>");
|
||||
}
|
||||
new GUI.StartButton(Tone.startMobile);
|
||||
new GUI.TopBar(Tone);
|
||||
|
||||
//called when the start button is clicked
|
||||
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");
|
||||
var startButton = $("#StartButton");
|
||||
var startCheckbox = new GUI.Checkbox(startButton, function(on){
|
||||
if (on){
|
||||
Tone.Transport.start();
|
||||
} else {
|
||||
Tone.Transport.stop();
|
||||
}
|
||||
}
|
||||
}, "start", "stop");
|
||||
startCheckbox.disable();
|
||||
|
||||
makeIndicator();
|
||||
makeCheckboxes();
|
||||
|
||||
//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;
|
||||
}
|
||||
|
||||
//show the current beat on the radio buttons
|
||||
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);
|
||||
}
|
||||
|
||||
//initialization
|
||||
$(function(){
|
||||
//the start button
|
||||
$("button").click(startTransport);
|
||||
//the interface
|
||||
makeRadios();
|
||||
makeCheckboxes();
|
||||
Tone.Transport.setBpm(120);
|
||||
$("input").on("input", function(){
|
||||
var tempo = $(this).val();
|
||||
$("#tempo").text("bpm: "+tempo);
|
||||
Tone.Transport.setBpm(tempo);
|
||||
});
|
||||
});
|
||||
var slider = new GUI.Slider($("#Content"), function(val){
|
||||
var scaled = val * 30 + 100;
|
||||
Tone.Transport.setBpm(scaled);
|
||||
return scaled;
|
||||
}, 120, "tempo");
|
||||
slider.render(20/30);
|
||||
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
#Content {
|
||||
/*text-align: center;*/
|
||||
width: 470px;
|
||||
height: 200px;
|
||||
}
|
||||
#Content #Sequencer .Checkbox{
|
||||
margin-top: 0px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
#Content #Sequencer .Checkbox .ui-button-text {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
#Content #Sequencer .Indicator{
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
margin: 1.5px;
|
||||
background-color: yellow;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s;
|
||||
}
|
||||
#Content #Sequencer .Indicator.Lit{
|
||||
opacity: 1;
|
||||
}
|
||||
.Slider {
|
||||
margin-top: 20px;
|
||||
width: 60%;
|
||||
margin-left: 20%;
|
||||
}
|
||||
#Content #StartButton {
|
||||
margin-bottom: 10px;
|
||||
width: 60%;
|
||||
margin-left: 20%;
|
||||
}
|
||||
#Content #StartButton .Checkbox{
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -301,4 +301,12 @@
|
|||
|
||||
.DropDown {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
/* CHECKBOX */
|
||||
|
||||
.Checkbox.pressed {
|
||||
border: 1px solid black;
|
||||
background: white!important;
|
||||
color: black;
|
||||
}
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
<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>
|
||||
Loading…
Reference in a new issue