Having trouble using the Web Audio API on iOS 11 Safari and looking for a solution

Despite assurances that iOS 11 Safari would support the Web Audio API, it still seems to be incompatible with this JavaScript code:

//called on page load
get_user_media = get_user_media || navigator.webkitGetUserMedia;  
get_user_media = get_user_media || navigator.mozGetUserMedia;
get_user_media.call(navigator, { "audio": true }, use_stream, function () { });
function use_stream(stream){
    var audio_context = new AudioContext();
    var microphone = audio_context.createMediaStreamSource(stream);
    window.source = microphone; // Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=934512
    var script_processor = audio_context.createScriptProcessor(1024, 1, 1);
    script_processor.connect(audio_context.destination);
    microphone.connect(script_processor);
    //do more stuff which involves processing the data from user's microphone...
}

I copied most of this code without fully understanding it. It is meant to capture the user's microphone for further processing (which it accomplishes in other browsers). However, the code breaks at the

var audio_context = new AudioContext();
line, and no subsequent code runs. I lack error messages as I am unable to debug iOS Safari due to not having a Mac (frustrating!). Can anyone shed light on what could be going wrong and how to resolve it?

e: I should note that I researched and found that using the "webkit" keyword before the Web Audio API in Safari may be necessary, but even changing it to

var audio_context = new webkitAudioContext();
does not work.

Answer №1

The user @TomW was heading in the right direction - essentially, the webkitAudioContext remains suspended unless it's generated directly in response to a tap by the user (prior to obtaining the stream).

To delve deeper into this concept and view a functional illustration, check out my response on .

Answer №2

Mobile devices only seems to work with home screen apps. I reported the issue to Apple developer support, and they confirmed that it was a duplicate case (indicating awareness of the problem..uncertain about when a fix will be released).

Answer №3

To ensure that audio plays only after a user interaction, you must first resume your AudioContext when such an event occurs. Here is an example:

...
<button>Play</button>
...

<script>
  ...
  const audioContext = new AudioContext();
  ...
  document.querySelector('button').addEventListener('click',_=>audioContext.resume());
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Could someone assist me with understanding how to use the Load function in JQuery?

I have a set of links with the class "ajax" that are meant to fetch content from an element with the id "test" in the file "data.html" located in the same directory. This content should then be inserted into the div with the id "content" on my page: <s ...

URL validation RegEx in AngularJs using Javascript

I am looking for the following URLs to return as true other.some.url some.url some.url/page/1 The following URL should be flagged as false somerandomvalue Here is the regex I have been experimenting with so far: /^(?:http(s)?:\/\/) ...

An error occurred when attempting to access data within a variable that is undefined, resulting in a TypeError at the errorHandler function

Every time I attempt to send a post, patch, or put request, I keep getting this error. However, there are no issues with get requests. TypeError: Cannot read properties of undefined (reading 'data') at errorHandler (/home/joe/Documents/mypro ...

Enhancing class names in production mode with Material UI, Webpack, and React to optimize and minimize code size

webpack - v4.5+ material ui - v4.9.7 react - v16.12.1 Ordinarily, all classes should follow the pattern of the last one in the first example. However, for some unknown reason, many classes remain unchanged in production mode. Any thoughts on this issue? ...

refresh the localstorage array using vanilla JavaScript

I am attempting to remove an element from an array stored in local storage. I am using vanilla JavaScript within a Vue.js 3 component. Here is my array: ["96", "281", "287", "415", "650", "661", & ...

Revamping the settings page by featuring a single "save changes" button

Is it possible to create a settings.php page where users can update their personal information, such as username, password, and email, all within the same page? I know how to perform these tasks individually, but I'm unsure about integrating different ...

Is it possible to arrange data at the server without using a query?

Having some trouble with sorting my array before printing it in handlebars. My app is built using expressjs, handlebars, mongoose/mongodb and I can't seem to figure out the best approach. app.js (entry point) var debug = require('debug'); ...

Restrict the character count in the input field according to its width

Is there a way to restrict the number of characters in an input field based on its width? I have a dynamic input field with varying widths and I would like users to be able to type without their text extending outside of the input boundary. Using maxLeng ...

Performing a mass update in MongoDB with the help of mongoose

Is there a way to perform bulk upserts with Mongoose? Essentially, I want to have an array and insert each element if it does not exist, or update it if it does. (I am using custom _ids). When I try using .insert, MongoDB throws an error E11000 for duplic ...

Is it possible to automatically update the database information through a PHP script and AJAX?

I'm currently utilizing this function to retrieve database rows via ajax. function ajax_search(){ $("#search_results").show(); var search_val=$("#search_term").val(); $.post("find.php", {search_term : search_val}, function(data){ if (data.length ...

The css-loader is missing the required dependency peer Webpack5, causing a resolution error

Recently, I've ventured into the world of JavaScript and I'm looking to incorporate vue-audio-visual into my project. However, I encountered a perplexing error in my node console that seems unrelated. The npm error message reads as follows: code ...

Node.js causing excessive CPU usage due to repeated gettimeofday calls

Recently, I encountered a situation with a long-running node.js process that would occasionally spike to 100% CPU usage and stop responding to requests. In an effort to diagnose the issue, I used strace to inspect the process and discovered a series of get ...

Creating an asynchronous function in Node.js that returns a promise, but experiencing unexpected behavior when using console.log to display the result

Recently, I created a simple and compact API that determines the gender of a person. It functions by sending a get-request to a specific page which responds with a JSON object. This snippet illustrates how my module works: 'use strict'; const ht ...

Can someone guide me on how to make an array filled with dates using Javascript?

I am working on developing a Javascript code that can identify all the days leading up to the current date. Here is what I have managed so far: var titleArray = [ "title1", "title2", ]; var pictureArray = today.toString(); var thumbArray = today.toString ...

How can you retrieve the <head> content from a remote website without being able to make any changes to that site?

Imagine I need to access the <head> tag of a remote website like YouTube. Whenever I attempt this, I encounter an error message: Access to XMLHttpRequest at ‘Website I am trying to access for the head section’ from origin ‘My Website’ has b ...

JavaScript Regular Expression that identifies commas enclosed within quotation marks

I am attempting to parse a text-based log file in the following format: type: 'click', category: 'REFRESH_DOOR', desc: 'clicked refresh from door 0124', site: 'mysite', pathname: '/load_areas/all/doors&apos ...

Turn off the header display for the login page

I have an angular js app with an index.html page that loads all the scripts and a default header present in all the views. Here is my index.html: <!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <title ...

Accessing getUserMedia within Internet Explorer 11 or utilizing MediaStream on IE 11

I am attempting to utilize the getUserMedia function in IE 11 with the help of the temasys plugin. However, IE does not support the MediaStream instance returned by getUserMedia. Below is a snippet of my code: import React from 'react' import { ...

Is it possible to manipulate angularjs data without using a controller?

In my main webpage, there are just two sections: a navigation bar and the changing content. index.html: <div ng-controller='MainCtrl'> <li ng-repeat="nav in navs"> <a href="#{{nav.url}}">{{nav.name}}</a> ...

Is it possible to use ng-repeat on an array that contains data with inner arrays having similar key-value pairs, grouping them

I have a collection of data that includes sub-collections with a common key (TypeOfServiceAssigned:Array(2)) in both inner arrays. I am looking to use ng-repeat to group similar key-value pairs together and separate those that are different. For a clearer ...