mirror of
https://github.com/Tonejs/Tone.js
synced 2024-12-27 03:53:07 +00:00
mic example
This commit is contained in:
parent
c48f3d392a
commit
9e4075b90e
12 changed files with 167 additions and 53 deletions
|
@ -1,6 +1,6 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Ping Pong Delay</title>
|
<title>Envelope</title>
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="../style/GUI.css">
|
<link rel="stylesheet" type="text/css" href="../style/GUI.css">
|
||||||
|
|
||||||
|
@ -44,16 +44,16 @@
|
||||||
</style>
|
</style>
|
||||||
<div id='Trigger'></div>
|
<div id='Trigger'></div>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var env = new AudioUnit.Envelope(.05, .01, .1, .4);
|
var env = new AudioUnit.Envelope(.05, .01, .7, .4);
|
||||||
var noise = new AudioUnit.Noise();
|
var noise = new AudioUnit.Noise();
|
||||||
|
|
||||||
noise.connect(env);
|
noise.connect(env);
|
||||||
env.toMaster();
|
env.toMaster();
|
||||||
|
|
||||||
$("#Trigger").bind("mousedown touchstart", function(e){
|
$("#Trigger").bind("mousedown", function(e){
|
||||||
env.triggerAttack();
|
env.triggerAttack();
|
||||||
});
|
});
|
||||||
$("#Trigger").bind("mouseup touchend", function(e){
|
$("#Trigger").bind("mouseup", function(e){
|
||||||
env.triggerRelease();
|
env.triggerRelease();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -11,8 +11,8 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var lfo = new AudioUnit.LFO(undefined, 1, 0, 1);
|
|
||||||
var noise = new AudioUnit.Noise("brown");
|
var noise = new AudioUnit.Noise("brown");
|
||||||
|
var lfo = new AudioUnit.LFO(1);
|
||||||
|
|
||||||
noise.connect(lfo);
|
noise.connect(lfo);
|
||||||
lfo.toMaster();
|
lfo.toMaster();
|
||||||
|
|
101
examples/microphone.html
Normal file
101
examples/microphone.html
Normal file
|
@ -0,0 +1,101 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Mic to 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/Envelope.js"></script>
|
||||||
|
<script type="text/javascript" src="../src/components/Noise.js"></script>
|
||||||
|
<script type="text/javascript" src="../src/components/Microphone.js"></script>
|
||||||
|
<script type="text/javascript" src="../src/effects/Effect.js"></script>
|
||||||
|
<script type="text/javascript" src="../src/effects/FeedbackEffect.js"></script>
|
||||||
|
<script type="text/javascript" src="../src/effects/FeedbackDelay.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
#MasterOut {
|
||||||
|
width: 160px;
|
||||||
|
height: 200px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#Trigger {
|
||||||
|
margin-left: -50px;
|
||||||
|
margin-top: -50px;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#Trigger:after {
|
||||||
|
font-family: monospace;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
content: "start mic";
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#Trigger:active {
|
||||||
|
background-color: white;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<div id='Trigger'></div>
|
||||||
|
<div id='MasterOut'></div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var meter = new AudioUnit.Meter(2);
|
||||||
|
var mic = new AudioUnit.Microphone();
|
||||||
|
var env = new AudioUnit.Envelope(.05, .01, 0, 0);
|
||||||
|
var feedbackDelay = new AudioUnit.FeedbackDelay(.25);
|
||||||
|
var fader = new AudioUnit.GUI.GainFader($("#MasterOut"), AudioUnit.Master.output, "mstr");
|
||||||
|
var meterGui = new AudioUnit.GUI.Meter($("#MasterOut"), meter, "master", 20);
|
||||||
|
|
||||||
|
mic.connect(feedbackDelay);
|
||||||
|
feedbackDelay.setWet(1);
|
||||||
|
feedbackDelay.setFeedback(.5);
|
||||||
|
feedbackDelay.toMaster();
|
||||||
|
|
||||||
|
//the master output meter
|
||||||
|
AudioUnit.Master.connect(meter);
|
||||||
|
|
||||||
|
$("#Trigger").bind("mousedown touchstart", function(e){
|
||||||
|
mic.start();
|
||||||
|
$("#Trigger").remove();
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -11,6 +11,7 @@
|
||||||
<script type="text/javascript" src="../src/components/Noise.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/components/StereoSplit.js"></script>
|
||||||
<script type="text/javascript" src="../src/effects/Effect.js"></script>
|
<script type="text/javascript" src="../src/effects/Effect.js"></script>
|
||||||
|
<script type="text/javascript" src="../src/effects/FeedbackEffect.js"></script>
|
||||||
<script type="text/javascript" src="../src/effects/FeedbackDelay.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/effects/PingPongDelay.js"></script>
|
||||||
<script type="text/javascript" src="../src/GUI/GUI.js"></script>
|
<script type="text/javascript" src="../src/GUI/GUI.js"></script>
|
||||||
|
|
|
@ -9,15 +9,20 @@ AudioUnit.Envelope = function(attack, decay, sustain, release, audioParam, minOu
|
||||||
//extend Unit
|
//extend Unit
|
||||||
AudioUnit.call(this);
|
AudioUnit.call(this);
|
||||||
|
|
||||||
|
//pass audio through
|
||||||
this.input.connect(this.output);
|
this.input.connect(this.output);
|
||||||
|
|
||||||
|
//set the parameters
|
||||||
this.param = this.defaultArg(audioParam, this.input.gain);
|
this.param = this.defaultArg(audioParam, this.input.gain);
|
||||||
this.attack = this.defaultArg(attack, .01);
|
this.attack = this.defaultArg(attack, .01);
|
||||||
this.decay = this.defaultArg(decay, .1);
|
this.decay = this.defaultArg(decay, .1);
|
||||||
this.release = this.defaultArg(release, 1);
|
this.release = this.defaultArg(release, 1);
|
||||||
this.sustain = this.defaultArg(sustain, .5);
|
// this.sustain = this.defaultArg(this.gainToPowScale(sustain), .1);
|
||||||
|
this.setSustain(this.defaultArg(sustain, .1));
|
||||||
this.min = this.defaultArg(minOutput, 0);
|
this.min = this.defaultArg(minOutput, 0);
|
||||||
this.max = this.defaultArg(maxOutput, 1);
|
this.max = this.defaultArg(maxOutput, 1);
|
||||||
//set the initial
|
|
||||||
|
//set the initial value
|
||||||
this.param.value = this.min;
|
this.param.value = this.min;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -37,7 +42,7 @@ AudioUnit.Envelope.prototype.triggerAttack = function(time){
|
||||||
this.param.linearRampToValueAtTime(sustainVal, time + this.decay + this.attack);
|
this.param.linearRampToValueAtTime(sustainVal, time + this.decay + this.attack);
|
||||||
}
|
}
|
||||||
|
|
||||||
//triggers the release portiion of the envelope
|
//triggers the release of the envelope
|
||||||
AudioUnit.Envelope.prototype.triggerRelease = function(time){
|
AudioUnit.Envelope.prototype.triggerRelease = function(time){
|
||||||
var startVal = this.param.value;
|
var startVal = this.param.value;
|
||||||
if (time){
|
if (time){
|
||||||
|
@ -54,32 +59,32 @@ AudioUnit.Envelope.prototype.triggerRelease = function(time){
|
||||||
///////////////////////////////////////////////////////////////////////////////
|
///////////////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
//@param {number} attack (seconds)
|
//@param {number} attack (seconds)
|
||||||
AudioUnit.Envelope.setAttack = function(attack){
|
AudioUnit.Envelope.prototype.setAttack = function(attack){
|
||||||
this.attack = attack;
|
this.attack = attack;
|
||||||
}
|
}
|
||||||
|
|
||||||
//@param {number} decay (seconds)
|
//@param {number} decay (seconds)
|
||||||
AudioUnit.Envelope.setDecay = function(decay){
|
AudioUnit.Envelope.prototype.setDecay = function(decay){
|
||||||
this.decay = decay;
|
this.decay = decay;
|
||||||
}
|
}
|
||||||
|
|
||||||
//@param {number} release (seconds)
|
//@param {number} release (seconds)
|
||||||
AudioUnit.Envelope.setRelease = function(release){
|
AudioUnit.Envelope.prototype.setRelease = function(release){
|
||||||
this.release = release;
|
this.release = release;
|
||||||
}
|
}
|
||||||
|
|
||||||
//@param {number} sustain (gain)
|
//@param {number} sustain as a percentage (0-1);
|
||||||
AudioUnit.Envelope.setSustain = function(sustain){
|
AudioUnit.Envelope.prototype.setSustain = function(sustain){
|
||||||
this.sustain = sustain;
|
this.sustain = this.gainToPowScale(sustain);
|
||||||
}
|
}
|
||||||
|
|
||||||
//@param {number} min
|
//@param {number} min
|
||||||
AudioUnit.Envelope.setMin = function(min){
|
AudioUnit.Envelope.prototype.setMin = function(min){
|
||||||
this.min = min;
|
this.min = min;
|
||||||
}
|
}
|
||||||
|
|
||||||
//@param {number} max
|
//@param {number} max
|
||||||
AudioUnit.Envelope.setMax = function(max){
|
AudioUnit.Envelope.prototype.setMax = function(max){
|
||||||
this.max = max;
|
this.max = max;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
//
|
//
|
||||||
///////////////////////////////////////////////////////////////////////////////
|
///////////////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
AudioUnit.LFO = function(param, rate, outputMin, outputMax){
|
AudioUnit.LFO = function(rate, outputMin, outputMax, param){
|
||||||
//extends Unit
|
//extends Unit
|
||||||
AudioUnit.call(this);
|
AudioUnit.call(this);
|
||||||
//pass audio through
|
//pass audio through
|
||||||
|
|
|
@ -18,7 +18,7 @@ AudioUnit.extend(AudioUnit.Player, AudioUnit);
|
||||||
|
|
||||||
//makes an xhr for the buffer at the url
|
//makes an xhr for the buffer at the url
|
||||||
//invokes the callback at the end
|
//invokes the callback at the end
|
||||||
//@param {function(AudioUnit.Player)=} callback
|
//@param {function(AudioUnit.Player)} callback
|
||||||
AudioUnit.Player.prototype.load = function(callback){
|
AudioUnit.Player.prototype.load = function(callback){
|
||||||
var request = new XMLHttpRequest();
|
var request = new XMLHttpRequest();
|
||||||
request.open('GET', this.url, true);
|
request.open('GET', this.url, true);
|
||||||
|
@ -26,13 +26,14 @@ AudioUnit.Player.prototype.load = function(callback){
|
||||||
// decode asynchronously
|
// decode asynchronously
|
||||||
var self = this;
|
var self = this;
|
||||||
request.onload = function() {
|
request.onload = function() {
|
||||||
self.context.decodeAudioData(request.response, function(b) {
|
self.context.decodeAudioData(request.response, function(buff) {
|
||||||
self.buffer = b;
|
self.buffer = buff;
|
||||||
if (callback){
|
if (callback){
|
||||||
callback(self);
|
callback(self);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
//send the request
|
||||||
request.send();
|
request.send();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,11 +0,0 @@
|
||||||
///////////////////////////////////////////////////////////////////////////////
|
|
||||||
//
|
|
||||||
// PING PONG DELAY
|
|
||||||
//
|
|
||||||
///////////////////////////////////////////////////////////////////////////////
|
|
||||||
|
|
||||||
//@param {number=} delayTime
|
|
||||||
AudioUnit.StereoMeter = function(){
|
|
||||||
AudioUnit.StereoSplit.call(this);
|
|
||||||
|
|
||||||
}
|
|
|
@ -47,16 +47,16 @@
|
||||||
///////////////////////////////////////////////////////////////////////////
|
///////////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
var AudioUnit = function(){
|
var AudioUnit = function(){
|
||||||
this.context = audioContext;
|
|
||||||
this.input = audioContext.createGain();
|
this.input = audioContext.createGain();
|
||||||
this.output = audioContext.createGain();
|
this.output = audioContext.createGain();
|
||||||
}
|
}
|
||||||
|
|
||||||
///////////////////////////////////////////////////////////////////////////
|
///////////////////////////////////////////////////////////////////////////
|
||||||
// STATIC VARS
|
// CLASS VARS
|
||||||
///////////////////////////////////////////////////////////////////////////
|
///////////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
AudioUnit.prototype.fadeTime = .001; //1ms
|
AudioUnit.prototype.context = audioContext;
|
||||||
|
AudioUnit.prototype.fadeTime = .005; //5ms
|
||||||
AudioUnit.prototype.bufferSize = 1024; //default buffer size
|
AudioUnit.prototype.bufferSize = 1024; //default buffer size
|
||||||
|
|
||||||
///////////////////////////////////////////////////////////////////////////
|
///////////////////////////////////////////////////////////////////////////
|
||||||
|
@ -221,15 +221,14 @@
|
||||||
// STATIC METHODS
|
// STATIC METHODS
|
||||||
///////////////////////////////////////////////////////////////////////////
|
///////////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
//A extends B
|
|
||||||
//based on closure library 'inherit' function
|
//based on closure library 'inherit' function
|
||||||
AudioUnit.extend = function(childCtor, parentCtor){
|
AudioUnit.extend = function(child, parent){
|
||||||
/** @constructor */
|
/** @constructor */
|
||||||
function tempCtor() {};
|
function tempConstructor() {};
|
||||||
tempCtor.prototype = parentCtor.prototype;
|
tempConstructor.prototype = parent.prototype;
|
||||||
childCtor.prototype = new tempCtor();
|
child.prototype = new tempConstructor();
|
||||||
/** @override */
|
/** @override */
|
||||||
childCtor.prototype.constructor = childCtor;
|
child.prototype.constructor = child;
|
||||||
}
|
}
|
||||||
|
|
||||||
///////////////////////////////////////////////////////////////////////////
|
///////////////////////////////////////////////////////////////////////////
|
||||||
|
@ -243,7 +242,7 @@
|
||||||
//put a hard limiter on the output so we don't blow any eardrums
|
//put a hard limiter on the output so we don't blow any eardrums
|
||||||
this.limiter = this.context.createDynamicsCompressor();
|
this.limiter = this.context.createDynamicsCompressor();
|
||||||
this.limiter.threshold.value = 0;
|
this.limiter.threshold.value = 0;
|
||||||
this.limiter.ratio.value = 100;
|
this.limiter.ratio.value = 20;
|
||||||
this.chain(this.input, this.limiter, this.output, this.context.destination);
|
this.chain(this.input, this.limiter, this.output, this.context.destination);
|
||||||
}
|
}
|
||||||
AudioUnit.extend(Master, AudioUnit);
|
AudioUnit.extend(Master, AudioUnit);
|
||||||
|
|
|
@ -14,17 +14,13 @@ AudioUnit.Effect = function(){
|
||||||
this.dry = this.context.createGain();
|
this.dry = this.context.createGain();
|
||||||
this.effectSend = this.context.createGain();
|
this.effectSend = this.context.createGain();
|
||||||
this.effectReturn = this.context.createGain();
|
this.effectReturn = this.context.createGain();
|
||||||
this.feedback = this.context.createGain();
|
|
||||||
this.feedback.gain.value = 0;
|
|
||||||
|
|
||||||
//connections
|
//connections
|
||||||
this.input.connect(this.dry);
|
this.input.connect(this.dry);
|
||||||
this.dry.connect(this.output);
|
this.dry.connect(this.output);
|
||||||
this.input.connect(this.effectSend);
|
this.input.connect(this.effectSend);
|
||||||
this.effectReturn.connect(this.output);
|
this.effectReturn.connect(this.output);
|
||||||
//feedback loop
|
|
||||||
this.chain(this.effectReturn, this.feedback, this.effectSend);
|
|
||||||
|
|
||||||
//some initial values
|
//some initial values
|
||||||
this.setDry(.5);
|
this.setDry(.5);
|
||||||
}
|
}
|
||||||
|
@ -50,10 +46,6 @@ AudioUnit.Effect.prototype.bypass = function(){
|
||||||
this.setDry(1);
|
this.setDry(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
AudioUnit.Effect.prototype.setFeedback = function(fback){
|
|
||||||
this.rampToValue(this.feedback.gain, fback);
|
|
||||||
}
|
|
||||||
|
|
||||||
AudioUnit.Effect.prototype.connectEffect = function(effect){
|
AudioUnit.Effect.prototype.connectEffect = function(effect){
|
||||||
this.chain(this.effectSend, effect, this.effectReturn);
|
this.chain(this.effectSend, effect, this.effectReturn);
|
||||||
}
|
}
|
|
@ -6,7 +6,7 @@
|
||||||
|
|
||||||
//@param {number} delayTime
|
//@param {number} delayTime
|
||||||
AudioUnit.FeedbackDelay = function(delayTime){
|
AudioUnit.FeedbackDelay = function(delayTime){
|
||||||
AudioUnit.Effect.call(this);
|
AudioUnit.FeedbackEffect.call(this);
|
||||||
|
|
||||||
this.delay = this.context.createDelay(4);
|
this.delay = this.context.createDelay(4);
|
||||||
this.delay.delayTime.value = this.defaultArg(delayTime, .25);
|
this.delay.delayTime.value = this.defaultArg(delayTime, .25);
|
||||||
|
@ -15,7 +15,7 @@ AudioUnit.FeedbackDelay = function(delayTime){
|
||||||
this.connectEffect(this.delay);
|
this.connectEffect(this.delay);
|
||||||
}
|
}
|
||||||
|
|
||||||
AudioUnit.extend(AudioUnit.FeedbackDelay, AudioUnit.Effect);
|
AudioUnit.extend(AudioUnit.FeedbackDelay, AudioUnit.FeedbackEffect);
|
||||||
|
|
||||||
AudioUnit.FeedbackDelay.prototype.setDelayTime = function(delayTime){
|
AudioUnit.FeedbackDelay.prototype.setDelayTime = function(delayTime){
|
||||||
this.rampToValue(this.delay.delayTime, delayTime);
|
this.rampToValue(this.delay.delayTime, delayTime);
|
||||||
|
|
26
src/effects/FeedbackEffect.js
Normal file
26
src/effects/FeedbackEffect.js
Normal file
|
@ -0,0 +1,26 @@
|
||||||
|
///////////////////////////////////////////////////////////////////////////////
|
||||||
|
//
|
||||||
|
// FEEDBACK EFFECTS
|
||||||
|
//
|
||||||
|
// an effect with feedback
|
||||||
|
///////////////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
|
|
||||||
|
AudioUnit.FeedbackEffect = function(){
|
||||||
|
//extends Unit
|
||||||
|
AudioUnit.Effect.call(this);
|
||||||
|
|
||||||
|
this.feedback = this.context.createGain();
|
||||||
|
//feedback loop
|
||||||
|
this.chain(this.effectReturn, this.feedback, this.effectSend);
|
||||||
|
|
||||||
|
//some initial values
|
||||||
|
this.setDry(.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
AudioUnit.extend(AudioUnit.FeedbackEffect, AudioUnit.Effect);
|
||||||
|
|
||||||
|
|
||||||
|
AudioUnit.Effect.prototype.setFeedback = function(fback){
|
||||||
|
this.rampToValue(this.feedback.gain, fback);
|
||||||
|
}
|
Loading…
Reference in a new issue