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

Posted 2023-02-25

【中文标题】播放 HTML5 音频标签，但控件未按预期工作

【英文标题】：HTML5 Audio Tag Plays, but Controls Not Working as Expected

【发布时间】：2016-06-10 01:15:40

【问题描述】：

因此，音频标签可以正常工作并播放音频，但搜索/导航不起作用。它不会随音频一起传播，您无法在播放器中搜索/导航。这是 1 分 23 秒的音频剪辑的样子：

另外，当播放器结束时，时间/持续时间是关闭。我不知道还能怎么解释。之后的样子是这样的：

这是播放器的代码：

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

我以前从未真正使用过<audio> 标签，所以我可能遗漏了一些细微差别，但它看起来很简单。我错过了什么吗？

---

编辑 - 更多详情

我添加了JSFiddle。此外，这似乎发生在较长的音频剪辑中，因此这可能与带宽有关。当剪辑只有几秒钟（

【问题讨论】：

什么是浏览器用来获得这种奇怪的行为？您是否尝试过其他浏览器（只是看看它是否与浏览器相关）？您是否尝试过使用不同的 mp3 源（只是为了确保原因不是损坏的 mp3）？

你能把它加到小提琴里让我们自己看吗？

@LouysPatriceBessette - 我试过不同的浏览器，同样的事情。使用 JSFiddle 链接和使用的 URL 更新了初始帖子（这是 Twilio API 记录）。

@RachelGallen - 完成！

【参考方案1】：

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

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

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

这是JSFiddle

【讨论】：

这绝对是一个 Twilio 问题。有趣的是它以wav 格式工作。

【参考方案2】：

我在不知道发生了什么的情况下遇到了这个问题，并花了几个小时寻找答案。我的 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;
  

【参考方案3】：

如果您将 preload 更改为 'none' 而不是 'auto' 它可以正常工作

查看fiddle 或运行 sn-p

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

【讨论】：

它仍然不能解释“自动”上的奇怪行为，我承认，但它有效！

它似乎只适用于短于 5 分钟的音频剪辑。上面的任何东西都有同样的问题。这无疑为我提供了很好的指导，让我了解如何修复它。

@Andrew 我刚刚尝试了超过 10 分钟的声音文件，它完美运行jsfiddle.net/RachGal/qxhrtwza 您的问题很可能是由 twilio api 中的错误引起的，而不是与音频有关文件或标签

是的，它可能是 twilio。我在同一页面中多次调用它。我将在这方面多花一些时间，看看我能找到什么。

还是找不到

【参考方案4】：

我刚刚发现了这个提示here：

注意，在最新的 HTML5 规范中，预加载取代了自动缓冲。以前 autobuffer 采用布尔值指定是否要提前缓冲文件。目前，浏览器正在从自动缓冲过渡到预加载，因此我们建议您暂时使用这两个属性。

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

<audio controls preload="auto" autobuffer>

见updated fiddle

【讨论】：

好主意，但它似乎也不起作用。我想这可能是因为我在同一页面中加载了多个音频剪辑。

【参考方案5】：

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

也就是说，在 Audacity 程序中，如果您将 mono 录音导出为 MP3 stereo 录音，它在程序中仍以 mono 的形式显示b> 录音，但文件大小保持与 立体声录音相同。

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

【参考方案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>

【讨论】：

感谢您的回答:)

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。