"Troubleshooting the issue of createMediaElementSource not functioning on iOS Safari's Webkit

Looking to perform live sound analysis on my iPhone using the webkitAudioContext Analyzer.

var ctx = new (window.AudioContext || window.webkitAudioContext);
var audioGoodmorning = new Audio('assets/sounds/greeting.m4a');
var audioSrc = ctx.createMediaElementSource(audioGoodmorning);
var analyser = ctx.createAnalyser();

analyser.fftSize = 32;
audioSrc.connect(analyser);
audioSrc.connect(ctx.destination);
var frequencyData = new Uint8Array(analyser.fftSize);

analyser.getByteFrequencyData(frequencyData);

This setup functions well in Chrome on Mac and even on Safari when added to the homescreen with specific meta tags:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="CHAR">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

However, there are issues when accessing it directly on Safari or embedding the site using iOS wkwebview where the frequencyData Array is filled with zeros.

Has anyone encountered a similar problem?

Thank you for any help!

javascriptiosaudiowebkitwebkitaudiocontext

Answer №1

Take a look at this fiddle:

https://jsfiddle.net/42dvhqy3/1/

var audio = new Audio();
audio.loop = true;
audio.autoplay = true;
audio.crossOrigin = "anonymous";

audio.addEventListener('error', function(e) {
  console.log(e);
});
audio.src = "https://greggman.github.io/doodles/sounds/DOCTOR VOX - Level Up.mp3";
audio.play();
audio.controls = true;

document.getElementById("wrapper").append(audio);

audio.addEventListener('canplay', function() {
  var audioSourceNode = audioContext.createMediaElementSource(audio);

  audioSourceNode.connect(analyser);
  analyser.connect(audioContext.destination);
});

It works smoothly on Safari since the handling of Audio is within a user click event.

On Chrome or Safari "localhost," it works fine without the need for a "user click event."

This other Fiddle also demonstrates proper functionality using the HTML audio tag:

https://jsfiddle.net/cbua1pkn/1/

The key here is to initialize the audioContext upon clicking the play button! (ensuring a user event context).

Answer №2

If this issue hasn't been resolved yet, it appears that Safari does not support the createMediaElementSource according to https://caniuse.com/#search=webaudio. Unfortunately, Safari's compatibility with the WebAudio API is lacking at the moment.

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

An issue has been identified where the 'connect' event in socket.io does not trigger on the client side

Looking to dive into the world of node.js and socket.io. I've put together a simple client-server test application, but unfortunately it's not functioning as expected. Running the system on a Windows machine with an Apache server setup. Apa ...

javascriptnode.jssocket.io

What is the best way to manage photos from your phone without having to upload them online?

I'm currently developing an application using AngularJS/Javascript, HTML, and CSS within a cloud-based environment on c9.io. My next task is to create and test an app that can access the phone's photo album, apply filters to images, and I'm ...

javascripthtmlcssangularjsimage-processing

Using CSS to create a transition effect for fading in and out background images

I created a website with a captivating full-page background image (img/bg_start.jpg): If you hover your mouse over the central animal on the page, the current image (img/bg_start.jpg) will fade out and be replaced with another picture (img/bg_start2.jpg) ...

javascriptjquerycss

What is the best way to keep only the arrow controls visible in TransformControls translation mode?

Currently, I am using TransformControls which meets my requirements. However, it includes extra elements such as arrows and squares around the object. Is there a way to disable these additional elements and only display the arrows? https://i.sstatic.net/Lk ...

javascriptthree.js

Exploring the Concept of Template Element Recursion in Angular JS 2

In my Angular 2 project, I encountered a situation where I needed to iterate through ngFor based on child elements. My component should be able to render a list based on the input provided. Here is an example of the data structure: [ { name: 'ABC ...

javascriptangulartypescript

Encountering issues with installing Angular using npm due to errors

When I run npm install, I encounter errors. Though I can get it to work by using npm install --force, I prefer not to rely on the force flag. After reading through the errors, it seems like there might be a version compatibility issue, but I'm having ...

javascriptangularnpm

Can you suggest the optimal setup for (javascript SOAP)?

As part of my nightly maintenance process on a LAMP server, I need to retrieve data from a web service using SOAP, which is then applied to a database. While researching various options, I have become overwhelmed by the abundance of information available. ...

javascriptjquerynode.jsweb-servicessoap

I'm wondering why myDivId.toggle() is functioning properly but myDivClass.toggle() is not working as expected

Using JQuery's toggle() function, I have been able to hide and show some DIVs successfully. Recently, I discovered relationships between certain DIVs that allowed me to group them into a class. I decided to try toggling the entire class rather than ...

javascriptjquerycsshtmltoggle

Could it be a potential issue with array sorting in Chrome and IE?

My array sorting script works perfectly on Firefox, however, Chrome and IE are giving me an unordered array. var arr = ["2017-02-17", "2017-02-17", "2017-02-16", "2017-02-15", "2017-02-16", "2017-02-15", "2017-02-14", "2017-02-16", "2017-02-17", "2017-02- ...

javascriptarraysgoogle-chromesorting

In order to access the localStorage from a different component, a page refresh is required as it is

UPDATE: Just to clarify, this question is NOT duplicate of how to retrieve the value from localstorage. My scenario is unique and the issue lies with Angular itself rather than localStorage. I am currently developing an Angular7 application. In one of my ...

javascriptangulartypescriptlocal-storageangular7

Are these objects enclosed within a JavaScript array?

Are square brackets used to define arrays and curly brackets used for objects? Can you explain the following data structure: Some.thing = [ { "swatch_src" : "/images/91388044000.jpg", "color" : "black multi", "inventory" : { "F" : [ 797113, 797 ...

javascriptjquery

Unable to access .root in the unmounted test renderer while performing React Native unit testing

Hello, I am currently in the process of testing my app using react-native-testing-library. Unfortunately, when I run the test, it fails. I'm encountering an error that says: Can't access .root on unmounted test renderer There appears to be a ...

javascriptreactjsreact-nativeunit-testingreact-native-testing-library

Enhance every ajax post request using jQuery

I want to include a csrf token from cookies in all my ajax posts. I've attempted the following: $.ajaxPrefilter(function(options, originalOptions, jqXHR) { if(options.type.toUpperCase() === "POST") options.data = options.data || {}; ...

javascriptjqueryajax

How do I use NodeJS and MongoDB to dynamically populate my webpage with data from a database?

I am working on a small express + ejs application that stores data for registered users. Each user is assigned a "role" that is stored in the database. I would like to display each user's information in an html div, with the div's color refle ...

javascriptnode.jsmongodbexpressejs

displaying outcomes as 'Indefinite' rather than the anticipated result in the input field

I need to automatically populate values into 4 text fields based on the input value entered by the user. When the user exits the input field, a function called getcredentials() is triggered. This function, in turn, executes Python code that retrieves the r ...

javascriptpythonhtmldjangoajax

Ways to showcase Switch/Case in two separate drop-down menus

I'm currently working on a PHP file with a switch/case structure that I believe is in JSON format. While I may not be an expert in PHP, AJAX, and JSON, I'm really putting effort to learn more about it. <?php switch($_GET['make'] ...

phpjavascriptjqueryajaxforms

Ensure that autocorrect is set to suggest the nearest possible quantity form in WordPress

I'm currently in the process of creating a webshop using WooCommerce. Our quantity system is a bit unique, as we are using WooCommerce advanced quantity, which means that quantities increase by 0.72 increments (e.g. 0.72, 1.44, 2.16 etc). The +/- butt ...

javascriptjquerywordpresswoocommerce

Having difficulties in properly connecting faces while UV mapping a cube in Three.js

After successfully applying an image texture to a cube through UV mapping for a photo-sphere viewer, I noticed that thin straight lines are visible where the faces of the cube join. Interestingly, this issue does not occur when splitting texture tiles via ...

javascriptthree.jsuv-mapping

Switching out the browser's scrollbar for buttons

I've been searching online for a solution, but so far I haven't found anything. Although, I'm pretty sure I've come across something similar to what I need before. Essentially, I have a large table created by the user that will likely ...

javascripthtmlcssangularjs

Finding the identifier of an HTML element using AngularJS

I am trying to retrieve the specific id of each line and pass it to a JavaScript function that will make an HTTP request. However, I am encountering an issue when calling the function excluir(id). The parameters seem to be correct, but the alert is not tri ...

javascripthtmlangularjs