[英]iPhone: Fast Forward & Rewind using HTML5 <audio> & playbackRate doesn't work?
我无法弄清楚如何在iPhone上为使用HTML5的音频播放器进行简单的快进和快退。 所有Apple文档都说应该使用playbackRate。 我已经看过WWDC 2009和2010年会议并下载了我能找到的所有示例源代码,但我仍然无法弄清楚这一点。 这仅适用于视频吗? 那你怎么做倒带和快进按钮呢? 这是一个小测试示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd>">
<html>
<head>
<title>Audio Player</title>
<base href=".">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.6, user-scalable=false”">
<meta name="apple-mobile-web-app-capable" content="YES">
<link rel="apple-touch-icon" href="Images/WebClipIcon.png">
<script type="text/javascript">
function pauseButton() {
var myButton = document.getElementById("audiobutton");
myButton.value = "||";
myButton.style.opacity=".2";
}
function playButton() {
var myButton = document.getElementById("audiobutton");
myButton.value = ">";
myButton.style.opacity=".5";
}
function playPause() {
var audioElement = document.getElementsByTagName('audio')[0];
if (audioElement.paused) {
audioElement.play();
pauseButton();
}else{
audioElement.pause();
playButton();
}
}
var updateProgress = function (e) {
var percentDone = e.target.currentTime / e.target.duration;
}
function myAddListener() {
var audioElement = document.getElementsByTagName('audio')[0];
audioElement.playbackRate = 1.0;
audioElement.addEventListener('progress', function(evt) { updateProgress(evt); }, false);
audioElement.addEventListener('timeupdate', function(evt) { updateProgress(evt); }, false);
audioElement.addEventListener('durationchange', function(evt) { updateProgress(evt); }, false);
}
function rewind() {
var audioElement = document.getElementsByTagName('audio')[0];
audioElement.playbackRate = -3.0;
}
function fastforward() {
var audioElement = document.getElementsByTagName('audio')[0];
audioElement.playbackRate = 3.0;
}
</script>
</head>
<body onload="myAddListener()">
<p>Audio Test<p/>
<audio id="myAudio" src="http://fotf.cdnetworks.net/fotf/mp3/fof_daily_broadcast/ffd_2010/2_april_may_june/ffd_20100607.mp3>" controls></audio><br/>
<input id="audiobutton" type=button onclick="playPause()" value=">">
<input id="rewindbutton" type=button onclick="rewind()" value="<<">
<input id="forwardbutton" type=button onclick="fastforward()" value=">>">
</div>
</body>
</html>
它似乎对我有用。
我必须在你的例子中调整三件事:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd>">
...
<p>Audio Test<p/>
...
<audio id="myAudio" src="http://fotf.cdnetworks.net/fotf/mp3/fof_daily_broadcast/ffd_2010/2_april_may_june/ffd_20100607.mp3>" controls></audio><br/>
被改为:
<!DOCTYPE html>
...
<p>Audio Test</p>
...
<audio id="myAudio" src="http://fotf.cdnetworks.net/fotf/mp3/fof_daily_broadcast/ffd_2010/2_april_may_june/ffd_20100607.mp3" controls></audio><br/>
doctype
更改为使用HTML5元素的帐户 P
标签中的拼写错误 src
属性中的错字 如果这不适合你,请告诉我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.