0

I have a local file blob URL of this format: "blob:http://127.0.0.1:1234/6d25b61d-9799-4814-baba-13bb3a988dfd"

which I turn into an audio buffer using fetch() and decodeAudioData , then I play that buffer using Tone.Player, looped indefinitely.

Relevant Code:

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

function tonePlayLocalSound() 
{
    return new Promise((resolve, reject) => 
    {

     fetch(urlName)
     .then(response => response.arrayBuffer())
       .then(buffer => 
       {
            audioCtx.decodeAudioData(buffer).then(audioBuffer => {
            const player = new Tone.Player(audioBuffer).toDestination();
            

// ... irrelevant code here dealing with loop duration skipped ...

        setAudioPlayers((prevAudioPlayers) => [...prevAudioPlayers, player])

        player.loop = true;
        player.start();
        resolve("true")
      )};
    )};
}

Each audioPlayer object is stored in an array: const [audioPlayers, setAudioPlayers] = useState([]) and can be manipulated with other functions later.

I'm calling this function with a button click

<button onClick={handleLocalPlayClick}>Play local sound</button>

For some reason this only works once, with the first sound successfully playing and looping forever, then each call to the function throws a "DOMException: Failed to execute 'decodeAudioData' on 'BaseAudioContext': Unable to decode audio data" (This exact functionality works fine when using multiple Tone.Player instances created using a web URL and not a buffer of .wav data)

I tried using a separate AudioContext for each sound, same issue persists.

function newAudioContext() 
  {
    const AudioContext = window.AudioContext || window.webkitAudioContext;
    const audioCtx = new AudioContext();
    return audioCtx;
  }

Does anyone have insight into this kind of issue? It would be greatly appreciated.

I am wondering if it's something to do with Web Workers handling the blob?


edit: I figured out a different way to accomplish what I needed, but I am still curious if anyone knows why this method didn't work.

  • 3
    Note that you absolutely don't need the FileReader in all that. `Response.arrayBuffer()` is already the `ArrayBuffer` you need. As for your issue, *how* do you call that function multiple times? – Kaiido Feb 22 '23 at 01:25
  • @Kaiido I'm calling it using an HTML button, I edited code posted to add more context. – The doobverse Feb 22 '23 at 02:01

0 Answers0