html5 audio试验

Media = document.getElementById("media"); 
Media.src="a1.mp3#t=1,2";
Media.playbackRate=2;
Media.autoplay;

<div>
  <audio id="audio1" style="width:25%" controls>Canvas not supported</audio>
</div>
<div>
<input type="text" id="audioFile" value="zuo3.mp3;a1.mp3;ai1.mp3" size="60" autoplay />


</div>
  <button id="playbutton" οnclick="togglePlay();">Play</button>  
  <button οnclick="increaseSpeed();">Increase speed</button>
  <button οnclick="decreaseSpeed();">Decrease speed</button><br />
  <div id="rate"></div>


     <script type="text/javascript">
       // Create a couple of global variables to use. 
       var audioElm = document.getElementById("audio1"); // Audio element
       var ratedisplay = document.getElementById("rate"); // Rate display area


       // Hook the ratechange event and display the current playbackRate after each change
       audioElm.addEventListener("ratechange", function () {
         ratedisplay.innerHTML = "Rate: " + audioElm.playbackRate;
       }, false);




       //  Alternates between play and pause based on the value of the paused property
       function togglePlay() {
        playAudio(audioElm);


         if (document.getElementById("audio1")) {


/**
           if (audioElm.paused == true) {
             playAudio(audioElm);    //  if player is paused, then play the file
           } else {
             pauseAudio(audioElm);   //  if player is playing, then pause
           }
    
*/
         }
       }


       function playAudio(audioElm) {
         document.getElementById("playbutton").innerHTML = "Pause"; // Set button text == Pause
         // Get file from text box and assign it to the source of the audio element 
         var AF=document.getElementById('audioFile').value;
         var b=AF.split(";");
         
         for(var i=0;i<b.length;i++){


            audioElm.src=b[i];
            audioElm.playbackRate=2;
            audioElm.play();
            alert(b[i]);
           
         }
         
       }


       function pauseAudio(audioElm) {
         document.getElementById("playbutton").innerHTML = "play"; // Set button text == Play
         audioElm.pause();
       }


       // Increment playbackRate by 1 
       function increaseSpeed() {
         audioElm.playbackRate += 1;
       }


       // Cut playback rate in half
       function decreaseSpeed() {
         if (audioElm.playbackRate <= 1) {
           var temp = audioElm.playbackRate;
           audioElm.playbackRate = (temp / 2); 
         } else {
           audioElm.playbackRate -= 1;
         }
       }


     </script>
<hr>
<audio id="test" controls loop end="50%" playbackRate="3">
  <source src="a1.mp3" />
  <source src="ai1.mp3" />
</audio>


<hr>


<script type="text/javascript">
Media = document.getElementById("media"); 


Media.src="a1.mp3#t=1,2";
Media.playbackRate=2;
Media.autoplay=true;
Media.currenttime=1;


</script>

<audio id="media" src="http://www.abc.com/test.mp3" controls></audio> 

http://tech.it168.com/a2012/0724/1376/000001376129_2.shtml

http://msdn.microsoft.com/zh-CN/ie/hh377903

在html5里，如何让一个<audio>循环播放4词！

JScript code

var audio = document.createElement("audio");  
    audio.src = "piano/3C.mp3";  
    audio.addEventListener('ended', function () {  
    // Wait 500 milliseconds before next loop  
    setTimeout(function () { audio.play(); }, 500);  
    }, false);  
    audio.play();  

以上代码能够让音频按5毫秒间隔循环播放，现在我只需要循环播放4次，该如何修改？

------解决方案--------------------
var audio = document.createElement("audio"); 
audio.src = "piano/3C.mp3"; 
audio.addEventListener('ended', function () { 
// Wait 500 milliseconds before next loop 
var index = 0;
setTimeout(function () {if(index<4){ audio.play(); index++}}, 500); 
}, false); 
audio.play(); 


这里的index必须设置为全局变量，这是个闭包问题！
var audio = document.createElement("audio"); 
var index = 0;
audio.src = "piano/3C.mp3"; 
audio.addEventListener('ended', function () { 
// Wait 500 milliseconds before next loop 
setTimeout(function () {if(index<4){ audio.play(); index++}}, 500); 
}, false); 
audio.play();