How to check if the recieved audio src url is working or not?

Question

I have to play song as per user input . My backend is in python which fetches from some api and provides the song source to play to the frontend (reactjs). Some of the links are broken and cannot play. So I need to identify which are broken so that it wud not cause bad UX.

I have tried these workarounds-

• fetch request to the obtained link and if it returns status other than 200 This did not work and provided CORS Not Allowed warning in console and also the request just passed to catch and I was unable to check status in then.

• using play() promise

  var context = new AudioContext();
  var source = context.createBufferSource();
  var audioFile = new Audio();
  audioFile.src= audio['audiosrc'];
  var playPromise = audioFile.play()
  console.log(playPromise);
  playPromise.then(() => {console.log('ok')})
  .catch((err) => {console.log('err')
  console.log(err);
  fetch('https://app.boorish86.hasura-app.io/stream', {
    method: 'POST',
    body: JSON.stringify({
      src: audio['audiosrc']
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8"
    }
  })
  .then(response => response.arrayBuffer())
  .then(response => {console.log(response)    
      context.decodeAudioData(response, function(decodedData) {
      source.buffer = decodedData;
      source.connect(context.destination);
      source.start(0) });
  })
  .catch(err => console.log(err))
  })
  

None of these workarounds help me since I have to pass src to some other react custom play component.Nd this is not happenning on pasing source downt to a child component.

Also checking from oncanplaythrough, canplay , onloadeddata is not working for me . It gives same output for broken as well as non broken links