Mirrors/Tone.js
2
0
Fork 0
mirror of https://github.com/Tonejs/Tone.js synced 2024-12-27 03:53:07 +00:00
Code Issues Projects Releases Packages Wiki Activity

pingpongdelay example

Browse source
This commit is contained in:
Yotam Mann 2015-02-13 16:24:52 -05:00
parent b224499df3
commit eba3312675
2 changed files with 51 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
examples/pingPongDelay.html
View file

@ -7,62 +7,61 @@
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<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="../build/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">
<script type="text/javascript" src="./deps/nexusUI.js"></script>
<script type="text/javascript" src="./deps/prism.js"></script>
<script type="text/javascript" src="./scripts/Interface.js"></script>
<link rel="stylesheet" type="text/css" href="./style/examples.css">
<link rel="stylesheet" type="text/css" href="./style/prism.css">
<script type="text/javascript">
// jshint ignore: start
</script>
</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>
<style type="text/css">
[nx="button"]{
margin: auto;
position: relative;
display: block;
}
</style>
<div id="Explanation">
Ping Pong Delay
<br>
<br>
A Ping Pong Delay is a stereo feedback delay where the delay bounces back and forth between the left and right channels. Hit the button to trigger a snare sample into the effect.
</div>
<div id="Content">
<div id="LoadingBar"></div>
<div id="Rack"></div>
<div id="Code"></div>
</div>
<script id="ToneCode" type="text/javascript">
//the feedback delay
var feedbackDelay = new Tone.PingPongDelay({
"delayTime" : "8n",
"feedback" : 0.6,
"wet" : 0.5
}).toMaster();
//play a snare sound through it
var player = new Tone.Player("./audio/505/snare.mp3")
.connect(feedbackDelay);
</script>
<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.TopBar(Tone);
new GUI.Momentary($("#Content"), function(on){
Interface.Loading("LoadingBar");
Interface.Rack("Rack", "PingPongDelay");
Interface.Momentary("Rack", function(on){
if (on){
player.start();
}
}, "hit", "hit");
});
Interface.Slider("Rack", feedbackDelay, "feedback", 0, 0.95);
Interface.Slider("Rack", feedbackDelay, "delayTime", 0.1, 0.5);
Interface.Code("Code", "ToneCode");
</script>
<style type="text/css">
#Content {
width: 100px;
height: 50px;
}
.Momentary {
width: 100%;
}
</style>
</body>
</html>

12
examples/style/examples.css
View file

@ -18,7 +18,7 @@ body {
#Explanation {
font-family: monospace;
background-color: #EAEAEA;
background-color: #D0D0D0;
padding: 10px;
color: black;
font-size: 14px;
@ -126,8 +126,8 @@ body {
#Content .Rack {
width: 100%;
margin-bottom: 10px;
background-color: #EAEAEA;
border: 10px solid #EAEAEA;
background-color: #D0D0D0;
border: 10px solid #D0D0D0;
position: relative; }
#Content .Rack .Title {
width: 100%;
@ -159,7 +159,7 @@ body {
font-size: 14px;
/*padding: $Margin;*/
/*line-height: ;*/
background-color: #EAEAEA; }
background-color: #F2F2F2; }
#Content .Envelope {
display: inline-block; }
#Content .Envelope canvas {
@ -188,7 +188,7 @@ body {
#Content .LoadingBar #Loader {
height: 100%;
width: 0%;
background-color: #EAEAEA;
background-color: #D0D0D0;
transition: width 0.2s; }
#Content .Meter {
width: 100%;
@ -218,7 +218,7 @@ body {
#Content .Meter #Units {
right: 10px;
text-align: right;
color: #EAEAEA; }
color: #D0D0D0; }
#Content .DropDown {
position: relative;
width: 100%;