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

一个简单的音乐播放器

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

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

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

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

    怒赞!

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

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

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

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