Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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)')

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.
                I don't think I can accept "no" as an answer. Maybe I should word my question a little more carefully: Such that it works on the browsers that have it built in.
– Phillip Senn
                Mar 31, 2015 at 18:06
                Latest stable Chrome: 'webkitAudioContext' is deprecated. Please use 'AudioContext' instead.. Seems that AudioContext is now prefix-less in all major modern browsers. No idea about Safari since the Windows version hasn't been updated since 2012
– bryc
                Jul 25, 2015 at 19:34
                Of course it means something, it means the API is quickly becoming standard. Meaning less broken code from deprecated methods like noteOn and createJavaScriptNode or Firefox's Audio Data API. There is a lot of broken WebAudio code out there. Only Safari on OS X is left with the webkit prefix, which I am sure will be updated when they release a new version of OS X (??).
– bryc
                Jul 25, 2015 at 22:37
  var AudioContext = window.AudioContext // Default
      || (window as any).webkitAudioContext;// Safari and old versions of Chrome
    this.audioContext = new AudioContext();
                While this code may resolve the OP's issue, it is best to include an explanation as to how your code addresses the OP's issue. In this way, future visitors can learn from your post, and apply it to their own code. SO is not a coding service, but a resource for knowledge. Also, high quality, complete answers are more likely to be upvoted. These features, along with the requirement that all posts are self-contained, are some of the strengths of SO as a platform, that differentiates it from forums. You can edit to add additional info &/or to supplement your explanations with source documentation.
– ysf
                Jun 22, 2020 at 19:58
                If you're using TypeScript then you'd be better off adding a declaration for webkitAudioContext at the root of your project rather than resort to any. I'm using interface Window { webkitAudioContext: typeof AudioContext } in the declaration.d.ts file of my current project.
– lawrence-witt
                Feb 22, 2021 at 0:06
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.