Safari Web Audio API filter malfunctioning

I am currently working on an HTML5 canvas interactive project that utilizes Createjs and the Web Audio API. Despite the deprecation of webkitAudioContext in Chrome and Firefox, I have successfully implemented audio in those browsers. However, I am facing an issue with filters not working in Safari, even though the sound still plays. Filters work fine in Chrome and Firefox.

My filter setup looks like this:

var sound = new Audio();
sound.src = './sounds/sound.mp3';
sound.autoplay = false;
sound.loop = true;
soundSource = context.createMediaElementSource(sound);
var soundFilter = context.createBiquadFilter();
soundFilter.type = "lowpass";
soundFilter.frequency.value = 500;
soundSource.connect(soundFilter);
soundFilter.connect(context.destination);

Could it be that I'm using a deprecated term unknowingly? You can check out the live project here. Thank you.

UPDATE: The WebKit team has acknowledged this issue as a legitimate bug and is working on fixing it. For more details, click here.

javascriptsafarihtml5-canvasweb-audio-api

Answer №1

It seems that according to reports, Safari may not have correctly implemented createMediaElementSource. This means that rather than routing the sound through Web Audio nodes as expected, it simply plays directly through the audio device.

Have you considered using a BufferSourceNode instead? Although it requires extra steps to retrieve and decode the sound file, it may be a viable alternative solution.

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

Ways to extract the returned AJAX success object from a function

Attempting to extract attribute values, I have assigned an ajax GET request to a variable. The console.log displays the ajax object, but I am encountering difficulty returning the object within the success function. I have tested with: ajaxObj.d ajaxObj.r ...

javascriptjqueryjsondynamics-crm

Ways to safeguard function constructor arrays from unauthorized alterations using get methods in JavaScript

I am dealing with a coding challenge that involves managing state in JavaScript. Here is the code snippet I have been working on: function State(){ const SecretState = { name: 'bob' } this.getState = () => SecretState; this.setStat ...

javascriptjavascript-objects

Steps to retrieve the value of an object with the for of loop

I have been attempting to utilize normalize-url within my code below: The socialfields is an object that I've transformed into an array using the for...of loop. The socialfields keys contain URLs to various social media platforms, for example: { y ...

javascriptarraysnode.jsobject

Tips for effectively sharing content on social media from your Vuejs application

I have been using the vue-social-sharing library to enable social media sharing on my website, and overall it's been working well. However, I am facing a problem where when I click the Facebook share button, it doesn't share the title, descriptio ...

javascriptvue.jsvuejs2facebook-social-plugins

What are some ways to optimize the use of the jquery.mCustomScrollbar.js script?

I have a myriad of inquiries and would greatly appreciate your assistance in addressing them. Despite spending countless hours attempting to solve the issue independently, I have been unsuccessful. One question that plagues me is why, when using Google Ch ...

javascriptjqueryhtmlcssscrollbar

How can I connect a click event on one div to trigger another using jquery?

Could someone assist me with the proper terminology? I am interested in clicking one div, which would then automatically trigger the click on another div. For example, if I click on div 1, I want div 2 to be clicked by JavaScript without user interaction ...

javascriptjquery

Utilizing various ExtJS selectors

Can Ext JS 4 support multiple selectors for event handling? I understand that in JQuery, you can achieve this by using the following syntax: $('.selector1,.selector2').click(function(){ //.. }); However, I attempted to use a similar method ...

javascriptextjs

Guidance on establishing an Array data type for a field in GraphQL Type declarations

Hey there! Currently, I'm working on my Nodejs project and facing a little dilemma. Specifically, I am trying to specify the type for graphQL in the code snippet below. However, I seem to be struggling with defining a field that should have a Javascri ...

javascriptnode.jsgraphql

Nested functions are only effective for a single use

I am facing an issue on my website where I have implemented a button that creates another button when clicked. However, the newly created button is supposed to generate a paragraph upon clicking, but this functionality only works once. I suspect that nesti ...

javascripthtml

How to use jQuery to set multiple variables with just one chain command?

Can you create multiple variables using a single jQuery chain? var sectionTable = jQuery("#sectionsTable"); var sectionTableRows = sectionTable.find("tr"); var sectionTableColumns = sectionTableRows.find("td"); I am curious about the syntax for chaining ...

javascriptjquery

extract keys and values from an array of objects

I would like assistance with removing any objects where the inspectionScheduleQuestionId is null using JS. How can we achieve this? Thank you. #data const data = [ { "id": 0, "inspectionScheduleQuestionId": 1, ...

javascriptangulartypescript

I am looking to update the background color of the material UI helper text

In the image below, you can see that my background color is gray and my text field color is white. When an error is shown, the text field's white color extends and the password error message doesn't look good. I want the text field to remain whit ...

javascriptreactjsmaterial-ui

Learn how to dynamically pass a value from a prop to a router-link in Vue.js

I created a custom button component and decided to switch from using <a> tags to <router-link>. However, I encountered an error because the router-link was rendering before the prop received its value. To address this, I added an if statement b ...

javascriptvue.jsvue-router

Error Message: ES5 mandates the use of 'new' with Constructor Map

Below is the code snippet: export class ExtendedMap<T, U> extends Map { constructor() { super(); } toggle(key: T, value: U) { if (this.has(key)) { super.delete(key); ...

javascripttypescript

"Unlocking the full potential of sidebars.js: A guide to seamless

I recently attempted to implement THIS plugin on a small project of mine. Despite reviewing the USAGE section multiple times and examining the example files provided after downloading from git (unfortunately, none of them seemed to work!), I have construct ...

javascriptjqueryhtmlcssjquery-plugins

AngularJS: How do I stop the $interval from running indefinitely?

After spending hours reading the documentation, it's now 3am and I'm at my wit's end. Below is my controller code: controller('makeDashCtrl', function ($scope, $rootScope, $cookies, $location, $http, $interval) { var userId ...

javascriptangularjs

Removing the freshchat window across multiple pages in Vuejs

I am facing an issue with the fresh chat window on my website. I want to remove it from all pages except the home page. I have placed the script inside the mounted part of the home component, but once it loads, it never closes. It only disappears if I re ...

javascriptvue.jssingle-page-application

Incorporating search engine optimization into a React project

Currently, I am tackling a React js project and have been assigned the task of incorporating SEO into it. I have attempted to find some open source resources that outline a step-by-step process on integrating SEO, as well as how to implement tags and end ...

javascriptreactjsexpress

Change the color of a c3js chart when it loads

I have been searching for a way to customize the color of a scatter chart's plot, and I came across an example that uses d3 code within the chart http://jsfiddle.net/ot19Lyt8/9/ onmouseover: function (d) { d3.select(d3.selectAll("circle ...

javascriptjqueryd3.jsc3.js

Angular ng-bind doesn't work as expected

I am currently developing an application and encountering an issue with passing a string through ng-model where it always returns as "undefined". Here is the relevant HTML: <aside> <p>List of objs:</p> <ul> <li ...

javascripthtmlangularjs