Failed to execute 'createScriptProcessor' on 'BaseAudioContext': buffer size (13307982) must be 0 or a power of two between 256 and 16384.

[nikakhachi]

Hi ! I am trying to get a real time bpm for the uploaded file in my React application. However, the Error below is what I get.

EDIT : I get the reason of the error, but the file is valid, I can slice it into different chunks and play them, so I can say that the file is not spoiled. I don't understand how I can convert the existing arrayBuffer to make createScriptProcessor like it

Error :

Main.js:73 Uncaught (in promise) DOMException: Failed to execute 'createScriptProcessor' on 'BaseAudioContext': buffer size (13307982) must be 0 or a power of two between 256 and 16384.
    at Socket.<anonymous> (http://localhost:3000/static/js/bundle.js:1048:50)
    at Socket.Emitter.emit (http://localhost:3000/static/js/bundle.js:13328:20)
    at Socket.emitEvent (http://localhost:3000/static/js/bundle.js:93155:16)
    at Socket.onevent (http://localhost:3000/static/js/bundle.js:93140:12)
    at Socket.onpacket (http://localhost:3000/static/js/bundle.js:93096:14)
    at Manager.Emitter.emit (http://localhost:3000/static/js/bundle.js:13328:20)
    at Manager.ondecoded (http://localhost:3000/static/js/bundle.js:92610:10)
    at Decoder.Emitter.emit (http://localhost:3000/static/js/bundle.js:13328:20)
    at Decoder.add (http://localhost:3000/static/js/bundle.js:93733:15)
    at Manager.ondata (http://localhost:3000/static/js/bundle.js:92600:18)

Version :

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"realtime-bpm-analyzer": "^2.1.6",

Code :

const audio = document.createElement("audio");
audio.src = window.URL.createObjectURL(uploadedFile);
audio.volume = 0.5;
audio.play();
audio.addEventListener("timeupdate", (e) => setCurrentAudioTime(e.path?.[0]?.currentTime || e.explicitOriginalTarget.currentTime));
audio.addEventListener("ended", () => setIsMusicEnded(true));
updateAudioPlayer(audio);
//
const audioContext = new AudioContext();
const source = audioContext.createMediaElementSource(audio);
const scriptProcessorNode = audioContext.createScriptProcessor(uploadedFile.size, 1, 1);
scriptProcessorNode.connect(audioContext.destination);
source.connect(scriptProcessorNode);
source.connect(audioContext.destination);
const onAudioProcess = new RealTimeBPMAnalyzer({
  scriptNode: {
    bufferSize: uploadedFile.size,
  },
  pushTime: 2000,
  pushCallback: (err, bpm) => {
    if (err) return console.log(err);
    console.log("bpm", bpm);
  },
});
scriptProcessorNode.onaudioprocess = (e) => {
  onAudioProcess.analyze(e);
};

In the upper code, uploadedFile is a blob. I also tried converting it to arrayBuffer to its size property (I know the number would be the same, but I still tried), but I have same error.