javascript - IOS上的HTML5音频:currentTime怎么会小于初始值?
问题描述
我必须播放一小段较大的音频。我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 秒。
解决方案
起初你有一个错误的问题,因为你希望你的脚本在 iOS 上工作。因此,您的标题问题无关紧要。我们在 iOS 上有很多错误,iOS 开发人员不想更正它们。这是一个错误。写信给 iOS 的支持人员并在那里询问“这怎么可能?”。
其次,您的帖子中有两个问题,因为您的脚本不能像您想要的那样在 iOS 上运行。
我为你写了解决方案。确保您没有在音频元素加载元数据之前尝试调用音频(第一个错误)。然后你有第二个错误:而不是:
if(audio.currentTime < start || audio.currentTime > end) //your mistake
你必须写:
if(audio.currentTime >= end)
解决方案(它也适用于 iOS)
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}
<!--
For this link from your example (on jsfiddle.net) is only a download is possible, but not using as source:
http://techslides.com/demos/samples/sample.m4a
-->
<audio id="audio" preload="auto">
<source src="http://techslides.com/demos/samples/sample.mp3" type="audio/mpeg"/>
<source src="http://techslides.com/demos/samples/sample.ogg" type="audio/ogg"/>
<source src="http://techslides.com/demos/samples/sample.aac" type="audio/aac"/>
</audio>
<button id="button" disabled style="width:9em;height:3em;font-size:3em">Play</button>
<br><br>
<div id="log"><div><hr></div></div>
SO 上的代码段不起作用,因为它在沙箱中。
请参阅codepen.io 上的这个工作示例。
推荐阅读
- css - 如何动态改变 react-native 的风格?
- flutter - 如何在 Flutter 中使用 ListTile 导航到新页面/路由?
- excel - 使用 Excel PowerQuery 查询时有效的 OData 失败
- xpath - 用于提取可能在元素中并且可能仅在元素中的名称的 xPath 查询
- javascript - Javascript 网站上的预填表格
- r - 从R中的给定向量字符串中提取字符串
- neo4j - 升级到 4.0.3 后 Neo4 网页界面仍然是空白页面
- spring-cloud-dataflow - Spring Cloud 数据流授权仅配置
- c# - 当http请求超时时重试多次使用polly c#
- c# - 动态回调方法