IOS上的HTML5音频:currentTime如何小于初始值？

Question

我必须播放更大音频的短片段.我currentTime用来设置起始时间点,以及timeupdate在需要时停止音频的事件.

我注意到,尽管有(显然)没有"倒带"动作,但很少有早期timeupdate事件有时currentTime会低于其初始值.

这是代码示例:

var start = 1;
var end = 1.3;
var audio = document.getElementById('audio');
audio.addEventListener('timeupdate', function () {
   console.log(audio.currentTime);
   if (audio.currentTime < start || audio.currentTime > end) {
      audio.pause();
   }
});
audio.currentTime = start;
audio.play();

例如,控制台日志的输出可以是:

1
0.85
0.85
1
1.02
...

这是一个例子.

使用iOS 11.4.1在iPad上测试.此问题仅在非常短的时间范围内出现~0.3秒.

Answer 1

一开始你的问题是错误的，因为你希望你的脚本可以在 iOS 上运行。因此，你标题中的问题是无关紧要的。我们在 iOS 上有很多错误，而 iOS 开发人员不想纠正它们。这是一个错误。写信给 iOS 的支持人员并询问“这怎么可能？”。

其次，您的帖子中有两个问题，因为您的脚本无法像您希望的那样在 iOS 上运行。

我给你写了解决方案。确保在音频元素加载元数据之前您没有尝试调用音频（第一个错误）。那么你就会犯第二个错误：而不是：

if(audio.currentTime < start || audio.currentTime > end) //your mistake

你必须写：

if(audio.currentTime >= end)

解决方案（iOS 也适用）

if(audio.currentTime < start || audio.currentTime > end) //your mistake

if(audio.currentTime >= end)

var start = 1,
    end = 1.3,
    audio = document.getElementById('audio'),
    button = document.getElementById('button'),
    log = document.getElementById('log');


audio.addEventListener('timeupdate', function()
{
   writeLog(audio.currentTime);

   //your mistake: if(audio.currentTime < start || audio.currentTime > end)
   if(audio.currentTime >= end)
   {
      audio.pause();
   }
});

function writeLog(value)
{
    var div = document.createElement('div');
    div.innerHTML = value;
    log.insertBefore(div, log.firstChild);
}

audio.addEventListener('loadedmetadata', function()
{
    audio.pause();
    button.removeAttribute('disabled');
});

button.addEventListener('click', function()
{
    log.insertBefore(log.lastChild.cloneNode(!0), log.firstChild);
    audio.currentTime = start;
    audio.play();
});

SO 上的代码片段不起作用，因为它位于沙箱中。

请参阅codepen.io 上的工作示例。