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

一个简单的音乐播放器

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

    最近闲来无事,手痒痒,基于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  
       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
    痛仰脑残粉发现点进去是公路之歌。不错。
    manoon
        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   ·   实用小工具   ·   1018 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 21:15 · PVG 05:15 · LAX 13:15 · JFK 16:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.