Javascript iPhone：快进&；使用HTML5回放<；音频>&；回放速率不'；不行？_Javascript_Ios_Html_Audio_Playback

Javascript iPhone：快进&；使用HTML5回放<；音频>&；回放速率不'；不行？

javascript ios html audio

Javascript iPhone：快进&；使用HTML5回放<；音频>&；回放速率不'；不行？,javascript,ios,html,audio,playback,Javascript,Ios,Html,Audio,Playback,我不知道如何在iPhone上对使用HTML5的音频播放器进行简单的快进和快退。所有苹果的文档都说播放速率应该用于此目的。我已经观看了2009年和2010年的WWDC会议，并下载了我能找到的所有示例源代码，但我仍然无法理解这一点。这只是视频吗？那你怎么做倒带和快进按钮呢？下面是一个小测试示例： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd>"> &l

我不知道如何在iPhone上对使用HTML5的音频播放器进行简单的快进和快退。所有苹果的文档都说播放速率应该用于此目的。我已经观看了2009年和2010年的WWDC会议，并下载了我能找到的所有示例源代码，但我仍然无法理解这一点。这只是视频吗？那你怎么做倒带和快进按钮呢？下面是一个小测试示例：

<!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="&gt;">
<input id="rewindbutton" type=button onclick="rewind()" value="&lt;&lt;">
<input id="forwardbutton" type=button onclick="fastforward()" value="&gt;&gt;">
</div>
</body>
</html>


音频播放器
函数pauseButton（）{
var myButton=document.getElementById（“audiobutton”）；
myButton.value=“||”；
myButton.style.opacity=“.2”；
}
函数playButton（）{
var myButton=document.getElementById（“audiobutton”）；
myButton.value=“>”；
myButton.style.opacity=“.5”；
}
函数playPause（）{
var audioElement=document.getElementsByTagName（'audio'）[0]；
if（audioElement.paused）{
audioElement.play（）；
pauseButton（）；
}否则{
audioElement.pause（）；
播放按钮（）；
}
}
var updateProgress=函数（e）{
var percentDone=e.target.currentTime/e.target.duration；
}
函数myAddListener（）{
var audioElement=document.getElementsByTagName（'audio'）[0]；
audioElement.playbackRate=1.0；
addEventListener（'progress'，function（evt）{updateProgress（evt）；}，false）；
addEventListener（'timeupdate'，函数（evt）{updateProgress（evt）；}，false）；
addEventListener（'durationchange'，函数（evt）{updateProgress（evt）；}，false）；
}
函数倒带（）{
var audioElement=document.getElementsByTagName（'audio'）[0]；
audioElement.playbackRate=-3.0；
}
函数快进（）{
var audioElement=document.getElementsByTagName（'audio'）[0]；
audioElement.playbackRate=3.0；
}
音频测试

它似乎适合我

在您的示例中，我必须调整三件事：

<!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元素的帐户

在结束语

标记中输入错误

键入您的

src

属性

如果这对你不起作用，请告诉我