Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AudioContext on Safari

Yesterday, I had a question about the noteOn method of the AudioContext object. I've gotten myself all turned around now on this AudioContext object. Here's what I've tried and their associated error messages in Safari on my desktop:

	var ctx  //	ctx = new(AudioContext || webkitAudioContext); // ReferenceError: Can't find variable: AudioContext  //	ctx = new(audioContext || webkitAudioContext); // ReferenceError: Can't find variable: audioContext  //	ctx = new(window.AudioContext || webkitAudioContext); // ReferenceError: Can't find variable: webkitAudioContext  	ctx = new(window.AudioContext || window.webkitAudioContext);  // TypeError: 'undefined' is not a constructor (evaluating 'new(window.AudioContext || window.webkitAudioContext)')

Q: How do I define myAudioContext such that it works on all browsers?

like image 975
Phillip Senn Avatar asked Mar 31 '15 16:03

Phillip Senn


People also ask

What is window AudioContext?

The AudioContext interface represents an audio-processing graph built from audio modules linked together, each represented by an AudioNode . An audio context controls both the creation of the nodes it contains and the execution of the audio processing, or decoding.

How many AudioContext are there?

How many Audio Contexts should I have? A: Generally, you should include one AudioContext per page, and a single audio context can support many nodes connected to it. Though you may include multiple AudioContexts on a single page, this can lead to a performance hit.


1 Answers

Browser support limitations

The Web Audio API (id est AudioContext) is not supported by all the browsers. Some browsers may have it prefixed with their vendor prefix, but older browsers do not support it at all. Therefore, to answer your question: you cannot use the AudioContext on all the browsers.

Nonethless, you can still use the Web Audio API on supported browser using feature detection (see below), or just check if your browser supports it here. Take a look and find your Safari version: this site tells you if the feature is available and, if prefixed, which prefix you'll have to use.

AudioContext feature detection

To be sure you can use the Web Audio API on any browser which supports it, you can use feature detection with relative fallbacks to the vendor-prefixed objects. In case the AudioContext object is not supported, you'll halt the execution of your script and alert the user. Here's an example:

var AudioContext = window.AudioContext // Default     || window.webkitAudioContext // Safari and old versions of Chrome     || false;   if (AudioContext) {     // Do whatever you want using the Web Audio API     var ctx = new AudioContext;     // ... } else {     // Web Audio API is not supported     // Alert the user     alert("Sorry, but the Web Audio API is not supported by your browser. Please, consider upgrading to the latest version or downloading Google Chrome or Mozilla Firefox"); } 

Note that as of now webkit is the only existing vendor-prefixed AudioContext, because Mozilla and Opera use the regular unprefixed object, and IE doesn't support the Web Audio API yet.

like image 172
Marco Bonelli Avatar answered Sep 21 '22 02:09

Marco Bonelli