首页  ·  知识 ·  前端
js控件mideaplayer播放器(控制页面音乐播放)
不详    综合  编辑:德仔   图片来源:网络
要用到一个音乐播放器,要能够单项播放.多首自动连播 因为先前没做过这方面的.所以走了不少弯路

要用到一个音乐播放器,要能够单项播放.多首自动连播
因为先前没做过这方面的.所以走了不少弯路

现记录下过自己的经历
播放器代码
<!--播放器 开始-->
 <object id="Exobud" style="width: 273px; height: 64px" type="application/x-oleobject"
  classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
  <param name="URL" value=""/>
  <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" value=""/>
  <param name="volume" value="80"/>
  <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="0"/>
  <param name="fullScreen" value="0"/>
  <param name="SAMIStyle" value=""/>
  <param name="SAMILang" value=""/>
  <param name="SAMIFilename" value=""/>
  <param name="captioningID" value=""/>
  <param name="enableErrorDialogs" value="0"/>
  <param name="_cx" value="7223"/>
  <param name="_cy" value="1693"/>
 </object> <!--播放器 结束-->
1 单项播放很简单,这里粗略的说一下
 通过网页传参在后台cs页面绑定一个变量
html
<param name="URL" value="<% = Url%>"/>
cs
public string Url;
Url = 从数据库中读取

2 让播放器播放多首歌曲并循环播放呢
思路就是建一个播放列表,然后通过js来控件.

第一种方法 (此方法最终行不通)
建立一个数组相当于播放列表alist(假设这是用户选择歌曲后的结果)
js
var num = 0
function Onload(){
var Exobud = document.getElementById("Exobud");
Exobud.URL = alist[num];
Exobud.controls.play();
num ++;
}
通过PlayStateChange监听播放状态 ,8表示播放结束
<script for="Exobud" EVENT="PlayStateChange(stats)">
if(stats == 8)
Exobud.URL = alist[num];
Exobud.controls.play();
//alert(Exobud.URL);
num ++
</script>
到此播放正常,当播放下一首歌的时候就定住了.非要手动去点播放.不知道是何原因?
在网上查,有一仁兄弟好像解决过这问题,说是放第二首歌的时候,仍然是在第一首歌的播放状态下,所以就一直是停的.
解决办法,就是每首歌只播放一次,但不知道改那里.播放器参数中每首歌是设的播放一次.
另一种办法就是加一个alert(Exobud.URL);这样就可以自动播放,但总弄个弹窗不好吧.
到现在还没弄明白是么回事.如有人知道请留言跟贴,帮我解决一哈.

第二种方法.现已解决.能正常使用. 思路就是用setTimeout()不停的循环,然后控件播放列表的索引得到值来改变URL

先建立一个播放列表
假设用户所选的歌曲参数已传过来
播放列表如下
<select name="SongList" size="5" >
        OnDblClick="player();">
            <option value="songs/001.mp3">001</option>
            <option value="songs/002.wma">002</option>
            <option value="songs/003.WMV">003</option>
            <option value="songs/004.mp3">004</option>
            <option value="songs/005.wma">005</option>
 </select>
同时设置几个按钮
<a href="#" onclick="javascript:play();">on</a>
<a href="#" onclick="javascript:Last_OneOK();">last</a>
<a href="#" onclick="javascript:Next_OneOK();">next</a>

js
<script language="JavaScript">
        //var server='http://localhost/music/';
        var SongList = document.getElementById("SongList");
        var Exobud = document.getElementById("Exobud");
        var TotalSongs = SongList.options.length;
        function play()
        {
        SongList.options[0].selected=true;
        player();
        }
        function player(){
      if(SongList.selectedIndex < 0) alert('系统错误,请选择您要播放的曲目!');
      else{
      var url;
      url = SongList.options[SongList.selectedIndex].value;
      Exobud.URL=url;
      //alert(TotalSongs);
      Exobud.controls.play();
      showTLab();
      return;
      }
        }
   
        function showTLab(){
      if(Exobud.playState == 1)
      Next_OneOK();
      setTimeout("showTLab()", 1000);
        }
   
        function Next_OneOK(){
      if(SongList.selectedIndex >= 0){
      if(SongList.selectedIndex < TotalSongs-1){
       SongList.options[SongList.selectedIndex + 1].selected = true;
        player();
      }else{
       SongList.options[0].selected = true;
        player();
      }
       }
         }
         function Last_OneOK(){
      if((SongList.selectedIndex > 0) && (SongList.selectedIndex < TotalSongs)){
      SongList.options[SongList.selectedIndex - 1].selected = true;
      player();
         }
         }
    </script>

这样问题就解决了.
注音乐文件都是我本地的

附上media player的一些控制方法

posted on 2008-09-16 12:13 XY.52hz.net 阅读(642) 评论(4)  编辑 收藏 网摘 所属分类: ASP.NET

评论:
#1楼 2008-11-21 18:53 | 185[未注册用户]
楼主 ..js抱错....
能否发份没错的代码
andrew1987.hi@163.com

  回复  引用    
#2楼[楼主] 2008-11-22 12:16 | XY.52hz.net      
@185
晕很那里有错啊,下面给你我页面完整的代码 自己好好看吧
============
<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/components/Right.Master"
Codebehind="DataMonitor.aspx.cs" Inherits="WQ.DataMonitor" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolderPwd" runat="Server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script language="javascript" type="text/javascript">
window.onerror = function(){return true;} //JS中遇到脚本错误时不做任何操作
////根据复选框来看是否播放声音
function ManageSoundControl()
{
var soundControl = document.getElementById("eb1");
if(document.getElementById("checkbox1").checked==true )
{
soundControl.controls.play();
}
else
{
soundControl.controls.stop();
}
}

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args)
{

// if (args.get_error() != undefined)
// {
window.onerror = true; //JS中遇到脚本错误时不做任何操作
// }

}


</script>

<script language="javascript" type="text/javascript"
for="eb1" event="PlayStateChange(stats)">//控制页面加载时候是否播放声音
if( stats == 3 )
if (document.getElementById('checkbox1').checked==true )
eb1.controls.play();
else
eb1.controls.stop();
//alert(Exobud.URL);
</script>

<table width="100%" height="175" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" style=" background-image:url(images/szjc_a_19.gif); background-repeat:no-repeat;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="58" style="width: 367px">&nbsp;
</td>
<td>&nbsp;
</td>
</tr>
<tr>
<td style="width: 367px; height: 80px;">&nbsp;
</td>
<td valign="top" style="text-align: left; height: 80px;">
<span class="style2">欢迎使用水质自动监测系统,请选择左侧菜单进行操作。<br/>
<font color="#ffae7e" >橙色</font>背景表示该项目值超过定义值上限。<br/>
<font color="#69c3e9">蓝色</font>背景表示该项目值超过定义值下限。 </span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<input id="checkbox1" checked="checked" onclick="javascript:ManageSoundControl();" type="checkbox" name="checkbox1" />声音预警
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>

<%-- <asp:CheckBox ID="CheckBox1" runat="server" Text="声音报警" Checked="true"/>--%>
<asp:GridView ID="gvData" runat="server" PageSize="<%# common.GlobalSettings.PageSize %>"
Width="100%" BorderColor="#D9E1F1" AutoGenerateColumns="False" BorderStyle="Solid"
DataKeyNames="rptdataid,ipadd,rptid" OnRowDataBound="gvData_RowDataBound" OnDataBound="gvData_DataBound">
<Columns>
<asp:BoundField DataField="测站号" HeaderText="测站号">
<ItemStyle CssClass="gridViewRowItem" Width="7%" />
<HeaderStyle CssClass="gridViewHeader" />
</asp:BoundField>
<asp:BoundField DataField="测站名" HeaderText="测站名">
<ItemStyle CssClass="gridViewRowItem" Width="7%" />
<HeaderStyle CssClass="gridViewHeader" />
</asp:BoundField>
<asp:BoundField DataField="报文时间" HeaderText="报文时间">
<HeaderStyle CssClass="gridViewHeader" />
<ItemStyle CssClass="gridViewRowItem" Width="7%" />
</asp:BoundField>
<asp:BoundField DataField="水温" HeaderText="水温">
<HeaderStyle CssClass="gridViewHeader" />
<ItemStyle CssClass="gridViewRowItem" Width="7%" />
</asp:BoundField>
<asp:BoundField DataField="电导率" HeaderText="电导率">
<HeaderStyle CssClass="gridViewHeader" />
<ItemStyle CssClass="gridViewRowItem" Width="7%" />
</asp:BoundField>
<asp:BoundField DataField="PH值" HeaderText="PH值">
<HeaderStyle CssClass="gridViewHeader" />
<ItemStyle CssClass="gridViewRowItem" Width="7%" />
</asp:BoundField>
<asp:BoundField DataField="溶解氧" HeaderText="溶解氧">
<HeaderStyle CssClass="gridViewHeader" />
<ItemStyle CssClass="gridViewRowItem" Width="7%" />
</asp:BoundField>
<asp:BoundField DataField="浊度" HeaderText="浊度">
<HeaderStyle CssClass="gridViewHeader" />
<ItemStyle CssClass="gridViewRowItem" Width="7%" />
</asp:BoundField>
<asp:BoundField DataField="氨氮" HeaderText="氨氮">
<HeaderStyle CssClass="gridViewHeader" />
<ItemStyle CssClass="gridViewRowItem" Width="7%" />
</asp:BoundField>
<asp:BoundField DataField="高锰酸盐" HeaderText="高锰酸盐">
<HeaderStyle CssClass="gridViewHeader" />
<ItemStyle CssClass="gridViewRowItem" Width="7%" />
</asp:BoundField>
<asp:BoundField DataField="溶解有机物" HeaderText="溶解有机物">
<HeaderStyle CssClass="gridViewHeader" />
<ItemStyle CssClass="gridViewRowItem" Width="6%" />
</asp:BoundField>
<asp:BoundField DataField="总磷" HeaderText="总磷">
<HeaderStyle CssClass="gridViewHeader" />
<ItemStyle CssClass="gridViewRowItem" Width="6%" />
</asp:BoundField>
<asp:BoundField DataField="总氮" HeaderText="总氮">
<HeaderStyle CssClass="gridViewHeader" />
<ItemStyle CssClass="gridViewRowItem" Width="6%" />
</asp:BoundField>
<asp:BoundField DataField="叶绿素" HeaderText="叶绿素">
<HeaderStyle CssClass="gridViewHeader" />
<ItemStyle CssClass="gridViewRowItem" Width="7%" />
</asp:BoundField>
<asp:TemplateField HeaderText="详细">
<ItemStyle CssClass="gridViewRowItem" Width="6%" />
<ItemTemplate>
<a href="#" onclick="javascript:document.getElementById('checkbox1').checked=false;document.getElementById('eb1').controls.stop();popUpWindow('STCDDetail.aspx?STNM=<%# Eval("测站名") %>&STCD=<%# Eval("测站号") %>',0,0,window.screen.width,window.screen.height);">
>>></a></ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle BackColor="#E8ECF5" />
<AlternatingRowStyle BackColor="White" />
<HeaderStyle CssClass="gridViewHeader" Height="26px" />
</asp:GridView>

<span style="color:Gray; "> 数据获取时间 <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> &nbsp; </span>

<!--播放器 开始-->
<object id="eb1" style="width:0px; height: 0px" type="application/x-oleobject"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="URL" value='<%=WQ.DataMonitor.getPath() %>'/>
<param name="rate" value="1"/>
<param name="balance" value="0"/>
<param name="currentPosition" value="0"/>
<param name="defaultFrame" value=""/>
<param name="playCount" value="5"/>
<param name="autoStart" value="-1"/>
<param name="currentMarker" value="0"/>
<param name="invokeURLs" value="-1"/>
<param name="baseURL" value=""/>
<param name="volume" value="100"/>
<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="0"/>
<param name="fullScreen" value="0"/>
<param name="SAMIStyle" value=""/>
<param name="SAMILang" value=""/>
<param name="SAMIFilename" value=""/>
<param name="captioningID" value=""/>
<param name="enableErrorDialogs" value="0"/>
<param name="_cx" value="7223"/>
<param name="_cy" value="1693"/>
</object>
<!--播放器 结束-->

</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
<asp:PostBackTrigger ControlID="gvData" />
</Triggers>

</asp:UpdatePanel>
<asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick">
</asp:Timer>
&nbsp;&nbsp;
</td>
</tr>
</table>


</asp:Content>

======================后台给 WQ.DataMonitor.getPath()方法 获得声音路径就可以了

 

player.controls.play(); 播放
player.controls.stop(); 停止
player.controls.pause(); 暂停
player.controls.currentPosition 返回播放文件的当前时间位置(以秒为单位)
player.controls.currentPositionString 时间格式的字符串 "0:32"
player.currentMedia.duration 返回播放文件的总长度(以秒为单位)
player.currentMedia.durationString 时间格式的字符串 "4:34"
player.settings.volume 音量 (0-100)
player.settings.balance 声道,通过它应该可以进行立体声、左声道、右声道的控制。但对应的取值尚不清楚。
player.settings.mute = s 静音(s取值为true和false)
player.closedCaption.CaptioningID 网页中出现字幕的容器的ID
player.closedCaption.SAMIFileName 字幕文件地址
player.playState 返回播放器状态( 3:正在播放,2:暂停1:已停止)

======================================

上面是别人的东西,下面是我项目里的实施实时预警页面的,声音控制

 

<script language="javascript" type="text/javascript">
   ////根据复选框来看是否播放声音
       function ManageSoundControl()
       {
           var soundControl = document.getElementById("eb1");
            if(document.getElementById("checkbox1").checked==true)
          {
                soundControl.controls.play();
            }
            else
            {
                soundControl.controls.stop();
            }
        }
       
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    function EndRequestHandler(sender, args)
    {
       
        if (args.get_error() != undefined)
        {
                   window.onerror = true; //JS中遇到脚本错误时不做任何操作
        }
       
    }

 
</script>

<script for="eb1" EVENT="PlayStateChange(stats)">//控制页面加载时候是否播放声音
if( document.getElementById('checkbox1').checked==true )
eb1.controls.play();
else
eb1.controls.stop();
//alert(Exobud.URL);
</script>

 

 <input id="checkbox1"    checked="checked"  onclick="javascript:ManageSoundControl();"   type="checkbox"   name="checkbox1" />
               

  <param name="URL" value='<%=WQ.DataMonitor.getPath() %>'/>


 

本文作者:不详 来源:网络
CIO之家 www.ciozj.com 微信公众号:imciow
   
免责声明:本站转载此文章旨在分享信息,不代表对其内容的完全认同。文章来源已尽可能注明,若涉及版权问题,请及时与我们联系,我们将积极配合处理。同时,我们无法对文章内容的真实性、准确性及完整性进行完全保证,对于因文章内容而产生的任何后果,本账号不承担法律责任。转载仅出于传播目的,读者应自行对内容进行核实与判断。请谨慎参考文章信息,一切责任由读者自行承担。
延伸阅读