iPhone: Fast Forward & Rewind using HTML5 <audio> & playbackRate doesn't work?
Question
I can't figure out how to do a simple fast forward and rewind on the iPhone for an audio player using HTML5. All the Apple documentation says that the playbackRate should be used for this. I have watched the WWDC 2009 and 2010 sessions on this and downloaded all the example source code I can find but I still can't figure this out. Is this only for video? How do you do rewind and fast forward buttons then? Here is a small test example:
<!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>
1 answers
solution1
2 2011-06-28 02:49:45
It seems to work for me.
Three things I had to tweak in your example:
<!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/>
were changed to:
<!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/>
Details
- Change your
doctypeto account for using HTML5 elements - Typo in your closing
Ptag - Typo in your
srcattribute
Please let me know if this doesn't work for you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.