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

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服务器的dev版本中。 django.views.static.serve中不支持字节范围请求。

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

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