29

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?

Community
  • 1
  • 1
Phillip Senn
  • 46,771
  • 90
  • 257
  • 373

2 Answers2

43

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.

Marco Bonelli
  • 63,369
  • 21
  • 118
  • 128
  • 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 '15 at 18:06
  • [It will not unmute until you attempt to play a sound in a user input event](http://stackoverflow.com/questions/12517000/no-sound-on-ios-6-web-audio-api) – Phillip Senn Apr 02 '15 at 19:46
  • 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 '15 at 19:34
  • @bryc that doesn't mean anything, old versions of the browser still need the prefix – Marco Bonelli Jul 25 '15 at 21:07
  • 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 '15 at 22:37
  • Streaming ASR IS POSSIBLE in Safari. Google's google speech cloud demo works in Safari: https://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? – Josh Jul 16 '18 at 08:20
  • @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. – Marco Bonelli Jul 16 '18 at 08:27
  • @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. – Josh Jul 16 '18 at 08:39
  • @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. – Marco Bonelli Jul 16 '18 at 08:41
  • @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. – Josh Jul 16 '18 at 08:50
  • @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](https://www.html5rocks.com/en/tutorials/webaudio/intro/) and [all of these](http://webaudiodemos.appspot.com/). 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... – Marco Bonelli Jul 16 '18 at 08:54
  • This this day in the year 2020, it does not work in Safari. – Chewie The Chorkie Feb 09 '21 at 21:34
  • @ChewieTheChorkie it certainly does on modern Safari versions, and it has been supported for years now. – Marco Bonelli Feb 09 '21 at 23:52
2
  var AudioContext = window.AudioContext // Default
      || (window as any).webkitAudioContext;// Safari and old versions of Chrome

    this.audioContext = new AudioContext();
Ragesh Punathil
  • 85
  • 2
  • 4
    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 '20 at 19:58
  • 1
    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 '21 at 00:06