<link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/frameworks-01ab74aec1f88b10018cfd6b44beeaffca2792e0fbe73b31f078adb893dbaa1e.css" integrity="sha256-Aat0rsH4ixABjP1rRL7q/8onkuD75zsx8HituJPbqh4=" media="all" rel="stylesheet" />
<link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/github-759321dd509144dfffcb902a16a35e42cba76e35751b9f1c4be637c6f365e086.css" integrity="sha256-dZMh3VCRRN//y5AqFqNeQsunbjV1G58cS+Y3xvNl4IY=" media="all" rel="stylesheet" />
<link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/site-2d5d1699983d8dd7c384c67dfc183fbace8e3a24866e8822069d599f68e71fb2.css" integrity="sha256-LV0WmZg9jdfDhMZ9/Bg/us6OOiSGbogiBp1Zn2jnH7I=" media="all" rel="stylesheet" />
<link as="script" href="https://assets-cdn.github.com/assets/frameworks-38adb611d3aab14710708eaa1ef92635ae5032d3f08e855bf66ad1997b092f2d.js" rel="preload" />
<link as="script" href="https://assets-cdn.github.com/assets/github-f83ae2f0d483dddc8f1894b3cc2709ff1db48511ddc8d054ed639c52c80d54c9.js" rel="preload" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Language" content="en">
<meta name="viewport" content="width=1020">
<title>audiosynth/README.md at master · keithwhor/audiosynth · GitHub</title>
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub">
<link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<meta property="fb:app_id" content="1401488693436528">
<meta content="https://avatars0.githubusercontent.com/u/3936867?v=3&s=400" name="twitter:image:src" /><meta content="@github" name="twitter:site" /><meta content="summary" name="twitter:card" /><meta content="keithwhor/audiosynth" name="twitter:title" /><meta content="audiosynth - JS Dynamic Audio Synth" name="twitter:description" />
<meta content="https://avatars0.githubusercontent.com/u/3936867?v=3&s=400" property="og:image" /><meta content="GitHub" property="og:site_name" /><meta content="object" property="og:type" /><meta content="keithwhor/audiosynth" property="og:title" /><meta content="https://github.com/keithwhor/audiosynth" property="og:url" /><meta content="audiosynth - JS Dynamic Audio Synth" property="og:description" />
<meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats">
<meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors">
<link rel="assets" href="https://assets-cdn.github.com/">
<meta name="pjax-timeout" content="1000">
<meta name="msapplication-TileImage" content="/windows-tile.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="selected-link" value="repo_source" data-pjax-transient>
<meta name="google-site-verification" content="KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU">
<meta name="hostname" content="github.com">
<meta name="user-login" content="">
<meta name="expected-hostname" content="github.com">
<meta name="js-proxy-site-detection-payload" content="NWE0ZmQ4NGI0ODI3NTdjZDFkMTQwMGU3MzY4ZmMwMDVmZGRkNDUzMTdlYTNhYmI4NjM0NjhjYWUzNTU3OTM2OXx7InJlbW90ZV9hZGRyZXNzIjoiMTIuMTY0LjE2OS4yNTAiLCJyZXF1ZXN0X2lkIjoiMENBNEE5RkE6NEQ1RjoyODZDMTVDODo1NzFBNkVFNSIsInRpbWVzdGFtcCI6MTQ2MTM1MDExN30=">
<link rel="mask-icon" href="https://assets-cdn.github.com/pinned-octocat.svg" color="#4078c0">
<link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">
<meta content="dcc686148c106d7272960c47ff36374661ecd9aa" name="form-nonce" />
<meta http-equiv="x-pjax-version" content="859a7a97898a0c58f8a37116dab07c69">
<link rel="canonical" href="https://github.com/keithwhor/audiosynth/blob/master/README.md" data-pjax-transient>
<header class="site-header js-details-container" role="banner">
<button class="btn-link right site-header-toggle js-details-target" type="button" aria-label="Toggle navigation">
<svg aria-hidden="true" class="octicon octicon-three-bars" height="24" version="1.1" viewBox="0 0 12 16" width="18"><path d="M11.41 9H0.59c-0.59 0-0.59-0.41-0.59-1s0-1 0.59-1h10.81c0.59 0 0.59 0.41 0.59 1s0 1-0.59 1z m0-4H0.59c-0.59 0-0.59-0.41-0.59-1s0-1 0.59-1h10.81c0.59 0 0.59 0.41 0.59 1s0 1-0.59 1zM0.59 11h10.81c0.59 0 0.59 0.41 0.59 1s0 1-0.59 1H0.59c-0.59 0-0.59-0.41-0.59-1s0-1 0.59-1z"></path></svg>
</button>
<div class="site-header-menu">
<nav class="site-header-nav site-header-nav-main">
<a href="/personal" class="js-selected-navigation-item nav-item nav-item-personal" data-ga-click="Header, click, Nav menu - item:personal" data-selected-links="/personal /personal">
Personal
<div class="site-header-actions">
<a class="btn btn-primary site-header-actions-btn" href="/join?source=header-repo" data-ga-click="(Logged out) Header, clicked Sign up, text:sign-up">Sign up</a>
<a class="btn site-header-actions-btn mr-2" href="/login?return_to=%2Fkeithwhor%2Faudiosynth%2Fblob%2Fmaster%2FREADME.md" data-ga-click="(Logged out) Header, clicked Sign in, text:sign-in">Sign in</a>
</div>
<nav class="site-header-nav site-header-nav-secondary">
<a class="nav-item" href="/pricing">Pricing</a>
<a class="nav-item" href="/blog">Blog</a>
<a class="nav-item" href="https://help.github.com">Support</a>
<a class="nav-item header-search-link" href="https://github.com/search">Search GitHub</a>
<div class="header-search scoped-search site-scoped-search js-site-search" role="search">
<label class="form-control header-search-wrapper js-chromeless-input-container">
<div class="header-search-scope">This repository</div>
<input type="text"
class="form-control header-search-input js-site-search-focus js-site-search-field is-clearable"
data-hotkey="s"
name="q"
placeholder="Search"
aria-label="Search this repository"
data-unscoped-placeholder="Search GitHub"
data-scoped-placeholder="Search"
tabindex="1"
autocapitalize="off">
</label>
</nav>
</div>
<div id="start-of-content" class="accessibility-aid"></div>
<div id="js-flash-container">
<div role="main" class="main-content">
<div itemscope itemtype="http://schema.org/SoftwareSourceCode">
<div id="js-repo-pjax-container" data-pjax-container>
- Watch 17
-
Star
<a class="social-count js-social-count" href="/keithwhor/audiosynth/stargazers"> 221 </a> -
Fork
<a href="/keithwhor/audiosynth/network" class="social-count"> 46 </a>
<h1 class="entry-title public ">
Code
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
<a href="/keithwhor/audiosynth/issues" class="js-selected-navigation-item reponav-item" data-hotkey="g i" data-selected-links="repo_issues repo_labels repo_milestones /keithwhor/audiosynth/issues" itemprop="url">
<svg aria-hidden="true" class="octicon octicon-issue-opened" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7S10.14 13.7 7 13.7 1.3 11.14 1.3 8s2.56-5.7 5.7-5.7m0-1.3C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7S10.86 1 7 1z m1 3H6v5h2V4z m0 6H6v2h2V10z"></path></svg>
<span itemprop="name">Issues</span>
<span class="counter">3</span>
<meta itemprop="position" content="2">
Pull requests 1 Pulse Graphs
Branch:
master
<div class="select-menu-modal">
<div class="select-menu-header">
<svg aria-label="Close" class="octicon octicon-x js-menu-close" height="16" role="img" version="1.1" viewBox="0 0 12 16" width="12"><path d="M7.48 8l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75-1.48-1.48 3.75-3.75L0.77 4.25l1.48-1.48 3.75 3.75 3.75-3.75 1.48 1.48-3.75 3.75z"></path></svg>
<span class="select-menu-title">Switch branches/tags</span>
</div>
<div class="select-menu-filters">
<div class="select-menu-text-filter">
<input type="text" aria-label="Filter branches/tags" id="context-commitish-filter-field" class="form-control js-filterable-field js-navigation-enable" placeholder="Filter branches/tags">
</div>
<div class="select-menu-tabs">
<ul>
<li class="select-menu-tab">
<a href="#" data-tab-filter="branches" data-filter-placeholder="Filter branches/tags" class="js-select-menu-tab" role="tab">Branches</a>
</li>
<li class="select-menu-tab">
<a href="#" data-tab-filter="tags" data-filter-placeholder="Find a tag…" class="js-select-menu-tab" role="tab">Tags</a>
</li>
</ul>
</div>
</div>
<div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-tab-filter="branches" role="menu">
<div data-filterable-for="context-commitish-filter-field" data-filterable-type="substring">
<a class="select-menu-item js-navigation-item js-navigation-open "
href="/keithwhor/audiosynth/blob/gh-pages/README.md"
data-name="gh-pages"
data-skip-pjax="true"
rel="nofollow">
<svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path d="M12 5L4 13 0 9l1.5-1.5 2.5 2.5 6.5-6.5 1.5 1.5z"></path></svg>
<span class="select-menu-item-text css-truncate-target js-select-menu-filter-text" title="gh-pages">
gh-pages
</span>
</a>
<a class="select-menu-item js-navigation-item js-navigation-open selected"
href="/keithwhor/audiosynth/blob/master/README.md"
data-name="master"
data-skip-pjax="true"
rel="nofollow">
<svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path d="M12 5L4 13 0 9l1.5-1.5 2.5 2.5 6.5-6.5 1.5 1.5z"></path></svg>
<span class="select-menu-item-text css-truncate-target js-select-menu-filter-text" title="master">
master
</span>
</a>
</div>
<div class="select-menu-no-results">Nothing to show</div>
</div>
<div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-tab-filter="tags">
<div data-filterable-for="context-commitish-filter-field" data-filterable-type="substring">
</div>
<div class="select-menu-no-results">Nothing to show</div>
</div>
</div>
Find file
Copy path
audiosynth/README.md
Fetching contributors…
Cannot retrieve contributors at this time
<div class="btn-group">
<a href="/keithwhor/audiosynth/raw/master/README.md" class="btn btn-sm " id="raw-url">Raw</a>
<a href="/keithwhor/audiosynth/blame/master/README.md" class="btn btn-sm js-update-url-with-hash">Blame</a>
<a href="/keithwhor/audiosynth/commits/master/README.md" class="btn btn-sm " rel="nofollow">History</a>
</div>
<a class="btn-octicon tooltipped tooltipped-nw"
href="https://windows.github.com"
aria-label="Open this file in GitHub Desktop"
data-ga-click="Repository, open with desktop, type:windows">
<svg aria-hidden="true" class="octicon octicon-device-desktop" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M15 2H1c-0.55 0-1 0.45-1 1v9c0 0.55 0.45 1 1 1h5.34c-0.25 0.61-0.86 1.39-2.34 2h8c-1.48-0.61-2.09-1.39-2.34-2h5.34c0.55 0 1-0.45 1-1V3c0-0.55-0.45-1-1-1z m0 9H1V3h14v8z"></path></svg>
</a>
<button type="button" class="btn-octicon disabled tooltipped tooltipped-nw"
aria-label="You must be signed in to make or propose changes">
<svg aria-hidden="true" class="octicon octicon-pencil" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path d="M0 12v3h3l8-8-3-3L0 12z m3 2H1V12h1v1h1v1z m10.3-9.3l-1.3 1.3-3-3 1.3-1.3c0.39-0.39 1.02-0.39 1.41 0l1.59 1.59c0.39 0.39 0.39 1.02 0 1.41z"></path></svg>
</button>
<button type="button" class="btn-octicon btn-octicon-danger disabled tooltipped tooltipped-nw"
aria-label="You must be signed in to make or propose changes">
<svg aria-hidden="true" class="octicon octicon-trashcan" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path d="M10 2H8c0-0.55-0.45-1-1-1H4c-0.55 0-1 0.45-1 1H1c-0.55 0-1 0.45-1 1v1c0 0.55 0.45 1 1 1v9c0 0.55 0.45 1 1 1h7c0.55 0 1-0.45 1-1V5c0.55 0 1-0.45 1-1v-1c0-0.55-0.45-1-1-1z m-1 12H2V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9z m1-10H1v-1h9v1z"></path></svg>
</button>
207 lines (133 sloc)
4.8 KB
Dynamic waveform audio synthesizer, written in Javascript.
Generate musical notes dynamically and play them in your browser using the HTML5 Audio Element.
No static files required. (Besides the source, of course!)
To see a demo of audiosynth in action, visit http://keithwhor.com/music/
Assuming audiosynth.js is in your current directory, import package using:
<script src="audiosynth.js"></script>
audiosynth implements a singleton class, AudioSynth. By default, the global (window) variable Synth
is the instance of the class.
Any attempt to instantiate new AudioSynth object will only create references to
the original object.
Synth instanceof AudioSynth; // truevar testInstance = new AudioSynth; testInstance instanceof AudioSynth; // true
testInstance === Synth; // true
To use AudioSynth to generate .WAV files...
Synth.generate(sound, note, octave, duration); /* Will generate a base64-encoded dataURI wavefile (.WAV) containing your data. sound a numeric index or string referring to a sound profile (by id or name, respectively) note the note you wish to play (A,B,C,D,E,F,G). Supports sharps (i.e. C#) but not flats. (Use the respective sharp!) octave the octave # of the note you wish to play duration the duration (in seconds) of the note */
You can play notes instantly using...
/* Same arguments as Synth.generate, only this creates an HTML Audio element, plays it, and unloads it upon completion. */ Synth.play(sound, note, octave, duration);
You may also create individual instruments (objects that reference .generate and .play, bound to specific sounds).
var piano = Synth.createInstrument('piano'); piano.play('C', 4, 2); // plays C4 for 2s using the 'piano' sound profile
AudioSynth comes with four default sound profiles.
piano (id 0)
organ (id 1)
acoustic (id 2)
edm (id 3)
var acoustic = Synth.createInstrument('acoustic'); // play with your acoustic guitar!
Poor performance? The default sampling rate for AudioSynth is 44100Hz (CD quality). This can be taxing on your browser.
To change the sampling rate, use Synth.setSampleRate(n)
Please note that lower sampling rates will equate to poorer sound quality, especially for higher notes.
// Can only set values between 4000Hz and 44100Hz. Synth.setSampleRate(20000); // sets sample rate to 20000HzSynth.getSampleRate(); // returns 20000
Volume a bit much? Adust the volume of the sample similarly.
Synth.setVolume(1.00); // set volume to 100% Synth.setVolume(0.40); // no, wait, 40%. Synth.setVolume(0.1337); // even better.Synth.getVolume(); // returns 0.1337
Additional sound profiles can be loaded using Synth.loadSoundProfile()
// Load a sound profile from an object... Synth.loadSoundProfile({ // name it name: 'my_sound', // WIP: return the length of time, in seconds, the attack lasts attack: function(sampleRate, frequency, volume) { ... }, // WIP: return a number representing the rate of signal decay. // larger = faster decay dampen: function(sampleRate, frequency, volume) { ... }, // wave function: calculate the amplitude of your sine wave based on i (index) wave: function(i, sampleRate, frequency, volume) { /* Here we have access to... this.modulate : an array of loaded frequency this.vars : any temporary variables you wish to keep track of */ }});
A rough guide to waveform generation can be found at http://keithwhor.com/music/
If you're hanging on note generation (for default or custom sound profiles), use Synth.debug()
to enable debugging.
This will log note generation times in your console.
Special thanks to Albert Pham (http://www.sk89q.com/) for Dynamic .WAV file generation, the work off of which this is based (http://www.sk89q.com/playground/jswav/) and Hasen el Judy (http://dev.hasenj.org/post/4517734448) for information regarding Karplus-Strong String Synthesis.
.WAV Audio Files
http://en.wikipedia.org/wiki/.WAV_file
Sound Synthesis
http://www.acoustics.salford.ac.uk/acoustics_info/sound_synthesis/
"acoustic" sound profile generated using Karplus-Strong String Synthesis:
http://en.wikipedia.org/wiki/Karplus%E2%80%93Strong_string_synthesis http://music.columbia.edu/cmc/musicandcomputers/chapter4/04_09.php
Feel free to e-mail me at keithwhor at gmail dot com
or follow me on Twitter, @keithwhor
If you like, feel free to share! :) Always appreciated.
Jump to Line
Go
</div>
</div>
<div class="container site-footer-container">
- Status
- API
- Training
- Shop
- Blog
- About
</ul>
<a href="https://github.com" aria-label="Homepage" class="site-footer-mark" title="GitHub">
<svg aria-hidden="true" class="octicon octicon-mark-github" height="24" version="1.1" viewBox="0 0 16 16" width="24"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59 0.4 0.07 0.55-0.17 0.55-0.38 0-0.19-0.01-0.82-0.01-1.49-2.01 0.37-2.53-0.49-2.69-0.94-0.09-0.23-0.48-0.94-0.82-1.13-0.28-0.15-0.68-0.52-0.01-0.53 0.63-0.01 1.08 0.58 1.23 0.82 0.72 1.21 1.87 0.87 2.33 0.66 0.07-0.52 0.28-0.87 0.51-1.07-1.78-0.2-3.64-0.89-3.64-3.95 0-0.87 0.31-1.59 0.82-2.15-0.08-0.2-0.36-1.02 0.08-2.12 0 0 0.67-0.21 2.2 0.82 0.64-0.18 1.32-0.27 2-0.27 0.68 0 1.36 0.09 2 0.27 1.53-1.04 2.2-0.82 2.2-0.82 0.44 1.1 0.16 1.92 0.08 2.12 0.51 0.56 0.82 1.27 0.82 2.15 0 3.07-1.87 3.75-3.65 3.95 0.29 0.25 0.54 0.73 0.54 1.48 0 1.07-0.01 1.93-0.01 2.2 0 0.21 0.15 0.46 0.55 0.38C13.71 14.53 16 11.53 16 8 16 3.58 12.42 0 8 0z"></path></svg>
<div id="ajax-error-message" class="ajax-error-message flash flash-error">
<svg aria-hidden="true" class="octicon octicon-alert" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M15.72 12.5l-6.85-11.98C8.69 0.21 8.36 0.02 8 0.02s-0.69 0.19-0.87 0.5l-6.85 11.98c-0.18 0.31-0.18 0.69 0 1C0.47 13.81 0.8 14 1.15 14h13.7c0.36 0 0.69-0.19 0.86-0.5S15.89 12.81 15.72 12.5zM9 12H7V10h2V12zM9 9H7V5h2V9z"></path></svg>
<button type="button" class="flash-close js-flash-close js-ajax-error-dismiss" aria-label="Dismiss error">
<svg aria-hidden="true" class="octicon octicon-x" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path d="M7.48 8l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75-1.48-1.48 3.75-3.75L0.77 4.25l1.48-1.48 3.75 3.75 3.75-3.75 1.48 1.48-3.75 3.75z"></path></svg>
</button>
Something went wrong with that request. Please try again.
</div>
<script crossorigin="anonymous" integrity="sha256-OK22EdOqsUcQcI6qHvkmNa5QMtPwjoVb9mrRmXsJLy0=" src="https://assets-cdn.github.com/assets/frameworks-38adb611d3aab14710708eaa1ef92635ae5032d3f08e855bf66ad1997b092f2d.js"></script>
<script async="async" crossorigin="anonymous" integrity="sha256-+Dri8NSD3dyPGJSzzCcJ/x20hRHdyNBU7WOcUsgNVMk=" src="https://assets-cdn.github.com/assets/github-f83ae2f0d483dddc8f1894b3cc2709ff1db48511ddc8d054ed639c52c80d54c9.js"></script>
<div class="js-stale-session-flash stale-session-flash flash flash-warn flash-banner hidden">
<svg aria-hidden="true" class="octicon octicon-alert" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M15.72 12.5l-6.85-11.98C8.69 0.21 8.36 0.02 8 0.02s-0.69 0.19-0.87 0.5l-6.85 11.98c-0.18 0.31-0.18 0.69 0 1C0.47 13.81 0.8 14 1.15 14h13.7c0.36 0 0.69-0.19 0.86-0.5S15.89 12.81 15.72 12.5zM9 12H7V10h2V12zM9 9H7V5h2V9z"></path></svg>
<span class="signed-in-tab-flash">You signed in with another tab or window. <a href="">Reload</a> to refresh your session.</span>
<span class="signed-out-tab-flash">You signed out in another tab or window. <a href="">Reload</a> to refresh your session.</span>
</div>
<div class="facebox" id="facebox" style="display:none;">