爱意满满的作品展示区。
haichong520

一个简单的音乐播放器

  •  
  •   haichong520 ·
    haichong0813 · Jun 5, 2013 · 12338 views
    This topic created in 4732 days ago, the information mentioned may be changed or developed.
    一首歌,一张封面,一段歌词。

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



    求测试,求吐槽,求拍砖
    demo: http://www.xiaoqian.org/project/player/
    Supplement 1  ·  Jun 9, 2013
    github:https://github.com/haichong0813/player
    Supplement 2  ·  Jun 28, 2013
    github已更新:
    1、新增歌曲播放列表
    2、新增歌曲加载进度显示
    3、优化代码和部分细节

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

    我也抄了一抄,哈哈。加了个上传功能。
    aeryen
        23
    aeryen  
       Jun 26, 2013   ❤️ 1
    @manoon 图片右边有一个像素没对齐
    manoon
        24
    manoon  
       Jun 26, 2013
    @aeryen

    发天脖子不疼了,看能调回来不。。。
    haichong520
        25
    haichong520  
    OP
       Jun 26, 2013
    @manoon nice,歌也nice,不过貌似歌词没对上歌曲。。歌词时间戳。。。
    haichong520
        26
    haichong520  
    OP
       Jun 27, 2013
    @manoon 额,貌似你那儿歌词面板又多出一个像素,哈!我发现100%的宽度怎么弄都凑不齐,我有点暴脾气了,用了一招非常恶劣的手段,把控制面板的宽度100%飙到100.1%
    manoon
        27
    manoon  
       Jun 27, 2013
    @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  
       Jun 27, 2013
    最近一直在听痛仰的歌 ,一点进去就是不错 。
    germ
        29
    germ  
       Jun 27, 2013
    真的不错!
    sinchang
        30
    sinchang  
       Jun 27, 2013
    @manoon 不是搞IT想试试,怎么更换歌曲 囧
    manoon
        31
    manoon  
       Jun 27, 2013
    @sinchang

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

    怒赞!

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

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

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

    http://xplayer.sinaapp.com/
    haichong520
        57
    haichong520  
    OP
       Jul 25, 2013
    @xinlinqi 耐斯,歌单不错!握爪!
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1169 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 114ms · UTC 17:56 · PVG 01:56 · LAX 10:56 · JFK 13:56
    ♥ Do have faith in what you're doing.