AudioContext on Safari

25,930

Solution 1

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.

Solution 2

  var AudioContext = window.AudioContext // Default
      || (window as any).webkitAudioContext;// Safari and old versions of Chrome

    this.audioContext = new AudioContext();

25,930

Phillip Senn

Developer in: Microsoft SQL Server, Adobe ColdFusion (and Lucee), HTML, CSS, JavaScript (with jQuery's help). Tools: Dreamweaver, Fireworks, Beyond Compare. Adjunct Instructor: Lenoir-Rhyne University. Twitter: @PhillipSenn

Updated on July 09, 2022

Comments

Phillip Senn almost 2 years
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?
- Phillip Senn about 9 years
  
  I follow the first example on HTML5Rocks and I get ''Web Audio API is not supported in this browser'.
- Phillip Senn about 9 years
  
  That's interesting. My Help About says I'm Safari 5.1.7...
- Marco Bonelli about 9 years
  
  Yes, Safari supports the Web Audio API only on version 6.1 or above.
- Phillip Senn about 9 years
  
  Apple says the latest version is 5.1.7.
- Marco Bonelli about 9 years
  
  That only applies to Safari for Windows and Mac OS X (or lower). On Mac OS Mountain Lion the highest supported Safari version is 6, on Mavericks is 7, and on Yosemite is 8 (the latest one).
Phillip Senn about 9 years

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 about 9 years

It will not unmute until you attempt to play a sound in a user input event
bryc almost 9 years

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
Marco Bonelli almost 9 years

@bryc that doesn't mean anything, old versions of the browser still need the prefix
bryc almost 9 years

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 (??).
Josh almost 6 years

Streaming ASR IS POSSIBLE in Safari. Google's google speech cloud demo works in Safari: cloud.google.com/speech-to-text The big question is: How did Google pull it of?? I looked into the webpage's .JS and HTML source code, but could not reverse engineer the solution with my mobile developer coding skills. Ideas?
Marco Bonelli almost 6 years

@Josh I have not a single clue about what the hell you are talking about. Ask another question if you want instead of posting unrelated comments.
Josh almost 6 years

@MarcoBonelli My comment is completely related. Google's speech recognition demo in this page (cloud.google.com/speech-to-text) works in Safari, and I thought somebody like you could easily explain how was that accomplished. But don't worry, I will find the answer myself.
Marco Bonelli almost 6 years

@Josh I never said that the AudioContext API isn't available in Safari. Nobody ever said that. That's why your comment doesn't make any sense.
Josh almost 6 years

@MarcoBonelli I never said, that you said, the API isn't available in Safari. Unless you live under a rock, you will know it that making the API work in Safari is not possible most of the times, that the URL I mention above is proof that the API works under certain conditions, and that most people online are guessing. Your answer looked like a good starting point, but I really don't care if you can't see it. As I said, don't worry, I can find the answer myself.
Marco Bonelli almost 6 years

@Josh which is totally unrelated to this question and to my answer, and also wrong, since the AudioContext API has been fully working without any problem for years on Safari too. You can look at simple examples with live demos like this one and all of these. I don't know what are your problems working with it on Safari since I see no problem at all, but good luck solving them I guess...
ysf about 4 years

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.
Chewie The Chorkie over 3 years

This this day in the year 2020, it does not work in Safari.
Marco Bonelli over 3 years

@ChewieTheChorkie it certainly does on modern Safari versions, and it has been supported for years now.
lawrence-witt over 3 years

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.