检查 URL 是否存在并链接到音频文件

Question

I've written a test to validate that an audio (MP3, WAV) is in the correct URL format.

Now I want to check two things:

1. that the URL exists
2. make a head request to make sure that the URL is linking to an audio file

How do I do that? I've yet to find any good JavaScript examples on making head requests.

 // The test being performed if (result.onClose === true) { if(UtilService.isValidUrl(result.url) && UtilService.isValidAudioUrl(result.url)) { console.log('url is valid') } } // In UtilService static isValidUrl(urlToCheck: string) { let url; try { url = new URL(urlToCheck); } catch (_) { return false; } return url.protocol === 'http:' || url.protocol === 'https:'; } // Unsure how to perform the check here static isValidAudioUrl(urlToCheck: string) { const xhr = new XMLHttpRequest(); xhr.open("HEAD", urlToCheck); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { console.log(xhr.status); console.log(xhr.responseText); }}; xhr.send(); // I'd like it to return a boolean value of true or false in isValidAudioUrl if the response header indicates the media type of the URL is audio and exists return false; }

Answer 1

I think your audio URL validation function may look like this. The idea is to check the Content-type response header. For audio files it usually starts with audio (eg audio/mpeg )

function isValidAudioUrl(urlToCheck) {
  return fetch(urlToCheck, { method: 'HEAD', mode: 'no-cors' })
    .then(res => res.ok && res.headers.get('content-type').startsWith('audio'))
    .catch(err => console.log(err.message));
}

// In your code
console.log('validating');

isValidAudioUrl('https://<YOUR_URL>.mp3')
.then(result => console.log(result));