开发者社区> 余二五> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:
+关注继续查看

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

   接着上次的讲,对于企业的建站,现在大多数都是使用公司中成熟的类库构架网站的速度不是你能想象的,就拿我所在的现在的公司吧,算是郑州比较大的了,一个上十万的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,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
仿网易云项目笔记
仿网易云项目笔记
0 0
制作超美的个人网页(附源码带音乐
制作超美的个人网页(附源码带音乐
0 0
如何制作吸睛网站?
全网最系统的色彩搭配指南,教你制作吸睛网站
0 0
Unity制作即时战略游戏毕设
创建项目 双击Unity,选择New Project:我们将它命名为rts,悬着其他本地磁盘例如C:,选择3D然后点击Create Project: 然后我们通过File->Save Scene,保存当前的场景为“scene”(不需要“”) 摄像机 Unity会自动添加相机到工程中。
1328 0
手把手教你做一个电影网站 可直接在线播放
现在大家在网上看电影很方便了,因为电影网站多如牛毛!那很多人在想,做电影网站难么?能否拥有一个属于自己的电影网站呢?其实真的可以,而且很简单下面我们就来手把手的教你如何做一个电影网站!因为我的空间是PHP的,只能选择PHP CMS,影视网站的CMS有很多,飞飞、苹果、海洋、PHPVOD等等,之所以...
11313 0
音乐发烧友必备听歌神器foobar2000-可视化音乐配置
前言 foobar2000是一种高级音频播放器。对于音乐发烧友来说应该并不陌生。本文主要介绍foobar2000结合shpeck插件实现可视化音乐。 FB2K的优点大概有以下几个: 强大到没朋友的扩展性; 良好的可靠性; 方便的工具管理。
2717 0
Unity开发游戏 flapybird 无广告老马版分享
Flapybird确实是一款非常好玩的游戏,但是上手难度比较大。经过老马模仿加工,把游戏难度降低,而且不加入任何广告。 特此分享。下载地址:http://files.cnblogs.com/fly_dragon/flapybirdLaoma.apk
417 0
如何用ipad制作精美的视频,并发布到视频网站
          当节日来临的时候,我们有时候会想做一些视频送给女朋友或是同学。下面介绍一种简单用ipad的视频制作方法。 1.首先推荐使用会声会影软件,在appstore里就有下,而且免费。下载里面的一些视频模板。 2.上传需要插入的照片以及背景音乐。 3.将制作完的视频渲染到ipad的相机胶卷里。 4,提取ipad中的视频。不要通过itunes,直接pad连上电脑。打开我的电
654 0
2012年最佳免费网站和移动应用 PSD 界面素材揭晓
  眨眼间,2012年又要过去了,长期关注 WDL 的朋友都知道,每到年末,WDL 将发布一系列本年度 Web 开发和设计领域的最佳资源。今天这篇文章与大家一起分享这一年来设计师们分享的最佳免费 PSD 用户界面素材,包含滑块、表单、按钮、菜单、进度条、播放器等等。
685 0
高清壁纸大全:2013年新年桌面壁纸免费下载【上篇】
  新的一年倒计时已经开始,这篇文章为你带来50张高清的2013年新年桌面壁纸。每个人都将迎来新的征程,祝愿大家在未来的2013年里取得更大的成功,身体健康,生活幸福!今年没实现的愿望在新的一年里都能实现。
669 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
《如何制作一个水平仪》
立即下载
IOS开发者必读资讯
立即下载
《 IOS开发者必读资讯》
立即下载