The index falls outside the acceptable range

I've encountered a problem with the Tone.Analyzer in Safari 10.1. When setting the Tone.Analyzer with a size > Math.pow(2, 10) (1024), I'm faced with the following error: 

IndexSizeError (DOM Exception 1): The index is not in the allowed range.

I've raised this issue on the ToneJS repository as well, but it seems like more of a bug in Safari, doesn't it?

Code

import Tone from 'tone';

const sampleSize = Math.pow(2, 13); // Math.pow(2, 10); works...

this.fft = new Tone.Analyser('fft', sampleSize);
this.panVol = new Tone.PanVol().fan(this.fft).toMaster();

Link to WebpackBin example

However, I couldn't find any information online regarding which browser supports which size, but the Tone.js documentation states that 

the Value must be a power of two in the range 32 to 32768.
(Same as in the Web Audio API documentation)

Could it be that Safari's Audio APIs don't support larger sizes in getByteFrequencyData? I would like to use a very precise equalizer, but the sample size needs to be greater than 4000 for the lower frequencies.

javascriptsafariweb-audio-api

Answer №1

In the initial draft of the WebAudio specification, it was stated that the largest FFT size for the AnalyserNode was 2048. However, subsequent versions revised this limit to be at least 32k. It is worth noting that Safari has not yet updated to implement the new limit and still follows the old restriction.

Answer №2

Dealing with a similar problem here. While I am not utilizing Tone.js, I have found that Safari 11's AudioContext.analyser.fftSize is capped at 2048, which is not sufficient for my needs as I require a maximum of 32K. Oddly enough, the same code runs smoothly on Chrome on my Apple Desktop.

As a workaround, it seems I may have to resort to incorporating a JS FFT library like the one found at https://github.com/audioplastic/ooura. While I have yet to test the JS version, the C version comes highly recommended. Ideally, I would prefer leveraging webRTC for both Time domain and Frequency domain sampling and computation. This approach would not only be more robust for the future, but also a lighter solution overall.

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

Is there a way to generate random numbers that will create a chart with a general upward trend?

Are you looking for a solution to generate random numbers for charts that trend upwards and to the right? I am currently utilizing a JavaScript charting engine, so I will require numbers in JSON format eventually. However, I am open to alternative methods ...

javascriptjsonmathrandom

I am looking to gather user input in JavaScript and then showcase that input on the webpage. What would be the best

I am currently learning Java and I decided to challenge myself by creating a hangman game. The issue I am facing is that when the user inputs a letter, nothing happens - there is no output indicating whether the guess was correct or incorrect. I suspect th ...

javascript

Is there a library available that can assist me in writing JavaScript code within C#?

Currently, I am in search of a tool that can assist me in writing C# code that will automatically convert to JavaScript. The main benefits I am seeking are improved code-completion and type-safety. Specifically, I am interested in the following features: ...

c#.netjavascript

What is the process for indicating the cache directory in npm5 when using the install command?

When using yarn, you can specify the cache folder with yarn --cache-folder [CACHE_FOLDER]. Is there an npm5 alternative to this? One option is to set the cache folder with a separate command: npm config set cache [CACHE_FOLDER]. However, I'm wonderin ...

javascriptcachingnpmnode-modules

What is a sophisticated method to hide an element from view?

My dilemma involves a dropdown menu and a list of elements that are initially set to hidden using CSS. When an item is selected from the dropdown, it becomes visible. However, I am struggling with finding a way to revert the previously selected element b ...

javascriptjqueryhtmlcssdisplay

What are some strategies for creating a recursive function in JavaScript that avoids exceeding the maximum call stack size error?

I need assistance creating a walking robot function in JavaScript, but I am encountering a call stack size error. function walk(meter) { if(meter < 0) { count = 0; } else if(meter <= 2) { count = meter; ...

javascript

What is the reason for having getDerivedStateFromProps as a static method?

Currently, I haven't started working on the static getDerivedStateFromProps method, so I am looking to gain more insight about it. I am aware that React has deprecated componentWillReceiveProps in React v16+ and introduced a new lifecycle method call ...

javascriptreactjsreact-native

Unable to access the camera page following the installation of the camera plugin

The issue I'm encountering involves using the native camera with the capacitor camera plugin. After implementation, I am unable to open the page anymore - clicking the button that should route me to that page does nothing. I suspect the error lies wit ...

javascripttypescriptionic-frameworkionic4capacitor

I am currently facing a challenge in animating my ng-show/ng-hide animation

This particular issue has been widely recognized and discussed multiple times in various forums. Despite the extensive search, I have not come across satisfactory solutions. var aniApp = angular.module("aniApp", []); aniApp.controller('mainCtrl&ap ...

javascriptangularjsng-animate

Identifying errors in a React component upon loading

As I delve into my project, my main focus lies on detecting errors within a component. The ultimate goal is to seamlessly redirect to the home page upon error detection or display an alternate page for redirection. I am seeking a programmatic solution to ...

javascriptreactjs

Align a collection of images in a grid format on the center of the page with

I am trying to center a div that contains multiple 145px X 145px thumbnail images without setting a fixed width. The goal is to have as many images in each row as the browser window can fit. However, I want to keep the images left-aligned within the center ...

javascripthtmlcssdynamiccenter

Struggling with the alignment of pictures inside a container

I utilized the Instafeed.js library to fetch the three most recent images from an Instagram account. These images are loaded into a specific div and I successfully customized their styling according to my requirements. However, the current setup is quite s ...

javascripthtmlcsswordpress

Protractor - selecting a button within a table

Following the HTML code provided below, there is a table containing a list of test site links with a delete button next to each test site. /* Element locators in the table */ var testSiteLinks = element.all(by.css('a[ui-sref^="testpages"]')); ...

javascriptangularjsprotractorangularjs-e2e

The behavior of the select menu is erratic when interacting with AJAX

My dropdown menu is populated dynamically based on AJAX response: function populateDropdown(dropdownNum) { // invokeWebService using $.ajax json = invokeWebService("GET", "/webservice/dropwdownOptions"); optionsHtml = ""; $.each(json, function(count, jsO ...

javascriptjqueryajax

The code functions correctly when retrieving information from a file, however, encounters issues when retrieving data

While working on my React application, I encountered a situation where I needed to read the value for translation from a file stored in the public folder. The files were saved at https://i.sstatic.net/oWXCh.png However, due to the dynamic nature of our d ...

javascriptreactjsreact-nativeinternationalizationi18next

Issue with Vue parent component's inability to listen to event emitted by child component

Child component is triggering a custom event: <template> <div id="controls-container" class="controls-container"> <div class="control-button icon-zoom-in" @click="zoomHandler('+')"></div> <div class="control- ...

javascriptvue.js

Dependencies in Angular 2 are essential for efficient functioning

Let's examine the dependencies listed in package.json: "dependencies": { "@angular/common": "2.2.1", "@angular/compiler": "2.2.1", "@angular/core": "2.2.1", "@angular/forms": "2. ...

javascriptangularnpm

Showing content from a JavaScript variable once a button has been clicked

Imagine you are using express.js and have a JavaScript variable embedded in an ejs file like this: <%= someVariable %> How can you display the value from this variable on the same page, for instance within a bootstrap modal element (check out https: ...

javascripthtmlnode.jsexpressejs

Ways to implement variables in Jade that are transmitted through res.render

Firstly, I would like to apologize for any errors in my English. In my router file, I have the following code: exports.index = function (req, res) { res.render('./game/main', {name:req.session.name, menuOp:'Home'}); } Additionally, ...

javascriptnode.jspug

Implementing auto-population of input field in Vue JS based on dropdown selection

I'm in search of a solution for automatically filling input fields in Vue.js. My form consists of various input types such as text, select dropdowns, and quantities. I want the vCPU, vRAM, and Storage Capacity fields to be filled with predefined value ...

javascriptvue.jsvuejs3