0

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));
    }
}
  1. 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!

Sengiria
  • 13
  • 3
  • what is the `call` function? I must say, this is the oddest looking method of using fetch I've ever seen though `when it's in the state` what state? what is "it"? what are you passing to `playAudio`? – Bravo Jun 16 '22 at 08:46
  • Why not just use an audio element with a source to play the file? They can be controlled programmatically too afaik. The fetching/url creation doesn't really serve any purpose. Plus you're not supposed to cram huge amounts of data into the redux state. – timotgl Jun 16 '22 at 11:13

0 Answers0