My task is to fetch an audio/wav file from an API call, store it in redux state and on button click play it.

1. I have the following redux saga generator function fetching it and creating a blob right now:

export function* getAudioSaga () {
    try {
        const headers = {
            Accept: 'audio/wav',
        };
        const options = {
            headers,
            method: 'GET',
        };
        const audio = yield call(fetch, GET_AUDIO_API, options);
        const blob = yield audio.blob();
        const url = URL.createObjectURL(blob);

        yield put(getAudioSuccess(url));
    } catch (error) {
        yield put(getAudioError(error));
    }
}

2. With getAudioSuccess action I save the created url into the redux state and I simply pass the stored url to a helper function:

export const playAudio = (url: string) => {
    const audio = new Audio(url);
    audio.play();
};

Right now I get an error if I try to use this generated blob url: Uncaught (in promise) DOMException: Failed to load because no supported source was found.

Any help would be appreciated!