Safari problem with decoding audio data in AudioContext

I am attempting to convert .ogg data into an ArrayBuffer.

In my Angular application component, I have the following code snippet:

ngOnInit() {
  (window as any).AudioContext = (window as any).AudioContext || (window as any).webkitAudioContext;
  this.audioContext = new AudioContext();
}

myFunction(oggArrayBuffer) {
  this.audioContext.decodeAudioData(oggArrayBuffer, function(buffer) {
    console.log('audio data successfully decoded', buffer);
  },
  function(e) { console.log('Error while decoding audio data', e); });
}

This code functions properly on Chrome, but Safari 11 raises the following error:

Error while decoding audio data: null

What could be causing this issue?

Answer №1

Currently, Safari does not have the capability to decode OGG files using the decodeAudioData() function. Due to varying support for different codecs in each browser, it is recommended to utilize Decode this! to verify file type compatibility directly within a browser.

The Web Audio API does not mandate full codec support across all browsers, resulting in varying levels of support for different codecs depending on the browser being used. Browsers are expected to reject the decodeAudioData() function with an EncodingError if decoding is not possible. However, in the case of Safari, it only rejects null for certain files, indicating a bug. To ensure consistent behavior in Safari, consider utilizing standardized-audio-context, which offers a solution for this issue.

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

Encountered an optimization error during the docker build process with Ng build

Encountering an error while trying to build an Angular app in docker, specifically when running npm run build: #11 1.106 > ng build #11 1.106 #11 4.769 - Generating browser application bundles (phase: setup)... #11 32.23 ✔ Browser application bundle g ...

Need help in setting the default TIME for the p-calendar component in Angular Primeng version 5.2.7?

In my project, I have implemented p-calendar for selecting dates and times. I have set [minDate]="dateTime" so that it considers the current date and time if I click on Today button. However, I would like the default time to be 00:00 when I click ...

Encountered an error - 'SyntaxError: unexpected token: ':'' while attempting to load a JSON file for ngx-translate using the Karma test runner

I am currently in the process of setting up system tests for my Angular application. The app utilizes the TranslateModule (ngx-translate) in this manner: TranslateModule.forRoot({ defaultLanguage: 'de', loader: { provide: Tra ...

Utilizing the reduce() function to simultaneously assign values to two variables from data input

Looking to simplify the following function using reduce(), as the operations for variables selectedEnrolled and selectedNotEnrolled are quite similar. I attempted to use map(), but since I wasn't returning anything, it led to unintended side effects ...

Typescript decorator specifically designed for abstract generic Container class's child elements

Struggling with Typescript generics in my project, specifically with Typescript 2.6. My goal is to design a MobX store that implements a class decorator for basic authentication checks. This decorator should take a class type derived from the abstract gen ...

Retrieve every item in a JSON file based on a specific key and combine them into a fresh array

I have a JSON file containing contact information which I am retrieving using a service and the following function. My goal is to create a new array called 'contactList' that combines first names and last names from the contacts, adding an &apos ...

Error message when running `ng serve` - tips for troubleshooting?

I recently retrieved an older angular project (about 6 months old) that I wanted to use as a template. However, when I attempt to run it, I encounter the errors mentioned below. After doing some research online and reading through a few links, I found sugg ...

After updating to ionic-native 2.5.1, encountering TypeScript Error TS1005 in Ionic 2

After updating to the latest version of ionic-native (2.5.1) in my ionic 2 project, I am encountering Typescript errors when running "ionic serve" in my terminal. I have attempted to update the typescript version to 2.x but to no avail. Any assistance woul ...

Encountering numerous TypeScript errors due to a JavaScript file in Visual Studio 2017

Kindly review the update below I utilized the following package as a foundation for my VS Project -> https://github.com/AngularClass/angular2-webpack-starter Everything ran smoothly in Visual Studio Code, but when I attempted to convert it into a Visu ...

Validating data in rows of a table using Angular 2

One of the challenges I'm facing is figuring out how to properly validate controls that are contained within a table row. Here's an example of the HTML code: <tr *ngFor="let items of myList"> <input class="form-control" [ngModel]="item. ...

Looking to retrieve HTML elements based on their inner text with queryselectors?

I am looking to extract all the HTML divs that contain specific HTML elements with innerText = ' * ' and save them in an array using Typescript. If I come across a span element with the innerText= ' * ', I want to add the parent div to ...

Angular Input Validation for Multiple Entries

Has anyone else tried creating a validator that checks for duplicate email addresses in a list? I am attempting to implement this feature where the validator takes an email address from a text input and compares it against a list of emails. The code snipp ...

Safari is encountering an issue with the value provided for the width/height attribute in the <svg> element, as it is not a recognized

When adjusting the size of an SVG based on antd breakpoints, I encountered errors like these. I am passing props to an SVG element: const { lg } = useBreakpoint(); const height= lg ? "8rem" : xs ? "3rem" : "5rem"; const width ...

What are the steps to reduce the node version?

How can I downgrade my npm version from 16.13.1 to 12.0.1? Any guidance would be greatly appreciated! Thank you in advance. ...

Having trouble making API calls from the NextJS endpoint

While attempting to access an external API endpoint in NextJS, I encountered the following error message: {"level":50, Wed Jan 24 2024,"pid":4488,"hostname":"DESKTOP-S75IFN7","msg":"AxiosError: Request ...

Sending Text Input Data from Angular Form to a Restful API

I'm currently working on a project where I need to send data from a reactive form to a REST API running on my local express.js server. The form consists of basic text input fields like name, surname, and email. When the form data is submitted, it is ...

Guide to incorporating d.ts file for enhancing intellisense in VS Code using a method akin to the NPM approach

In my nodejs project (in JS), I find myself relying heavily on node global variables. Despite receiving warnings against using globals, everything works well except for one thing: The lack of intellisense for globals. Every time I need to use a global fu ...

solution for downloading large files from authenticated endpoint that works across multiple web browsers

I'm currently on the lookout for a solution to download large files (around 2 - 4 GB) from a bearer token protected api endpoint that is compatible with all common browsers including IE 11, Chrome, Firefox, Android Browsers, and Safari. I want it to w ...

Utilizing Angular 2 for Element Selection and Event Handling

function onLoaded() { var firstColumnBody = document.querySelector(".fix-column > .tbody"), restColumnsBody = document.querySelector(".rest-columns > .tbody"), restColumnsHead = document.querySelector(".rest-columns > .thead"); res ...

Issue detected in Angular 2 Heroes Tutorial: The element with the selector "my-app" was not found in the document

Currently, I am in the process of following along with the Heroes tutorial on the official angular website. The project was created using CLI and everything seemed to be working smoothly up until Part 6 on Routing: https://angular.io/tutorial/toh-pt5 In ...