javascript - 使用由 JavaScript 控制的 HTML5 音频时，某些轨道不可搜索

Question

我正在编写一个将歌曲加载到 html 音频标签中并在顶部显示 HighCharts 图表的应用程序，用户可以操纵该图表以根据歌曲提供反馈。我从音频标签控制图表，反之亦然。

我所说的控制是指当歌曲开始播放时，图表开始填充点，当歌曲暂停时，图表的填充也会暂停。当我从音频标签中搜索歌曲时，添加点的位置也发生了变化。我正在使用 HighCharts 的点击事件将歌曲的当前时间设置为 x 轴的值，因为 x 轴代表歌曲的持续时间(以秒为单位)。请参阅下图进行说明。

我的问题是有些歌曲是可搜索的，而有些则不是。我在 Chrome 中运行该应用程序。当我在 Firefox 中运行它时，问题不存在。那么所有的歌曲都是可搜索的。

我设法注意到的是

track.seekable.end(0)

如果存在问题，则始终返回 0；如果问题不存在，则始终返回歌曲的长度。所有轨道不超过 4 分钟，不超过 6 兆字节。

在轨道中寻找我正在使用的图形

click: function(event) {
  track.currentTime = parseInt(event.xAxis[0].value/1000);
}  

Answer 1

我找到了答案。我在我的问题中忘记提及的后端使用 django。问题来自 django 服务器的开发版本。 django.views.static.serve 中不支持字节范围请求。

这可以通过使用 here 中的代码来解决。或者通过代理服务器运行您的应用程序。第一个修复不是那么可取，因为这会更改核心 django 文件，并且如果其他开发人员没有相同的代码，则不会为在同一应用程序上工作的其他开发人员解决问题，因此第二个修复是首选。

请记住，该问题仅存在于开发中，而不存在于生产中。