load function doesn't work with blob URL

[ashukumar2001]

Describe the bug
getAudioFromOPFS(currentAudio.id).then((v) => { const audioSource = v || getDownloadLink(currentAudio.download_url, "high"); load(audioSource, { html5: true, autoplay: true, initialMute: false, onend: handleOnEnd, }, }); if ("mediaSession" in navigator) navigator.mediaSession.playbackState = "playing"; });

I have this code for using OPFS to store some audio offline. If the audio is unavailable in OPFS, it will fetch the audio from the source. The issue is that the getAudioFromOPFS function returns a blob URL (eg. blob:http://localhost:3001/1cf18e65-9e51-42f0-818c-6fb851566fad). Initially, the load function doesn't play the music until I click again on the play button, which calls togglePlayPause from useGlobalAudioPlayer hook. And when I change the audio src to remote URL, it works perfectly

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Environment (please complete the following information):

• Browser/ browser version:
• Library version:
• React version:
• Node version:

[E-Kuerschner]

@ashukumar2001 thanks for opening the issue.

And when I change the audio src to remote URL, it works perfectly

So it sounds like if you set the src manually yourself (directly to the audio file) it works fine, but the blob URL format did not load? Is it possible to reproduce this in a sandbox that you can link to the PR?

It's also possible that howler (the underlying audio lib) doesn't support blobs but I won't have time to look into this until a week from now when I have time to dedicate to the project