-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Deploying to gh-pages from @ 1fef701 🚀
- Loading branch information
1 parent
a9b4e88
commit 857be49
Showing
53 changed files
with
76 additions
and
0 deletions.
There are no files selected for viewing
Binary file not shown.
Binary file added
BIN
+3.52 MB
preview/560/audio/Ada_Lovelace_(As_Told_By_U.S._Chief_Technology_Officer_Megan_Smith).mp3
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Delay-Based Audio Effects</title> <style>body{font-family:sans-serif;font-size:16px;padding:0;margin:0}h1{font-size:24px}div#header{background-color:#a50034;color:#fff;margin:0;padding:15px;height:19px}div#header a{color:inherit;text-decoration:none}div#header img#logo{margin:-13px 0;position:absolute;right:0}div#content{margin-left:auto;margin-right:auto;width:500px;padding:10px;border-left:solid 1px #bab4af;border-right:solid 1px #bab4af}div.paramentrybox{border:solid 1px #bab4af;background-color:#dddad7;height:21px;padding:5px;margin-bottom:5px;display:grid;grid-template-columns:31px 309px 150px;width:490px}div.paramentrybox.with-slider{grid-template-columns:31px 100px 259px 100px}div.paramentrybox select{border:none;background-color:inherit;font-size:inherit;outline-color:#a50034;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAN0lEQVQ4y2NgGAWDFzCi8f+To5cRi+R/Ui1nxKHoPwmux2kILoMYGYgVxGEQIyWB/380/Q0QAAAycwYFwghIbQAAAABJRU5ErkJggg==);background-repeat:no-repeat;background-position:right;appearance:none;-webkit-appearance:none;-moz-appearance:none}div.paramentrybox select:hover{background-color:#bab4af}div.paramentrybox input[type=checkbox]{outline-color:#a50034;height:19px;width:19px;margin:1px;border:solid 1px #000;appearance:none;-webkit-appearance:none;-moz-appearance:none}div.paramentrybox input[type=checkbox]:checked{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAZUlEQVQ4y2NgGAUMDAwMSxlM/sPYjJQaEM1whpGREgPIcgk2A6IZzjAy4VNAjAFwl6D7kRQDGBgYGBgJKSAkj9UlyAqJMQAlYAmFCS4DMGIHn0G4DMAaxcR6gWA6IRRbFCUsmgIAxm4ubQ4ML3YAAAAASUVORK5CYII=)}div.paramentrybox input[type=checkbox]:hover{background-color:#bab4af}div.paramentrybox.with-slider input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(transparent,transparent 8px,#8c8279 8px,#8c8279 13px,transparent 13px)}div.tabs{padding:0 10px;margin:0 -10px;border-bottom:1px solid #bab4af}div.tabs>input{display:none}div.tabs>label{display:inline-block;margin:0 0 -1px;padding:10px 15px;text-align:center;border:1px solid transparent}div.tabs>label:hover{cursor:default}div.tabs>input:checked+label{border:1px solid #bab4af;border-top:2px solid #a50034;border-bottom:1px solid #fff}div.tabs>input:hover+label{border:1px solid #bab4af;border-top-width:2px}div.tabs>input:checked:hover+label{border-top:2px solid #a50034;border-bottom:1px solid #fff}input[type=button]{border:solid 1px #bab4af;background-color:#dddad7;outline-color:#a50034;vertical-align:top;height:21px;padding:5px;font-size:inherit;box-sizing:content-box}input[type=button]:hover{background-color:#bab4af}input[type=button]:disabled{color:#8c8279}input[type=button]:active{outline-width:2px;outline-style:auto}input[type=button]#play{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAT0lEQVQ4y63U2w0AIAwCQOj+O+MAPpHyWZNLtY3AHMFMberqQCyoLufqQJ6geuxYHcgRKnOa6kCW0A/CFGF6HaYPy3TETJeN6doTQez/ZACu/gocOUr/aAAAAABJRU5ErkJggg==);background-repeat:no-repeat;background-position:center;width:21px}input[type=button]#play:disabled{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAZUlEQVQ4y63UOw7AIAwDUOMzd+nSgaVL79zuKB9bxSOJHkJBAZY883xhhtGhCzErOBCrogqxa1AgKjd1ENV3VxCdKWQQ3T8RQTZyXPf4hUSAhWSAjFSAhHRAiyhAiagAdqwBAPgAtC8jsWfuly4AAAAASUVORK5CYII=)}input[type=button]#stop{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAIUlEQVQ4y2NgoAJghNL/KTGDiRouGTVk1JBRQwbQEKoAAJELAR5uD40zAAAAAElFTkSuQmCC);background-repeat:no-repeat;background-position:center;width:21px}input[type=button]#stop:disabled{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAK0lEQVQ4y2NgoAJgZGBgYOhpqvxPrgElde2MTNRwyagho4aMGjKAhlAFAAAXcgQeRPSW5AAAAABJRU5ErkJggg==)}.select{position:relative;display:inline-block;white-space:nowrap;height:30px}.select>div:nth-child(1){display:inline-block;border:solid 1px #bab4af;background-color:#dddad7;padding-right:26px;cursor:default;overflow-x:hidden;height:19px;padding:6px}.select>div:nth-child(1):hover{background-color:#bab4af}.select>div:nth-child(1):after{content:"";position:absolute;top:13px;right:8px;border:6px solid transparent;border-color:#000 transparent transparent transparent}.select>div:nth-child(2){position:absolute;top:100%;left:0;right:0;z-index:99;background-color:#dddad7;border:solid 1px #bab4af;visibility:hidden}.select>div:nth-child(2) div.selected{background-color:#e4b3c2}.select>div:nth-child(2) div.selected:hover{background-color:#c96685}.select>div:nth-child(2)>div.optgroup{font-weight:700}.select>div:nth-child(2)>div.optgroup>div{font-weight:400;padding-left:1.5em;overflow-x:hidden}.select>div:nth-child(2)>div.optgroup>div:hover{background-color:#bab4af}.select>div:nth-child(2)>div.optgroup>div.selected:hover{background-color:#c96685}</style> <script type="module" src="delays.js"></script> </head> <body> <div id="header"> <a href="index.html"><img src="images/home.png" style="margin: -5px 5px -5px 0;"> jsdafx – Digital Audio Effects in JavaScript</a> <a href="https://www.hsu-hh.de/ant"><img src="images/ant_logo.png" id="logo"></a> </div> <div id="content"> <h1>Delay-Based Audio Effects</h1> <div style="white-space: nowrap"> <span class="select" id="source-select"> <div style="width: 410px;"></div> <div> <div class="optgroup"> Predefined </div> <div class="optgroup"> Local files <div style="font-style: italic;">Browse...</div> </div> </div> </span> <input type="button" id="play" disabled="true"> <input type="button" id="stop" disabled="true"> </div> <div style="width: 500px; height: 33px"> <canvas id="timelinecanvas" width="500" height="33"></canvas> </div> <div style="margin-top: 10px;" class="tabs"> <input id="spectrum" type="radio" name="tabs"> <label for="spectrum">Spectrum</label> <input id="waveform" type="radio" name="tabs" checked="checked"> <label for="waveform">Waveform</label> </div> <div id="graph" style="width: 500px; height: 200px; padding-top: 10px"> <canvas id="funccanvas" width="500" height="200"></canvas> </div> <div style="width: 500px; padding-bottom: 10px; text-align: right"> <input id="linear" type="checkbox"><label for="linear">linear</label> </div> <div style="width: 500px; padding: 10px;" align="center"> <img src="images/delays/tremolo1.png" id="diagram"> </div> <div class="paramentrybox"> <input id="bypass" type="checkbox"><label for="bypass">Bypass</label> <select id="effecttype"> <option value="tremolo">Tremolo</option> <option value="vibrato">Vibrato</option> <option value="chorus">Chorus</option> <option value="flanger">Flanger</option> </select> </div> <div class="paramentrybox with-slider"> <span></span> <span>Mod. Freq.</span> <input type="range" id="modulationfrequency" min="0.1" max="20" step="0.1"> <label for="modulationfrequency">1 Hz</label> </div> <div class="paramentrybox with-slider"> <span></span> <span>Mod. Depth</span> <input type="range" id="modulationdepth" min="0" max="1" step="0.01"> <label for="modulationdepth">1</label> </div> <p> This script demonstrates audio effects resulting from delay-based algorithms. It is designed for a first insight into the perceptual experience of one amplitude-modulation and three delay-based audio effects: tremolo, vibrato, chorus, and flanger. </p> <p> <b>Tremolo</b> is the rapid repetition of one note in music terminology or a rapid alternation between two or more notes (string instruments, mandolin, flute, piano, harpsichord, spinet, guitar). In technical terminology tremolo is a rapid repetitive increase and decrease in volume. The effect is based on modifying the time domain envelope (amplitude) of a signal. </p> <p> <b>Vibrato</b> is the rapid and repetitive variation in pitch for the duration of a note (string instruments, guitar, singing voice, yodeling). In technical terminology the effect is based on modifying the pitch of a signal by delay line modulation (phase modulation). </p> <p> <b>Chorus</b> simulates the result of an ensemble of musicians (singers, violins) playing together with slight pitch and amplitude differences. The chorus effect performs a loudness increase. These amplitude and pitch differences are simulated by amplitude modulation and delay line modulation (phase modulation) and all signals are summed together to form the output signal. </p> <p> A <b>flanger</b> simulates a special filter effect wich occurs if a slowly time-varying single reflection is added to the direct signal (jet airplane effect). This effect was achieved by playing two copies of a single signal from two tape machines while slowing down the replay speed of one tape machine by placing a finger to the flange of one tape reel. </p> <p> You can choose between two predefined audio signals or your own local audio file to be processed. </p> <p> Predefined music signals "Guitar riff 1" and "Guitar riff 2" are licensed under <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0-1.0</a>. </p> </div> </body> </html> |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Oops, something went wrong.