audio-context-polyfill
Version:
Just code for one API by enjoying this polyfill for the Web Audio API.
59 lines (42 loc) • 1.96 kB
Markdown
for one API by enjoying this polyfill for the **[Web Audio API](http://caniuse.com/audio-api)** at [W3](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html), following the upgrade path outlined at [MDN](https://developer.mozilla.org/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext).
First, as the **Web Audio API** evolved, many method names were changed from what we find in older Chrome and Safari browsers (e.g. **buffer.start()** was **bufferNode.noteOn()**). Second, older browsers retained a vendor prefixed **Audio Context** method (e.g. **window.AudioContext** was **window.webkitAudioContext**).
## Which browsers this will effect
Including this polyfill will improve your experience coding for Chrome 10-30, Firefox v23-25, Opera 15-16, Safari 6-7, iOS Safari 6-7, and potentially later versions of these browsers as well.
## Examples of the Audio API
Let’s load a sound and autoplay it.
```javascript
var
// create the audio context
context = new AudioContext(),
// create the http request
request = new XMLHttpRequest();
// request the MP3
request.open('GET', 'sound.mp3');
// request as an array buffer
request.responseType = 'arraybuffer';
// when the request loads
request.addEventListener('load', function () {
// decode the array buffer
context.decodeAudioData(request.response, function (buffer) {
var
// create the audio source
source = context.createBufferSource(),
// create the audio volume
volume = context.createGainNode();
// set the buffer to the audio source
source.buffer = buffer;
// set the volume to half
volume.gain.value = 0.5;
// connect the audio source to the audio volume
source.connect(volume);
// connect the audio volume to the output
volume.connect(context.destination);
// play the audio source
source.start(0);
});
});
// begin the request
request.send();
```
Just code