如何在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类型有关

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

此外，对于音频/视频媒体，MIME类型不会告诉您很多信息：您不能100％确定容器（由MIME类型声明）真正包含的内容，就很可能将其编码为浏览器无法解码的编解码器，即使将其包装在浏览器中应该知道。

这意味着，即使一个简单的HEAD请求可以告诉您某些URL，服务器将在Content-Type标头中发送的内容，也无法告诉您浏览器是否能够播放它。而且鉴于大多数服务器仍然不允许您阅读这些标头，因此不值得尝试实施此标头。

您的情况最好是尝试播放。

所以您可以将代码重写为

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();

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

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