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

时间:2018-07-27 16:07:42

标签: javascript ios ipad html5-audio

我必须播放较大音频的简短片段。我使用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
...

这里是an example

在装有iOS 11.4.1的iPad上进行了测试。此问题仅在约0.3秒的非常短的时间范围内出现。

1 个答案:

答案 0 :(得分:0)

首先,您有一个错误的问题,因为您希望脚本可以在iOS上运行。因此,您的标题问题无关紧要。 iOS上存在许多错误,iOS开发人员不想更正它们。这是一个错误。请写信以寻求iOS支持,并在那里询问“这怎么可能?”。

第二步,您的帖子中有两个问题,因为您的脚本无法按您想要的方式在iOS上运行。

我为您写了解决方案。确保在音频元素加载了元数据之前不要尝试调用音频(第一个错误)。然后您有第二个错误:而不是:

select id, "list&price", "%discount"
  from "Car+Price"
  where "used?" = 1;

您必须写:

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

解决方案(它也适用于iOS)

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();
});
#log
{
    width:100%;
    height:18em;
    overflow-y:auto;
    font:3em 'Courier New';
    background:#069;
    color:#7e0
}
#log div:last-child{display:none}

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

请参见example on codepen.io