I'm getting a "Uncaught (in promise) DOMException: Failed to load because no supported source was found. Cross-Origin Read Blocking (CORB) blocked cross-origin response https://www.shazam.com/track/501844142/keeps-me-alive.mp3 with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details." when trying to run a JavaScript play() method on a fetched song data from an API.
My html element looks like this <audio id="audio-source" preload="metadata"></audio> and JavaScript function like this
const music = document.querySelector("#audio-source");
const setMusic = (songsArray, i) => {
seekBar.value = 0;
let song = songsArray[i];
currentMusic = i;
music.src = `${songsArray[i].url}.mp3`;
songName.innerHTML = songsArray[i].title;
}.
And I have tried the whole code with local song files/arrays and it works fine(the songs played), but upon ejecting/replacing the songs data from the Shazam Rapid API, I get the above quoted the response on the console. I tried appending mp3 at the end of the audio url or path, the same response. I just want to know how to go about the problem, that's even if the song's url/path is valid.
