javascript - 如何通过 ajax 加载并验证网络上的 mp3 文件而不播放它？

Question

我们的软件(主要在学校使用)和防火墙存在很多问题:我们在资源中使用 mp3，而 mp3 在许多学校防火墙中被阻止。我正在尝试编写一些 js 代码来检测何时发生这种情况，以便我们可以提醒用户(教师)与他们的 IT 部门交谈并解除封锁。

我最初尝试播放一段简短的无声 mp3，并检测是否发生了这种情况。但是，你必须跳过这么多的环节才能自动播放音频，尤其是在 iOS Safari 上 - 等待用户交互等，跳圈的东西只会妨碍测试，并使代码认为 mp3 是当它们实际上只是被浏览器而不是网络阻止播放时被阻止。

所以，我放弃了播放 mp3 的想法。我想做的是通过网络请求一个小的 mp3 文件，然后分析响应的内容，以确保它实际上是一个 mp3 文件，而不是一个 html 页面，上面写着“抱歉，那个内容被阻止”，或者当有人请求阻止的文件时防火墙可能返回的任何其他内容。

我实际上无法想象最简单的方法是什么，它可以跨浏览器工作。我正在使用 jQuery，我想我可以在 jQuery ajax 调用的“成功” block 中做一些事情，分析我返回的数据，检查它是否是一个 mp3 文件。

我想到的第一件事就是将数据拉入页面上的 div 中，如下所示:

var url = "/assets/test_media_files/silence.mp3?t="+Math.random();
$("#content-test-file-data").load(url, function(){
  console.log("loaded data");
});

这是有效的，我在 #content-test-file-data div 中有一堆二进制数据乱码。但是，我如何判断这是否是 mp3 文件呢？有更好的方法来做到这一点吗？我是否需要请求具有 mime 类型或类似类型的数据？谢谢

Answer 1

这个 mp3 是你自己生成的吗？在测试文件中添加ID3标签并读取。由于它位于文件末尾(128 字节)，因此可以确保文件已完全到达。 ID3 org

第二种方法是读取/解码帧头(如 here 所做的那样)，但与第一种方法相比，它要复杂得多。