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

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

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

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

播放器的选择：

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

<code><</code><code>object</code> <code>id=nstv classid=</code><code>'CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6'</code> <code>width=280 height=60 codebase=http:</code><code>//activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701standby=Loading Microsoft? Windows Media? Player components... type=application/x-oleobject></code>

<code><param name=</code><code>'URL'</code> <code>value=</code><code>'your.mp3'</code><code>></code>

<code><PARAM NAME=</code><code>'UIMode'</code> <code>VALUE=</code><code>'full'</code><code>><PARAM NAME=</code><code>'AutoStart'</code> <code>VALUE=</code><code>'false'</code><code>></code>

<code><PARAM NAME=</code><code>'Enabled'</code> <code>VALUE=</code><code>'true'</code><code>></code>

<code><PARAM NAME=</code><code>'enableContextMenu'</code> <code>VALUE=</code><code>'false'</code><code>></code>

<code></</code><code>object</code><code>></code>

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

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

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

播放器的使用：

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

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

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

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

1.添加Repeaterbind一下：

<code> </code><code><asp:Repeater ID=</code><code>"MusicRepeater"</code> <code>runat=</code><code>"server"</code> <code>OnItemCommand=</code><code>"MusicRepeater_ItemCommand"</code><code>></code>

<code> </code><code><table style=</code><code>"height: 16px; width: 232px"</code><code>></code>

<code> </code><code><%#Eval(</code><code>"MusicName"</code><code>)%></code>

<code> </code><code><asp:LinkButton ID=</code><code>"btnChoose"</code> <code>runat=</code><code>"server"</code> <code>CommandName=</code><code>"choose"</code> <code>CommandArgument=</code><code>'<%#Eval("ID") %>'</code><code>>[Play]</asp:LinkButton></code>

<code><</code><code>object</code> <code>type=</code><code>"application/x-shockwave-flash"</code> <code>width=</code><code>"250"</code> <code>height=</code><code>"65"</code> <code>id=</code><code>"dewplayer"</code>

<code> </code><code>data=</code><code>"music/jsmusic/dewplayer-playlist-cover.swf"</code><code>></code>

<code> </code><code><param name=</code><code>"wmode"</code> <code>value=</code><code>"transparent"</code> <code>/></code>

<code> </code><code><param name=</code><code>"movie"</code> <code>value=</code><code>"music/jsmusic/dewplayer-playlist-cover.swf"</code> <code>/></code>

<code> </code><code><param name=</code><code>"flashvars"</code> <code>value=</code><code>"showtime=true&amp;autoreplay=true&amp;xml=music/jsmusic/playlist.xml"</code><code>></code>

<code> </code><code><param name=</code><code>"flashvars"</code> <code>value=</code><code>"mp3=<%=Url %>&amp;autostart=1&amp;showtime=1&amp;randomplay=1 "</code> <code>/></code>

<code> </code><code></</code><code>object</code><code>></code>

2..cs界面代码:

<code>//绑定Music列表</code>

<code> </code><code>protected</code> <code>void</code> <code>bindMusic()</code>

<code> </code><code>L_Music lm = </code><code>new</code> <code>L_Music();</code>

<code> </code><code>MusicService ms = </code><code>new</code> <code>MusicService();</code>

<code> </code><code>MusicRepeater.DataSource = ms.Recommanddataset();</code>

<code> </code><code>MusicRepeater.DataBind();</code>

<code>//绑定MusicRepeater</code>

<code> </code><code>protected</code> <code>void</code> <code>MusicRepeater_ItemCommand(</code><code>object</code> <code>source, RepeaterCommandEventArgs e)</code>

<code> </code><code>if</code> <code>(e.CommandName == </code><code>"choose"</code><code>)</code>

<code> </code><code>MusicService ms = </code><code>new</code> <code>MusicService();</code>

<code> </code><code>L_Music lm = </code><code>new</code> <code>L_Music ();</code>

<code> </code><code>lm = ms.get_singleMusic(Convert.ToInt32(e.CommandArgument.ToString()));</code>

<code> </code><code>Url = lm.MusicAddress.ToString();</code>

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

播放器的使用2：

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

1.源页面代码：

<code> </code><code><div </code><code>class</code><code>=</code><code>"music"</code><code>></code>

<code> </code><code><asp:UpdatePanel ID=</code><code>"UpdatePanel1"</code> <code>runat=</code><code>"server"</code><code>></code>

<code> </code><code><</code><code>object</code> <code>type=</code><code>"application/x-shockwave-flash"</code> <code>data=</code><code>"music/jsmusic/dewplayer-playlist.swf"</code>

<code> </code><code>width=</code><code>"240"</code> <code>height=</code><code>"200"</code> <code>id=</code><code>"dewplayer"</code> <code>name=</code><code>"dewplayer"</code><code>></code>

<code> </code><code><param name=</code><code>"movie"</code> <code>value=</code><code>"music/jsmusic/dewplayer-playlist.swf"</code> <code>/></code>

<code> </code><code><param name=</code><code>"flashvars"</code> <code>value=</code><code>"showtime=true&autoreplay=true&xml=XML/xmltodataset.xml&amp;autostart=1&amp;showtime=1&amp;randomplay=1 "</code> <code>/></code>

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

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

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

3.效果图，

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

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

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

Fading

fading=3

No gap (seconds) between one track and the next one, for players that can support fading

本文转自吴雨声 51CTO博客，原文链接：http://blog.51cto.com/liangxiao/1263203，如需转载请自行联系原作者

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

继续阅读

主流浏览器四大综合性能测试

JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明三、函数的调用

请求超时VUE axios重新再次请求

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

layui多任务上传添加进度条