一个简单的音乐播放器 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
haichong520
V2EX    分享创造

一个简单的音乐播放器

  •  
  •   haichong520
    haichong0813 2013-06-05 17:27:05 +08:00 11809 次点击
    这是一个创建于 4515 天前的主题,其中的信息可能已经有所发展或是发生改变。
    一首歌,一张封面,一段歌词。

    最近闲来无事,手痒痒,基于SoundManager做了个简单的音乐播放器,支持歌词同步,调整音量。废话不多说,上图



    求测试,求吐槽,求拍砖
    demo: http://www.xiaoqian.org/project/player/
    第 1 条附言    2013-06-09 16:20:20 +08:00
    github:https://github.com/haichong0813/player
    第 2 条附言    2013-06-28 18:49:56 +08:00
    github已更新:
    1、新增歌曲播放列表
    2、新增歌曲加载进度显示
    3、优化代码和部分细节

    DEMO地址不变,戳上面地址
    57 条回复    1970-01-01 08:00:00 +08:00
    tension
        1
    tension  
       2013-06-05 17:34:12 +08:00
    很小清新啊
    garth
        2
    garth  
       2013-06-05 17:57:51 +08:00
    文艺青年!好像每次进去都是小宇 - 张震岳这首歌!
    haichong520
        3
    haichong520  
    OP
       2013-06-05 18:07:40 +08:00
    @garth Sorry,只有一首歌
    xiamumu
        4
    xiamumu  
       2013-06-05 20:11:27 +08:00
    痛仰脑残粉赞一个~
    farley
        5
    farley  
       2013-06-05 21:29:25 +08:00
    做完整了?
    Xi
        6
    Xi  
       2013-06-05 22:22:26 +08:00
    很喜欢,请问开源不
    liyandong
        7
    liyandong  
       2013-06-05 23:53:05 +08:00
    不错撒
    rayps
        8
    rayps  
       2013-06-06 01:49:47 +08:00
    非常不错,光是UI就能拿满分了,不过我认为播放按钮的点击热区充满整个方格会更好。
    jasya
        9
    jasya  
       2013-06-06 11:30:06 +08:00
    @Xi F12源代码
    liyandong
        10
    liyandong  
       2013-06-06 11:42:57 +08:00
    @jasya 表示index那个什么js混淆了下,然后我一句代码就揭秘了。研究研究 吼吼~~~
    ccbikai
        11
    ccbikai  
    PRO
       2013-06-06 13:06:02 +08:00
    有兴趣研究
    zhy0216
        12
    zhy0216  
       2013-06-06 13:13:49 +08:00
    赞!!!!!
    haichong520
        13
    haichong520  
    OP
       2013-06-06 15:39:11 +08:00
    @Xi 代码整理,敬请关注
    liyandong
        14
    liyandong  
       2013-06-09 20:38:10 +08:00
    http://gengu.olympe.in/ 简单的改了改
    haichong520
        15
    haichong520  
    OP
       2013-06-10 16:39:41 +08:00
    @liyandong 哈哈,不错!
    haiyang416
        16
    haiyang416  
       2013-06-10 16:48:27 +08:00   1
    楼主貌似对音乐播放器情有独钟阿,微小乐一直在听阿。
    Paranoid
        17
    Paranoid  
       2013-06-10 16:56:50 +08:00
    很棒。。
    manoon
        18
    manoon  
       2013-06-14 15:33:07 +08:00
    为什么不来一首一直往南方开?哈哈。
    haichong520
        19
    haichong520  
    OP
       2013-06-14 16:04:34 +08:00
    @manoon 这个可以有,嘿!
    liang996
        20
    liang996  
       2013-06-14 16:50:43 +08:00
    呵呵 简单 有乔布斯的风格
    MasterYoda
        21
    MasterYoda  
       2013-06-14 17:02:41 +08:00
    痛仰脑残粉发现点进去是公路之歌。不错。
    maoon
        22
    manoon  
       2013-06-26 21:26:31 +08:00
    http://rec.soundfrag.com

    我也抄了一抄,哈哈。加了个上传功能。
    aeryen
        23
    aeryen  
       2013-06-26 21:52:12 +08:00   1
    @manoon 图片右边有一个像素没对齐
    manoon
        24
    manoon  
       2013-06-26 23:35:11 +08:00
    @aeryen

    发天脖子不疼了,看能调回来不。。。
    haichong520
        25
    haichong520  
    OP
       2013-06-26 23:54:21 +08:00
    @manoon nice,歌也nice,不过貌似歌词没对上歌曲。。歌词时间戳。。。
    haichong520
        26
    haichong520  
    OP
       2013-06-27 00:15:42 +08:00
    @manoon 额,貌似你那儿歌词面板又多出一个像素,哈!我发现100%的宽度怎么弄都凑不齐,我有点暴脾气了,用了一招非常恶劣的手段,把控制面板的宽度100%飙到100.1%
    manoon
        27
    manoon  
       2013-06-27 00:43:30 +08:00
    @haichong520 盒盒,没找到现成的lrc。。。。我会告诉你,我是根据自己的感觉手动敲时间么!!!
    这个,是不是有软件可以根据歌曲和文本来生成LRC的?


    ---------------有个小问题,针对IE的话。如果filename不在jquery之后,soundmanager之前获得值。就会很杯具。
    所以你会看到很奇葩的一段小代码。

    <script type="text/Javascript" src="js/jquery.min.js"></script>
    <script type="text/Javascript">var fileName=$("#mp3file").val();</script>///这个,如果放到index.min.js里面IE内核的浏览器会报错。其它浏览器正常
    <script type="text/Javascript" src="js/soundmanager2-jsmin.js"></script>
    sinchang
        28
    sinchang  
       2013-06-27 09:06:15 +08:00
    最近一直在听痛仰的歌 ,一点进去就是不错 。
    saggit
        29
    saggit  
       2013-06-27 12:59:14 +08:00
    真的不错!
    sinchang
        30
    sinchang  
       2013-06-27 13:52:14 +08:00
    @manoon 不是搞IT想试试,怎么更换歌曲
    manoon
        31
    manoon  
       2013-06-27 14:30:13 +08:00
    @sinchang

    index.min.js 里面改FILENAME 和路径。
    haichong520
        32
    haichong520  
    OP
       2013-06-27 16:03:52 +08:00
    @manoon 不能吧,有这么神奇的软件。。。你那什么情况,怎么比我还恶劣的手段都使出来了,= =
    virgil
        33
    virgil  
       2013-06-27 17:24:55 +08:00
    cool...
    biaobiaoqi
        34
    biaobiaoqi  
       2013-06-27 18:11:50 +08:00
    赞UI,有空学习下
    liyandong
        35
    liyandong  
       2013-06-27 22:10:50 +08:00
    声音控制按钮的位置有问题
    isle
        36
    isle  
       2013-06-28 20:37:44 +08:00
    佩服!UI真的很棒!听过《小宇》之后这两天一直在听。今天发现列表里有我喜欢的「逃跑计划」和「达达」~~ o(* ̄ ̄*)ブ
    发现有两点:
    1、播放按钮可点击区域太小了,这几天回家了没带鼠标垫,老是点不上;
    2、音量条调节之后是不是自动收回会好一点,或者点空白区域收回也会舒服些吧;
    3、以上仅仅是个人感觉,我不懂UI的~~ o(* ̄ ̄*)ブ
    Mihuwa
        37
    Mihuwa  
       2013-06-28 20:45:09 +08:00 via iPhone
    真心赞。
    jasonchao
        38
    jasonchao  
       2013-06-28 21:55:02 +08:00
    可否加上“上一首”“下一首”?
    isle
        39
    isle  
       2013-06-28 22:13:51 +08:00
    第一首音乐是《小宇》,歌词和歌名是《公路之歌 》(⊙0⊙)
    haichong520
        40
    haichong520  
    OP
       2013-06-28 22:29:08 +08:00
    @isle 1,2 这个可以有,采纳。 后面小宇还在抢地盘的问题,应该是浏览器缓存。。。清一清更健康。
    yanng
        41
    yanng  
       2013-06-29 17:09:48 +08:00
    听完我也成痛痒粉了。。。
    bjlbeyond
        42
    bjlbeyond  
       2013-06-30 21:42:51 +08:00
    歌曲都是我喜欢的类型,希望多推荐一些歌曲
    ucomeito
        43
    ucomeito  
       2013-06-30 23:12:09 +08:00
    不错
    chshouyu
        44
    chshouyu  
       2013-06-30 23:20:26 +08:00
    果断右键。。不错
    gindis
        45
    gindis  
       2013-07-01 13:31:21 +08:00
    不错~~
    tinyao
        46
    tinyao  
       2013-07-01 16:44:19 +08:00 via Android
    好赞,收藏之
    chaixcy
        47
    chaixcy  
       2013-07-05 03:26:47 +08:00
    nice 收藏啦
    Stof
        48
    Stof  
       2013-07-14 21:36:35 +08:00
    赞一个 看起来不错 可以继续加入功能
    isy
        49
    isy  
       2013-07-14 22:41:09 +08:00
    @haichong520

    怒赞!

    播放器里面的8首歌有5首在我平时的播放列表里,音乐品味相投啊!!

    厚脸皮地推荐 窦唯 的几首歌给你,希望你也喜欢!!!

    《明天更漫长》
    《幻听》
    《出发》
    《暮春秋色》
    《黑色梦中》
    《噢!乖》
    haichong520
        50
    haichong520  
    OP
       2013-07-16 13:36:54 +08:00
    @isy 握爪,nice
    manoon
        51
    manoon  
       2013-07-17 07:51:08 +08:00
    @isy 窦唯的?
    isy
        52
    isy  
       2013-07-17 10:23:12 +08:00
    @manoon
    ksc010
        53
    ksc010  
       2013-07-17 10:54:26 +08:00
    里面的歌不错,喜欢
    manhere
        54
    manhere  
       2013-07-17 11:20:50 +08:00
    @haichong520 音量调节点出来后再点击其他页面空白处不会自动消失,,,
    xinlinqi
        55
    xinlinqi  
       2013-07-24 14:38:40 +08:00
    谢谢LZ!我在你的基础上改了部分代码,放上自己喜欢的音乐,感觉很不错~
    xinlinqi
        56
    xinlinqi  
       2013-07-24 14:39:06 +08:00
    这是我的地址

    http://xplayer.sinaapp.com/
    haichong520
        57
    haichong520  
    OP
       2013-07-25 12:58:58 +08:00
    @xinlinqi 耐斯,歌单不错!握爪!
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     1234 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 29ms UTC 17:21 PVG 01:21 LAX 10:21 JFK 13:21
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86