【第二期】如何制作属于自己网站的音乐播放器

大家好，欢迎喜欢我的朋友继续关注我的技术文章，话说现在的东西越来越快了，更新的不是你所想象的到的。

接着上次的讲，对于企业的建站，现在大多数都是使用公司中成熟的类库构架网站的速度不是你能想象的，就拿我所在的现在的公司吧，算是郑州比较大的了，一个上十万的OA 大概三天的时间就可以出来了，再大一点的，上百万的项目，也就是一个多月，不到十个人就可以完成，PS：算上测试的时间。所以中国的机械化生产企业OA，在这种大环境下展现的淋漓尽致。一般刚毕业的应届毕业生进企业，大部分是不可能和企业接轨的，这里你也就能理解其中的原因了吧。

像我这样的能有这样的机会的毕竟还是少数，就看你够不够努力和能不能遇到自己生命中的那个所谓的“贵人”了，毕竟有人愿意带起一个毛头小子的事情在大企业中是不多见的。所以有机会的时候请务必要好好的珍惜。

好了，说了这么多，下面开始今天的知识讲解：

建站的时候要关注的东西很多，注意事项也很多，要认识到你是要给网络上的千万人看，所以一定要一步步的完善各个模块的功能，后台要注意的地方很多，今天先不说，主要是怕大家看得乏味，所以先给大家讲些好玩的，一些前台的东西，对于UI的展示来说，其实技术含量不高，但是其实关乎着你网站的访问命运，对吧？嘿嘿，那么就给大家介绍如何编写属于自己的网站音乐播放器。51CTO的音乐播放器很强大也好好用，不过对于快速发展的网络，似乎有些跟不上脚步了。这里我写出一些自己的想法，或许可以给51CTO提供一些建议吧，我想。

播放器的选择：

大部分的技术人都是用一些比较实在的做法就是，

  <object id=nstv classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6' width=280 height=60 codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701standby=Loading Microsoft? Windows Media? Player components... type=application/x-oleobject> 
 <param name='URL' value='your.mp3'> 
 <PARAM NAME='UIMode' VALUE='full'><PARAM NAME='AutoStart' VALUE='false'> 
 <PARAM NAME='Enabled' VALUE='true'> 
 <PARAM NAME='enableContextMenu' VALUE='false'> 
 </object> 
======

缺点：添加过多的音乐会使空间变慢，如果被迅雷之类的瞄上空间会死掉。这些音乐盒的东西不是几行代码就能实现的，还要看你的网站是否支持这类功能。

我也是找了好久最后发现的Dewplayer,如下图，

选择它的原因不光是因为它很PL，确实做的相当不错，还有一个原因是开源，便于学习和应用。

播放器的使用：

下载下来之后是这个样子，如下图，

这里有很多种可供大家选择，首先说明一下，大家可以自己决定是否使用js的引用方法去使用播放器，本人测试过，用js也可以，只需要用记事本查看下载的网页源码，把它放到自己的网页中，其中属性也可以随意的添加，很方便，不过缺点是加载的时候很慢，之后就无碍了。考虑到大众网速，这一点着实让我捏了一把汗，毕竟你已经在用音乐播放器了，再加上js的调用，亚历山大。

所以今天教给大家几种适中的方法能最大程度的保证你网站的正常访问，XML的存储：

可以注意到此播放器是提供xml播放列表的存储的，所以非常方便，也不必须用数据库了，之前我也试过用数据库存储，效果确实也实现了，下面是代码，

1.添加Repeaterbind一下：

 <div>
                                 <asp:Repeater ID="MusicRepeater" runat="server" OnItemCommand="MusicRepeater_ItemCommand"> 
                                     <HeaderTemplate> 
                                         <table style="height: 16px; width: 232px"> 
                                             <tr> 
                                                 <td> 
                                                     歌名 
                                                 </td> 
                                                 <td> 
                                                     选择 
                                                 </td> 
                                             </tr> 
                                     </HeaderTemplate> 
                                     <ItemTemplate> 
                                         <tr> 
                                             <td> 
                                                 <%#Eval("MusicName")%> 
                                             </td> 
                                             <td> 
                                                 <asp:LinkButton ID="btnChoose" runat="server" CommandName="choose" CommandArgument='<%#Eval("ID") %>'>[Play]</asp:LinkButton> 
                                             </td> 
                                         </tr> 
                                     </ItemTemplate> 
                                     <FooterTemplate> 
                                         </table> 
                                     </FooterTemplate> 
                                 </asp:Repeater> 
                             </div> 
 <object type="application/x-shockwave-flash" width="250" height="65" id="dewplayer" 
                                     data="music/jsmusic/dewplayer-playlist-cover.swf"> 
                                     <param name="wmode" value="transparent" /> 
                                     <param name="movie" value="music/jsmusic/dewplayer-playlist-cover.swf" /> 
                                     <param name="flashvars" value="showtime=true&amp;autoreplay=true&amp;xml=music/jsmusic/playlist.xml"> 
                                     <param name="flashvars" value="mp3=<%=Url %>&amp;autostart=1&amp;showtime=1&amp;randomplay=1 " /> 
                                 </object> 

2..cs界面代码:

 //绑定Music列表
         protected void bindMusic() 
         { 
             L_Music lm = new L_Music(); 
             MusicService ms = new MusicService(); 
             MusicRepeater.DataSource = ms.Recommanddataset(); 
             MusicRepeater.DataBind(); 
         } 
//绑定MusicRepeater
         protected void MusicRepeater_ItemCommand(object source, RepeaterCommandEventArgs e) 
         { 
             if (e.CommandName == "choose") 
             { 
                 MusicService ms = new MusicService(); 
                 L_Music lm = new L_Music (); 
                 lm = ms.get_singleMusic(Convert.ToInt32(e.CommandArgument.ToString())); 
                 Url = lm.MusicAddress.ToString(); 
                                                                                                                                                                                                                               
             } 
         } 

3.这样可以实现后台数据库的控制列表操作，效果如下图，

播放器的使用2：

如果是使用XML的绑定，那就轻松很多了，前台几乎不用写代码就可以实现播放和列表的选择显示，以及各种播放设置，在此举一例说明：

1.源页面代码：

 <%--页面音乐--%>
                 <div class="music"> 
                     <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
                         <ContentTemplate> 
                             <div> 
                                 <object type="application/x-shockwave-flash" data="music/jsmusic/dewplayer-playlist.swf" 
                                     width="240" height="200" id="dewplayer" name="dewplayer"> 
                                     <param name="wmode" value="transparent" /> 
                                     <param name="movie" value="music/jsmusic/dewplayer-playlist.swf" /> 
                                     <param name="flashvars" value="showtime=true&autoreplay=true&xml=XML/xmltodataset.xml&amp;autostart=1&amp;showtime=1&amp;randomplay=1 " /> 
                                 </object> 
                             </div> 
                             <div> 
                             </div> 
                         </ContentTemplate> 
                     </asp:UpdatePanel> 
                 </div> 

2.这样就可以实现所需的功能了，是不是很简单，不过要注意几点：

2.1.路径一定要选择物理路径（相对路径），value的值用&连接；

2.2.建议加一个Ajax，局部刷新不影响音乐的播放。

3.效果图，

4.上面的效果是不是很不错呀，那就赶快试试吧，至于后台对于列表信息的管理，无非就是XML的增删改查的功能，这里暂时不给大家贴出来，后面讲到增删改查的时候，我会慢慢讲。

总结，这些属性大家可以都自己尝试一下，可以更加完善自己的播放器，这款开源的播放器真的很不错，至少我的网站现在用的就是，目前各方面都正常运行，希望我的一些想法能够帮助到你，并且能够影响你，好了，明天还要上班，今天就到这里吧，大家晚安！

Options

All options can be added to the parameters flashvars="option1=value1&option2=value2" or after the .swf file URL dewplayer.swf?option1=value1&option2=value2.

Default volume	volume=100	With value between 0 = silent and 100 = maximal
Auto start	autostart=true	Plays automatically when the player is loaded
Loop play	autoreplay=true	Plays the same file at the end of the playing
Random play	randomplay=true	For the players with multiple loaded MP3s
Timer minutes:seconds	showtime=true	Display the durations in mm:ss
No cursor	nopointer=true	Disable the cursor on the seek bar
Playlist	xml=playlist.xml	Load the XML playlist (XSPF format) for players that can load multiple files
Fading	fading=3	No gap (seconds) between one track and the next one, for players that can support fading