Mirrors/Tone.js
2
0
Fork 0
mirror of https://github.com/Tonejs/Tone.js synced 2024-12-28 12:33:12 +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

79
examples/pingPongDelay.html
View file

@ -7,62 +7,61 @@
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <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.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="../build/Tone.js"></script>
<script type="text/javascript" src="./Widgets.js"></script> <script type="text/javascript" src="./deps/nexusUI.js"></script>
<script type="text/javascript" src="./ExampleList.js"></script> <script type="text/javascript" src="./deps/prism.js"></script>
<link rel="stylesheet" type="text/css" href="./style/widgets.css"> <script type="text/javascript" src="./scripts/Interface.js"></script>
<link rel="stylesheet" type="text/css" href="./style/jquery-ui.css">
<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> </head>
<body> <body>
<div id="Container"> <style type="text/css">
[nx="button"]{
margin: auto;
position: relative;
display: block;
}
</style>
<div id="Explanation"> <div id="Explanation">
Ping Pong Delay Ping Pong Delay
<br> <br>
<br> <br>
A Ping Pong Delay is a stereo feedback delay. The stereo effect is more easily heard with headphones. 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>
<div id="Content"> <div id="Content">
<div id="Loading">Loading...</div> <div id="LoadingBar"></div>
</div> <div id="Rack"></div>
<div id="Code"></div>
</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"> <script type="text/javascript">
/* globals Tone, GUI */ Interface.Loading("LoadingBar");
Interface.Rack("Rack", "PingPongDelay");
var player = new Tone.Player("./audio/505/snare.mp3", function(){ Interface.Momentary("Rack", function(on){
$("#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){
if (on){ if (on){
player.start(); 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> </script>
<style type="text/css">
#Content {
width: 100px;
height: 50px;
}
.Momentary {
width: 100%;
}
</style>
</body> </body>
</html> </html>

12
examples/style/examples.css
View file

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