Mirrors/Tone.js
2
0
Fork 0
mirror of https://github.com/Tonejs/Tone.js synced 2025-01-13 20:39:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

fixed noise. more examples

Browse source
This commit is contained in:
Yotam Mann 2014-03-14 23:17:18 -04:00
parent 0886ea9221
commit a7435e6348
9 changed files with 223 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
examples/envelope.html Normal file
View file

@ -0,0 +1,88 @@
<html>
<head>
<title>Ping Pong Delay</title>
<link rel="stylesheet" type="text/css" href="../style/GUI.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="../src/core/AudioUnit.js"></script>
<script type="text/javascript" src="../src/components/Meter.js"></script>
<script type="text/javascript" src="../src/components/Player.js"></script>
<script type="text/javascript" src="../src/components/Envelope.js"></script>
<script type="text/javascript" src="../src/components/LFO.js"></script>
<script type="text/javascript" src="../src/components/Noise.js"></script>
<script type="text/javascript" src="../src/components/StereoSplit.js"></script>
<script type="text/javascript" src="../src/effects/Effect.js"></script>
<script type="text/javascript" src="../src/effects/FeedbackDelay.js"></script>
<script type="text/javascript" src="../src/effects/PingPongDelay.js"></script>
<script type="text/javascript" src="../src/components/Microphone.js"></script>
<script type="text/javascript" src="../src/GUI/GUI.js"></script>
<script type="text/javascript" src="../src/GUI/GUI.Bar.js"></script>
<script type="text/javascript" src="../src/GUI/GUI.Meter.js"></script>
<script type="text/javascript" src="../src/GUI/GUI.Fader.js"></script>
<script type="text/javascript" src="../src/GUI/GUI.ParamFader.js"></script>
<script type="text/javascript" src="../src/GUI/GUI.GainFader.js"></script>
<script type="text/javascript" src="../src/GUI/GUI.Compressor.js"></script>
</head>
<body>
<style type="text/css">
#meter {
width: auto;
text-align: center;
float: right;
position: absolute;
bottom: 10px;
right: 10px;
}
#fader {
position: absolute;
bottom: 10px;
right: 100px;
width: auto;
}
#MasterOut {
width: 160px;
height: 200px;
position: absolute;
bottom: 10px;
right: 0px;
}
#Trigger {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
background-color: blue;
color: white;
}
</style>
<div id='Trigger'>Press</div>
<div id='MasterOut'>
<div id='meter'></div>
<div id='fader'></div>
</div>
<script type="text/javascript">
var meter = new AudioUnit.Meter(2);
var env = new AudioUnit.Envelope(.05, .01, 0, 0);
var noise = new AudioUnit.Noise();
var fader = new AudioUnit.GUI.GainFader($("#MasterOut"), AudioUnit.Master.output, "mstr");
var meterGui = new AudioUnit.GUI.Meter($("#MasterOut"), meter, "master", 20);
noise.connect(env);
env.toMaster();
AudioUnit.Master.connect(meter);
$("#Trigger").bind("mousedown touchstart", function(e){
env.triggerAttack();
});
$("#Trigger").bind("mouseup touchend", function(e){
env.triggerRelease();
});
</script>
</body>
</html>

54
examples/lfo.html Normal file
View file

@ -0,0 +1,54 @@
<html>
<head>
<title>Ping Pong Delay</title>
<link rel="stylesheet" type="text/css" href="../style/GUI.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="../src/core/AudioUnit.js"></script>
<script type="text/javascript" src="../src/components/Meter.js"></script>
<script type="text/javascript" src="../src/components/Player.js"></script>
<script type="text/javascript" src="../src/components/Envelope.js"></script>
<script type="text/javascript" src="../src/components/LFO.js"></script>
<script type="text/javascript" src="../src/components/Noise.js"></script>
<script type="text/javascript" src="../src/components/StereoSplit.js"></script>
<script type="text/javascript" src="../src/effects/Effect.js"></script>
<script type="text/javascript" src="../src/effects/FeedbackDelay.js"></script>
<script type="text/javascript" src="../src/effects/PingPongDelay.js"></script>
<script type="text/javascript" src="../src/components/Microphone.js"></script>
<script type="text/javascript" src="../src/GUI/GUI.js"></script>
<script type="text/javascript" src="../src/GUI/GUI.Bar.js"></script>
<script type="text/javascript" src="../src/GUI/GUI.Meter.js"></script>
<script type="text/javascript" src="../src/GUI/GUI.Fader.js"></script>
<script type="text/javascript" src="../src/GUI/GUI.ParamFader.js"></script>
<script type="text/javascript" src="../src/GUI/GUI.GainFader.js"></script>
<script type="text/javascript" src="../src/GUI/GUI.Compressor.js"></script>
</head>
<body>
<style type="text/css">
#MasterOut {
width: 160px;
height: 200px;
position: absolute;
bottom: 10px;
right: 0px;
}
</style>
<div id='MasterOut'>
<div id='meter'></div>
<div id='fader'></div>
</div>
<script type="text/javascript">
var meter = new AudioUnit.Meter(2);
var lfo = new AudioUnit.LFO(undefined, 1, 0, 1);
var noise = new AudioUnit.Noise("brown");
var fader = new AudioUnit.GUI.GainFader($("#MasterOut"), AudioUnit.Master.output, "mstr");
var meterGui = new AudioUnit.GUI.Meter($("#MasterOut"), meter, "master", 20);
noise.connect(lfo);
lfo.toMaster();
//the master output meter
AudioUnit.Master.connect(meter);
</script>
</body>
</html>

15
examples/pingPongDelay.html
View file

@ -66,10 +66,8 @@
<div id='fader'></div>
</div>
<script type="text/javascript">
var player = new AudioUnit.Player("../audio/A3.mp3");
var meter = new AudioUnit.Meter(2);
var env = new AudioUnit.Envelope(.05, .01, 0, 0);
var lfo = new AudioUnit.LFO(undefined, 1, .5, 1);
var noise = new AudioUnit.Noise();
var feedbackDelay = new AudioUnit.PingPongDelay(.25);
var meterGui = new AudioUnit.GUI.Meter($("#meter"), meter, "master", 20);
@ -84,19 +82,6 @@
//the master output meter
AudioUnit.Master.connect(meter);
player.load(function(){
// player.loop(0, 0, 1);
player.loop();
});
document.addEventListener('touchstart', function(e){
env.triggerAttack();
});
document.addEventListener('touchend', function(e){
env.triggerRelease();
});
$("#Trigger").bind("mousedown touchstart", function(e){
env.triggerAttack();
});

73
examples/player.html Normal file
View file

@ -0,0 +1,73 @@
<html>
<head>
<title>Basic Player</title>
<link rel="stylesheet" type="text/css" href="../style/GUI.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="../src/core/AudioUnit.js"></script>
<script type="text/javascript" src="../src/components/Meter.js"></script>
<script type="text/javascript" src="../src/components/Player.js"></script>
<script type="text/javascript" src="../src/GUI/GUI.js"></script>
<script type="text/javascript" src="../src/GUI/GUI.Bar.js"></script>
<script type="text/javascript" src="../src/GUI/GUI.Meter.js"></script>
<script type="text/javascript" src="../src/GUI/GUI.Fader.js"></script>
<script type="text/javascript" src="../src/GUI/GUI.ParamFader.js"></script>
<script type="text/javascript" src="../src/GUI/GUI.GainFader.js"></script>
</head>
<body>
<style type="text/css">
#meter {
width: auto;
text-align: center;
float: right;
position: absolute;
bottom: 10px;
right: 10px;
}
#fader {
position: absolute;
bottom: 10px;
right: 100px;
width: auto;
}
#Trigger {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
background-color: blue;
color: white;
text-align: center;
line-height: 100px;
}
</style>
<div id='Trigger'>Press</div>
<div id='MasterOut'>
<div id='meter'></div>
<div id='fader'></div>
</div>
<script type="text/javascript">
var player = new AudioUnit.Player("../audio/casio/A1.mp3");
var meter = new AudioUnit.Meter(2);
var fader = new AudioUnit.GUI.GainFader($("#MasterOut"), AudioUnit.Master.output, "mstr");
var meterGui = new AudioUnit.GUI.Meter($("#MasterOut"), meter, "master", 20);
player.toMaster();
//the master output meter
AudioUnit.Master.connect(meter);
player.load(function(){
$("#Trigger").bind("mousedown touchstart", function(e){
player.start();
});
$("#Trigger").bind("mouseup touchend", function(e){
player.stop();
});
});
</script>
</body>
</html>

57
index.html
View file

@ -1,57 +0,0 @@
<html>
<head>
<title>Web Audio</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./src/core/WebAudio.js"></script>
<script type="text/javascript" src="./src/core/Unit.js"></script>
<script type="text/javascript" src="./src/components/Player.js"></script>
<script type="text/javascript" src="./src/components/Meter.js"></script>
<script type="text/javascript" src="./src/components/Envelope.js"></script>
<script type="text/javascript" src="./src/components/LFO.js"></script>
<script type="text/javascript" src="./src/components/Noise.js"></script>
<script type="text/javascript" src="./src/components/StereoSplit.js"></script>
<script type="text/javascript" src="./src/effects/Effect.js"></script>
<script type="text/javascript" src="./src/effects/FeedbackDelay.js"></script>
<script type="text/javascript" src="./src/effects/PingPongDelay.js"></script>
</head>
<body>
<div id='meter'></div>
<script type="text/javascript">
var player = new WebAudio.Player("./audio/A3.mp3");
var meter = new WebAudio.Meter(2);
var env = new WebAudio.Envelope(.01, .05, 0, 0);
var lfo = new WebAudio.LFO(undefined, 1, .5, 1);
var noise = new WebAudio.Noise();
var feedbackDelay = new WebAudio.PingPongDelay(.25);
noise.connect(env);
env.connect(feedbackDelay);
feedbackDelay.setFeedback(.5);
// lfo.connect(feedbackDelay);
// env.connect(WebAudio.output);
feedbackDelay.connect(meter);
feedbackDelay.connect(WebAudio.output);
noise.setVolume(.4);
player.load(function(){
// player.loop(0, 0, 1);
player.loop();
});
setInterval(function(){
var text = meter.getVolume(0).toFixed(3);
text += " "+meter.getVolume(1).toFixed(3)
$("#meter").html(text);
}, 100);
$(document).keydown(function(e){
if (e.which == 69){
env.triggerAttack();
} else if (e.which == 83) {
env.triggerRelease();
}
});
</script>
</body>
</html>

4
src/components/Noise.js
View file

@ -43,8 +43,8 @@ AudioUnit.Noise.prototype.setType = function(type){
AudioUnit.Noise.prototype._pinkNoise = (function() {
var b0, b1, b2, b3, b4, b5, b6;
b0 = b1 = b2 = b3 = b4 = b5 = b6 = 0.0;
var bufferSize = this.bufferSize;
return function(e) {
var bufferSize = this.bufferSize;
var output = e.outputBuffer.getChannelData(0);
for (var i = 0; i < bufferSize; i++) {
var white = Math.random() * 2 - 1;
@ -64,8 +64,8 @@ AudioUnit.Noise.prototype._pinkNoise = (function() {
//modified from http://noisehack.com/generate-noise-web-audio-api/
AudioUnit.Noise.prototype._brownNoise = (function() {
var lastOut = 0.0;
var bufferSize = this.bufferSize;
return function(e) {
var bufferSize = this.bufferSize;
var output = e.outputBuffer.getChannelData(0);
for (var i = 0; i < bufferSize; i++) {
var white = Math.random() * 2 - 1;

BIN
style/.sass-cache/94addee548438c16ebb6101835ce44ecde2da331/GUI.scssc
View file

Binary file not shown.

3
style/GUI.css
View file

@ -29,6 +29,9 @@
METER
=============================================================================*/
.meter {
position: relative;
float: left;
margin: 5px;
display: table;
border: 1px solid black;
border-radius: 3px; }

3
style/GUI.scss
View file

@ -56,6 +56,9 @@ $unitWidth : 30px;
=============================================================================*/
.meter {
position: relative;
float: left;
margin: 5px;
display: table;
@include borderStyle;
}