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.