复选框网上点歌时,总算实现连播了

最新推荐文章于 2021-02-10 19:39:07 发布

原创最新推荐文章于 2021-02-10 19:39:07 发布 · 673 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #button #function #html #object #jsp

jsp 同时被 2 个专栏收录

59 篇文章

订阅专栏

javascript

58 篇文章

订阅专栏

本文介绍了一个基于HTML和JavaScript的音乐播放器连播功能实现方案，包括下一曲、上一曲操作及播放器状态监测。通过定时器解决播放器停止后的下一曲播放问题。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>   

<head>   

<title>

</title>

<script language="javascript" for="MediaPlayerObject" event="playStateChange(NewState)">  

switch (NewState) {     // 监听播放器的状态来实现连播

   case 1:       

         //alert("");        

        break;       

   case 2:         

       //alert("Paused");         

        break; 

   case 3:        

         //alert("Playing");           

        break;     

   case 8:       

          //alert("stopped");   

//WMP停止播放后，还要进行一些处理，所以要延时再调用PlayMusic()，如果直接PlayMusic()，WMP会无反    应。这是实现连播的关键，当播放停止时运行 PlayMusic()实现播放下一曲           

        setTimeout("PlayMusic();",1000);

        break;        

   default:      

           //alert(NewState.toString());          

         break; }



</script>

 <script language="javascript">

 function PlayMusic()  // 下一曲 

{    

 var player = document.getElementById("MediaPlayerObject");    

 var index = PlayListSelect.selectedIndex + 1;  

   if (index > PlayListSelect.options.length -1)   

     {           

      index = 0;         

     } 

	PlayListSelect.selectedIndex = index;  

    player.URL = PlayListSelect.options[index].value;   

     //alert(player.URL);

    player.controls.play(); 

}



function PlayLast()   // 上一曲

 {     

var player = document.getElementById("MediaPlayerObject");    

 var index = PlayListSelect.selectedIndex - 1;    

 if (index <0)      

   {      

   index = PlayListSelect.options.length-1;     

    }     

 PlayListSelect.selectedIndex = index; 

 player.URL = PlayListSelect.options[index].value;     

   //alert(player.URL);   

  player.controls.play();

  } 

</script>    

 </head>  

 <body onload="PlayMusic()">    <!-- 初始-->      

   <object id="MediaPlayerObject" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" style="width: 300px; height:240 px;">                  

        <param name="DisplayBackColor" value="0xffffff">            

        <param name="DisplayForeColor" value="16777215">             

        <param name="rate" value="1">           

        <param name="balance" value="0">                

        <param name="currentPosition" value="0">             

        <param name="defaultFrame" value>                 

        <param name="playCount" value="1">                      

		<param name="autoStart" value="-1">                    

		<param name="currentMarker" value="0">                   

		<param name="invokeURLs" value="-1">        

		<param name="baseURL">                  

		<param name="volume" value="75">                  

		<param name="mute" value="0">                    

		<param name="uiMode" value="full">                

		<param name="stretchToFit" value="-1">                   

		<param name="windowlessVideo" value="0">                      

		<param name="enabled" value="-1">                   

		<param name="enableContextMenu" value="-1">                   

		<param name="fullScreen" value="0">             

		<param name="SAMIStyle">                  

		<param name="SAMILang">                

		<param name="SAMIFilename">                       

		<param name="captioningID">                  

		<param name="enableErrorDialogs" value="0">               

		</object>



        <br>                 ---连播列表---                 <br>            

		 <select multiple="true" id="PlayListSelect">               			

		   <option value="http://ok.99lover.com/playktv.asp?playid=12753">Love Love Love</option>                    <option value="http://ok.99lover.com/playktv.asp?playid=10132">爱的主打歌</option>                        <option value="http://ok.99lover.com/playktv.asp?playid=12657">爱情36计</option>          

		 </select> <br>    

		 

		 <button onclick="PlayMusic()">下一曲</button>  

		 <button onclick="PlayLast()">上一曲</button>



        </body>

		</html>

附件: 通用db+jsp音乐连播.rar(邮箱中)

未完善功能, 初始就可以播放一首歌,上一曲,下一曲的功能... (现已经完善,)