StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h3>Using the HTML5 audio element</h3> <p>Cross-browser generative sustained audio using JavaScript and the <code>audio</code> element isn't currently possible, as Steven Wittens <a href="http://acko.net/blog/javascript-audio-synthesis-with-html-5">notes in a blog post on creating a JavaScript synth:</a></p> <blockquote> <p>"...there is no way to queue up chunks of synthesized audio for seamless playback".</p> </blockquote> <h3>Using the Web Audio API</h3> <p>The <a href="http://chromium.googlecode.com/svn/trunk/samples/audio/specification/specification.html">Web Audio API</a> was designed to facilitate JavaScript audio synthesis. The Mozilla Developer Network has a <a href="https://wiki.mozilla.org/Audio_Data_API#Complete_Example%3a_Creating_a_Web_Based_Tone_Generator">Web Based Tone Generator</a> that works in Firefox 4+ [<a href="http://jsfiddle.net/c59yu/">demo 1</a>]. Add these two lines to that code and you have a working synth with generative sustained audio upon keypress [<a href="http://jsfiddle.net/HMwTT/">demo 2</a> - works in Firefox 4 only, click the 'Results' area first, then press any key]:</p> <pre><code>window.onkeydown = start; window.onkeyup = stop; </code></pre> <p>The BBC's <a href="http://www.bbc.co.uk/blogs/researchanddevelopment/2010/11/mozilla-audio-data-api.shtml">page on the Web Audio API</a> is worth reviewing too. Unfortunately, support for the Web Audio API doesn't extend to other browsers yet. </p> <h3>Possible workarounds</h3> <p>To create a cross-browser synth at present, you'll likely have to fall back on prerecorded audio by:</p> <ol> <li>Using long prerecorded ogg/mp3 sample tones, embedding them in separate <code>audio</code> elements and starting and stopping them upon keypress.</li> <li>Embedding an swf file containing the audio elements and controlling playback via JavaScript. (This appears to be the method that the <a href="http://www.google.com/logos/2011/lespaul.html">Google Les Paul Doodle</a> employs.)</li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload