HTML5音频标签播放，但控件无法按预期工作

Question

因此，音频标签可以正常工作并播放音频，但搜索/导航无法正常工作。它不会随音频一起旅行，您无法通过播放器寻找/导航。这是1分钟和23秒音频剪辑的样子：

此外，当播放器完成时，时间/持续时间关闭。我不知道如何解释它。这就是它之后的样子：

这是播放器的代码：

<audio controls preload="auto">
    <source src="https://third.party.com/file.mp3" type="audio/mpeg">
</audio>

我以前从未真正使用过<audio>标签，所以也许我缺少一些细微差别，但这看起来很简单。我错过了什么吗？

修改 - 更多详情

我添加了JSFiddle。此外，这似乎发生在较长的音频剪辑中，因此这可能与带宽有关。当剪辑是几秒钟（<10秒）时，它似乎在大多数时间都能正常工作。

Answer 1

如果您将preload更改为'none'而非'auto'，则可以正常使用

请参阅fiddle或运行代码段

<audio controls preload="none">
  <source src="https://api.twilio.com/2010-04-01/Accounts/ACaa255ecd514b787c2f0358486f07a106/Recordings/REf5c1e1f1e048894182132ba0ce763183.mp3" type="audio/mpeg">
</audio>

Answer 2

我也遇到了这个问题。这是Twilio mp3。 Twilio的mp3文件格式或响应标头似乎存在问题。 mp3被识别为流。这也可能是有意的。

一个简单的解决方法-只需切换到文件的int版本即可。使用“ .wav”作为扩展名（或不选择扩展名，默认为wav）。

wav

这里是JSFiddle

Answer 3

我在不知道发生了什么事情的情况下遇到了这个问题，花了好几个小时寻找答案。我的MP3文件长度超过30分钟，在Firefox上，MP3控件运行良好，但在Chrome中我无法使搜索/前进控制工作。

在尝试此页面的JSFiddles并进行调试之后，我发现HTML5代码不是问题所在。所以我通过我的ruby on rails后端“send_file”函数跟踪了一种为MP3提供服务​​的方法，它最终在Chrome上运行。我添加了一个“/ stream”路由，并在其控制器中返回了send_file函数。就像这样：

send_file path_to_MP3_file,
  filename: File.basename(path_to_MP3_file),
  type: Mime::Type.lookup_by_extension("mp3"),
  disposition: 'inline',
  stream: true,
  buffer_size: 4096

我必须在初始化程序文件中注册MP3 MIME类型才能使“lookup_by_extension”方法起作用，所以我使用了：

Mime::Type.register "audio/mpeg", :mp3

现在，我一直试图让控件在iOS中运行，但这是另一个故事。如果我让它适用于移动版本，我会发布更新：）

更新：

iOS浏览器上没有时间轴控件与组件的宽度特别相关。将它强制到最小宽度完成了工作，但在狭窄的设备（如iPhone 5）中搞砸了设计。

我最终更改了我的CSS，强制某些webkit-pseudo-elements和样式化为这样：

  audio {
    width: 100%;
    min-width: 280px;
  }

  audio::-webkit-media-controls-timeline {
    display: inline;
  }

  audio::-webkit-media-controls-current-time-display {
    display: flex;
  }

Answer 4

我只是提示这个提示here：

  

注意preload取代了最新HTML5规范中的autobuffer。以前autobuffer接受一个布尔值，指定是否要提前缓冲文件。目前，浏览器正在从autobuffer转换到preload，所以我们建议你暂时使用这两个属性。

所以你应该使用它来强制预加载。

<audio controls preload="auto" autobuffer>

请参阅updated fiddle