【第二期】如何制作屬于自己網站的音樂播放器 - 該換了

大家好，歡迎喜歡我的朋友繼續關注我的技術文章，話說現在的東西越來越快了，更新的不是你所想象的到的。

好了，說了這麼多，下面開始今天的知識講解：

建站的時候要關注的東西很多，注意事項也很多，要認識到你是要給網絡上的千萬人看，是以一定要一步步的完善各個子產品的功能，背景要注意的地方很多，今天先不說，主要是怕大家看得乏味，是以先給大家講些好玩的，一些前台的東西，對于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多任務上傳添加進度條