如何 ajax 在不播放的情况下通过网络加载和验证 mp3 文件？

Question

我们的软件（主要用于学校）和防火墙存在很多问题：我们在我们的资源中使用 mp3，而 mp3 在很多学校防火墙中被阻止。我正在尝试编写一些 js 代码来检测何时发生这种情况，因此我们可以提醒用户（教师）与他们的 IT 部门交谈并使其畅通无阻。

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

所以，我放弃了播放 mp3 的想法。我想做的是通过网络请求一个小的 mp3 文件，然后分析响应的内容，以确保它实际上是一个 mp3 文件，而不是说 html 页面"Sorry, that content is blocked"，或者当有人请求阻止文件时防火墙可能 return 的任何其他东西。

我真的想不出最简单的方法是什么，它可以跨浏览器工作。我正在使用 jQuery，我认为我可以在 jQuery ajax 调用的 "success" 块中做一些事情，以分析我得到的数据回来，检查它是一个 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

第二种方法是 read/decode 帧头（正如 所做的那样），但与第一种方法相比，它要复杂得多。