HTML 音频无法设置 currentTime答案

【问题标题】：HTML audio can't set currentTimeHTML 音频无法设置 currentTime
【发布时间】：2016-08-30 20:32:14
【问题描述】：

我正在使用 Chrome。在我的开发工具控制台中，我尝试了以下操作：

除最后一行外，一切都按预期工作。为什么我不能在上面设置currentTime？

一般来说，我发现整个 HTML5 音频并不是很可靠。是否有一个强大的 javascript 包装器可以回退到 flash ？

【问题讨论】：

音频有一个 'loadedmetadata' 事件，当 src 被加载时触发
@echopeak 有我可以查看的工作示例吗？我对seek 事件更感兴趣，因为我想从不同的起点播放音频。
能否提供下载音频的链接？
@Rajat “为什么我不能在上面设置currentTime？”无法重现
我也面临同样的问题。它正在处理一段代码，但是当我将它集成到 Django 应用程序中时，它失败了。它适用于 Firefox，但不适用于 Google Chrome。视频/音频文件无关紧要，我在代码上尝试的任何文件都会发生这种情况。我试图寻找的时间少于视频的持续时间。

标签： javascript html audio

【解决方案1】：

currentTime 在媒体尚未播放时使用。

如果媒体还没有播放，currentTime 的值表示在调用 play() 方法后开始播放的媒体中的时间位置。

(https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime#value)

如果您想在播放完音频后返回到开头，请使用load()。

// x.currentTime = 0;
x.load();

(https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/load)

【讨论】：

抱歉，您的第一个确认不正确，并且您误解了文档中的引用。

【解决方案2】：

在我开始使用 VS Code 的 PHP Server 扩展来为我的 HTML/PHP 本地测试提供服务后，我遇到了这个问题。回到旧的 Abysswebserver 设置后，我的问题得到了解决。

因此，这不仅仅是“您不能在本地提供的文件上操作 .currentTime”，而是“您需要选择一个能够为您提供正确标头的服务器”。例如，来自 AbyssWebserver 的文件的状态条目读取“状态代码：206 部分内容”，而来自 PHP 服务器的文件读取“状态代码：200 OK”。

虽然还有其他差异，所以可能不仅仅是状态条目。有关完整的标头比较，请参阅 https://github.com/brapifra/vscode-phpserver/issues/85。

【讨论】：

【解决方案3】：

我的猜测是“10”比你 mp3 的长度长。

但这会记录 mp3 的长度而不是“0”。

【讨论】：

没有。 x.duration 返回31。 Chrome 版本是 50

【解决方案4】：

对我有用的解决方案不是直接设置“src”，而是使用类型属性，也许类型属性在某种程度上帮助浏览器。

【讨论】：

【解决方案5】：

设置currentTime 的唯一解决方案是使用onprogress 事件。

audio.onprogress = function() {
  if (audio.currentTime == 0) {
    audio.currentTime = 10;
  }
}

【讨论】：

这将创建一个无限循环，因为当audio.currentTime = xxx 立即设置为0，导致再次调用audio.onprogress，其中audio.currentTime 再次等于0。然后，一切都将永远重复。

【解决方案6】：

检查您的 HTTP 服务器配置，在我的测试环境（Mac OS 上的 Chrome 69）中，设置 audio element 的 currentTime 属性仅在音频源由HTTP 服务器支持持久连接。

如果你使用的 HTTP 服务器支持持久连接，你会发现（在 Chrome DevTool 中）你的音频源的响应头的 Connection 字段是 keep-alive。相反，如果音频源由不兼容的持久连接服务器提供服务，则响应标头中将有没有连接字段。

你的音源HTTP请求的状态码也是一个参考，206 Partial Content是支持长连接的服务器，200 OK是低级的。 p>

【讨论】：

我可以确认 Web 服务器可能是导致此问题的原因。但是在我的测试环境中，我的本地 DEV 服务器和我的实时服务器在 Response Headers 中都有一个Connection: keep-alive。我看到Status Code: 200 与Status Code: 206 的区别。另外，我在工作的实时服务器中看到了 Accept-Ranges: bytes，我的 DEV 服务器中缺少它。
我必须确保 Accept-Ranges: bytes 出现在响应标头中 - 成功了！
这发生在我从 Spring Boot 2 提供一个小的 mp3 文件时。谢谢你让我头疼！！
感谢@brianarpie，我不得不改变我的 context.Response.Headers.Add("Accept-Ranges", "0-" + size);到 context.Response.Headers.Add("Accept-Ranges", "bytes 0-" + size);所以，是的，我确实在范围字符串的前面附加了字节，这就成功了！我需要指出的一件事是，当我将先前的代码块用于视频流时，我没有遇到问题。奇怪的是，对于音频流，我需要在范围字符串前面添加“字节”。
这行得通...有人可以解释为什么吗？ @brianarpie

【解决方案7】：

我遇到了同样的问题，原因是 mp3 文件中缺少标题，例如：

Content-Length, Content-Range, Content-Type

【讨论】：

对于 Chrome 70，我还需要添加“Accept-Range: bytes”，即使文件很小并且所有内容都通过 init 连接进行了管道传输。
如何在问题中显示的示例中添加此标题？

【解决方案8】：

你需要做这样的事情（如果你使用 jQuery）

$('#elem_audio').bind('canplay', function() {
  this.currentTime = 10;
});

或在 Javascript 中

var aud = document.getElementById("elem_audio");
aud.oncanplay = function() {
    aud.currentTime = 10;
};

此设置背后的原因是您需要确保音频可以播放。

【讨论】：

您也可以使用seeked 事件。 Here is example 在页面末尾。
所以我尝试在将currentTime 更新为10 之前添加x.addEventListener('seeked', function () { x.play() })，结果是一样的。播放音频时，从 0 开始。
@Rajat 我不知道这是否对你有用，但你也尝试了canplaythrough?
@OlgaReal 实际上canplay 有效。我在做.bind('canplay', function() { this.currentTime = 10; this.play() }); 但这不起作用。 play() 需要在处理程序之外。

【解决方案9】：

为什么我不能在上面设置currentTime？

在设置为10 后无法重现currentTime 设置为0。 18.mp3 的持续时间是否小于 10？

var request = new XMLHttpRequest();
request.open("GET", "/assets/audio/18.mp3", true);
request.responseType = "blob";    
request.onload = function() {
  if (this.status == 200) {
    var audio = new Audio(URL.createObjectURL(this.response));
    audio.load();
    audio.currentTime = 10;
    audio.play();
  }
}
request.send();

jsfiddle http://jsfiddle.net/Lg5L4qso/3/

【讨论】：