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

Question

因此，音频标签可以正常播放音频，但 seek/navigation 不起作用。它不随音频传播，您不能 seek/navigate 通过播放器。这是 1 分 23 秒音频剪辑的样子：

此外，当播放器播放完毕后，time/duration 关闭。我不知道还能怎么解释。这是之后的样子：

这是播放器的代码：

<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

我刚找到这个提示 here :

Note preload supercedes autobuffer in the latest HTML5 spec. Previously autobuffer took a boolean value specifying whether the file is to be buffered in advance. Currently, browsers are making the transition from autobuffer to preload so we suggest that you use both attributes for the time being.

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

<audio controls preload="auto" autobuffer>

见updated fiddle

Answer 3

我运行在不知道发生了什么的情况下投入其中，并花了数小时寻找答案。我的 MP3 文件长度超过 30 分钟，在 Firefox 上 MP3 控件运行良好，但在 Chrome 中我无法使 seek/forward 控件工作。

尝试此页面的 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 中工作，但那是另一回事了。如果我让它适用于移动版本，我会 post 更新 :)

更新：

在 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

我运行也喜欢这个。这是一个 Twilio mp3。这似乎是 Twilio 的 mp3 文件格式或响应 headers 的问题。 mp3 被识别为流。这也可能是故意的。

一个简单的修复 - 只需切换到文件的 wav 版本。使用“.wav”作为扩展名（或将其关闭，默认为 wav）。

<audio controls preload="auto">
  <source src="https://api.twilio.com/<account>/Recordings/<recording>.wav">
</audio>

这是一个JSFiddle

Answer 5

我在通过 HTML5 <audio> 播放器播放 MP3 文件时遇到了类似的问题。某些文件在 WIN7 中的 Mozilla 上有效，但在某些 Android 设备上无效。

也就是说，在 Audacity 程序中，如果您将 mono 录音导出为 MP3 stereo 录音，它在程序中仍然可见单声道录音，但文件大小与立体声录音相同。

嗯，这样的 MP3 文件在我播放时出错（在 Android 设备上）。

Answer 6

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

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

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

HTML5 Audio Tag Plays, but Controls Not Working as Expected

html

audio

twilio

html5-audio