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

简介:

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

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

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

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

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

播放器的选择

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

1
2
3
4
5
6
7
< 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,如下图,

230140695.jpg



230244865.jpg


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

播放器的使用

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

230556497.jpg

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

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

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

1.添加Repeaterbind一下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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界面代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//绑定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.这样可以实现后台数据库的控制列表操作,效果如下图,

233451144.jpg



播放器的使用2

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

1.源页面代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%--页面音乐--%>
                 <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.效果图,

234606414.jpg


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



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

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

Dewpalyer官网地址:http://www.alsacreations.fr/dewplayer-en.html









本文转自 吴雨声 51CTO博客,原文链接:http://blog.51cto.com/liangxiao/1263203,如需转载请自行联系原作者
目录
相关文章
|
6月前
|
Ubuntu Shell Android开发
微信小游戏跳一跳外挂教程(安卓版)
微信小游戏跳一跳外挂教程(安卓版)
108 0
|
9月前
|
搜索推荐
最新体育赛事直播安装源码下载哪里找
体育直播平台作为人们追逐比赛精彩的重要方式之一,无论是在家中还是在工作场所,体育迷们都可以通过体育直播平台亲临现场般的观赛体验。但是,对于想要搭建平台获取最新体育直播源码的人来说,该如何获取源码呢?本文将为您探讨两种选择。
|
9月前
|
存储 安全
[免费]微课设计零基础入门 | 3.制作微课必备字体的选择与安装
你说,现在当老师可真不容易啊!就拿微课来说吧,硬是把一个个文质彬彬的老师弄得像IT工程师一样,又是破解又是汉化,又是录屏又是剪辑的……居然还有人在说老师每天只工作一天个小时……哎,说多了,都是辛酸泪!
114 0
|
9月前
|
Windows
办公技巧 | 专治PPT在别的电脑上无法播放的神器!
在前面的文章中,不坑老师给大家分享过“解决换电脑后PPT中字体不显示”的办法,不知道大家掌握得怎么样了?
127 0
|
12月前
|
存储 缓存 小程序
微信小游戏制作开发免费学习资料
这份整理的资料很可能是全网最全的关于微信小游戏开发的学习资料了,强烈建议你收藏,因为以后肯定会用到。 这些的教程资料已经帮助过很多人做出了自己的第一款游戏,希望它们还能够继续帮助更多想要做游戏的朋友,进入游戏开发世界的大门。
77 0
|
12月前
|
容器
如何在微信小游戏制作工具中快速的制作一个血条?
如图,添加了两个血条的图片,一个当作背景,一个当作前景,并且把这两个图片放到了一个“血条1”容器中,另外增加了一个“打你丫的”按钮,用来模拟攻击,点击“打你丫的”按钮,血条就会掉血。
150 0
|
12月前
|
数据可视化 程序员 开发者
如何自己制作一个游戏(附免费的游戏开发新手教程)
首先我们来看一下这个问题本身,能问出这个问题的基本上就是新手,小白,零基础,对于游戏开发这个领域没有任何的了解的人。为什么这么说呢?因为只有当你对于一个领域没有任何了解的时候,才会问出这么宽泛的问题。 所以你看,但凡问那种很宽泛的问题的,基本上都是对于这个领域没有任何了解的,也就是新手小白。但是新手小白也没有什么可丢人的,毕竟谁在接触一个新领域的时候不是新手小白呢?
953 0
|
12月前
|
人工智能 移动开发 数据可视化
不会游戏编程还能制作游戏吗?(附无代码游戏制作软件推荐)
在这个时代,你不懂摄影,但是却可以用手机轻松地拍出好看的照片;你不懂图像处理,但是却可以一键让你的照片显示出各种各样的效果;你不懂画画,但是却可以通过语言描述,让 AI 帮助你画出你可能凭借自己永远都无法画出的作品......工具在不断的降低创作的门槛,让越来越多的人能够做一些原本只有少数人才能做到的事。
506 0
|
12月前
|
搜索推荐 开发工具 Android开发
更“大”的微信小游戏制作工具
为什么这么久都不开发新功能了呢?因为人手和资源有限。这个可能跟很多人想的不一样,这个不是微信的产品吗?腾讯公司会没人没资源?大公司的实际情况可能还真跟很多人想的不一样。微信小游戏制作工具背后的团队不大,甚至比你想要的还要小,而且团队除了需要负责这个工具的维护之外,还有很多其它的事情需要处理。
182 0
|
12月前
|
小程序