如何在 Javascript 中检查资源的 MIME 类型？

Question

我正在尝试创建一个函数来检查用户提供的资源，以查看它是否是有效的音频文件。

我在这里找到的所有内容都与上传文件后检查文件 MIME 类型有关。这不是我的目标。

//insert MIME type checking function here
const urlParams = new URLSearchParams(window.location.search);
const audioURL = urlParams('audiourl') // get audiourl from query (example.com/?audiourl=https://example.com/audio.wav)

if (mimetypecheck()) { // function to check mime type here 
    var audio = new Audio(audioURL);
    audio.play();
} else {
    //tell user invalid audio url, or unsupported audio type
}

Answer 1

正如评论中所说，检查资源是否指向某些 可播放 媒体的唯一方法是实际尝试播放它。

MIME 类型不会告诉你太多，而且 audio/video 媒体：
你不能 100% 确定容器（由 MIME 类型声明）真正包含什么，它很可能被编码在浏览器无法解码的编解码器中，即使它包装在浏览器的容器中应该知道。

这意味着即使一个简单的 HEAD 请求可以告诉您某些 URL 服务器将在 Content-Type headers 中发送什么能够播放它。鉴于大多数服务器无论如何都不会让您阅读这些 headers，因此不值得为此付出代价。

对于您的情况，最好尝试播放它。

因此您可以将代码重写为

const urlParams = new URLSearchParams(window.location.search);
const audioURL = urlParams('audiourl') // get audiourl from query (example.com/?audiourl=https://example.com/audio.wav)

const audio = new Audio(audioURL);
audio.onerror = (evt) => {
  //tell user invalid audio url, or unsupported audio type
};
audio.play();

请注意，我们也可以绑定到由 HTMLMediaElement.play() 方法返回的 Promise 的 catch() 方法，但它实际上可能由于其他原因而触发（例如，如果用户从未进行过交互Chrome 之前的页面，或者如果此代码不是直接响应 Safari 中的 user-gesture）。如果您确定只有无效的 URL 可能是播放失败的原因，那么您可以这样做

const audio = new Audio(audioURL);
audio.play().catch( () => {
  //tell user invalid audio url, or unsupported audio type
});

如何在 Javascript 中检查资源的 MIME 类型？

How to check a resource's MIME type in Javascript?

javascript

mime-types