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

新年福利 xiamifav - HTML5 虾米音乐播放器

  •  
  •   reorx ·
    reorx · 2013-02-15 15:21:01 +08:00 · 9925 次点击
    这是一个创建于 4297 天前的主题,其中的信息可能已经有所发展或是发生改变。
    实在不能忍受在 ipad 上用 xiami 的 iphone 客户端,于是做了这样一个小应用:

    http://xiami.reorx.com

    其实就是播放你的音乐库里的所以歌曲啦。

    输入你的虾米 uid 就可以使用,uid 在 “我的虾米” 页面的 url 中,比如我的: http://www.xiami.com/u/932367 ,932367 就是 uid。

    也可以将你的播放列表分享给其他人,加一个 user_id 参数就行:

    http://xiami.reorx.com/?user_id=932367

    现在部署在 heroku 上,貌似速度有点慢,改天放到 duapp 上好了。

    另外,只在 ipad 上测试了,iphone 不知道效果如何,有问题大家找我反馈呀。

    enjoy~
    第 1 条附言  ·  2013-02-16 09:16:43 +08:00
    说明一下,这个东东无法在 firefox 上正常使用,因为 firefox 暂时还不支持 audio 标签播放 mp3 格式的音乐(虾米的流媒体似乎只有 mp3 格式)。想了解更多可以看 mozilla 的文档: https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats#MPEG_H.264_(AAC_or_MP3)
    44 条回复    2014-08-13 01:39:44 +08:00
    andybest
        1
    andybest  
       2013-02-15 16:01:28 +08:00
    每次都要点一下歌曲的名字开始播放吗?
    shuson
        2
    shuson  
       2013-02-15 16:03:41 +08:00
    不错不错,希望再多支持些网站,比如多米 人人音乐什么的
    swulling
        3
    swulling  
       2013-02-15 16:10:17 +08:00
    GOOD
    oumu
        4
    oumu  
       2013-02-15 16:12:06 +08:00
    帅气~忍虾米的 Flash 很久了
    bombless
        5
    bombless  
       2013-02-15 16:41:34 +08:00 via iPad
    在我这里完全打不开>_<

    虾米只能打开三首音乐是挺麻烦的……另外貌似酷我也有些日文歌
    archsocks
        6
    archsocks  
       2013-02-15 16:52:10 +08:00
    GOOD。虾米的播放器flash很费CPU。
    如果做成能播放播放器列表里的歌就更好了,比如做个bookmarklet,在播放器窗口点一下就转到html5播放器。
    wzxjohn
        7
    wzxjohn  
       2013-02-15 17:02:25 +08:00
    弄到SAE上吧。
    bombless
        8
    bombless  
       2013-02-15 17:17:52 +08:00 via iPad
    刚刚看到1ting的html5版播放器不错 http://m.1ting.com/#/album/47007
    reorx
        9
    reorx  
    OP
       2013-02-15 18:17:40 +08:00 via iPad
    @andybest 草草做完,只花了2天时间,我会加入自动播放和播放控制功能的 :)

    @bombless 是页面出不来还是加载错误呢?

    @archsocks 嗯,我研究一下。现在用的虾米手机客户端的接口,所以能很方便获取音乐库的歌曲,播放列表还真不知道在哪能找到呢。

    @wzxjohn SAE 可以部署 tornado 吗?求个邀请码〜
    wzxjohn
        10
    wzxjohn  
       2013-02-15 18:25:24 +08:00
    wzxjohn
        11
    wzxjohn  
       2013-02-15 18:26:25 +08:00
    @reorx 貌似SAE的python已经不需要邀请码了???
    bombless
        12
    bombless  
       2013-02-15 18:35:14 +08:00 via iPad
    @reorx 网速问题^_^
    刚刚又可以了,试了试,效果很不错呢〜
    JTR
        13
    JTR  
       2013-02-15 19:38:05 +08:00 via iPad
    fetch 略慢。。
    我一般听虾米猜很少加心,歌单只有24首。。
    Kaiyuan
        14
    Kaiyuan  
       2013-02-15 19:45:14 +08:00
    问一个问题,怎么暂停?
    我在电脑上操作的,iPhone 可以双击 Home 键左边控制。
    reorx
        15
    reorx  
    OP
       2013-02-15 20:09:07 +08:00 via iPad
    @Kaiyuan 还没加上这个功能,很快会有的

    @JTR 所以这个应用主要是给经常听加心歌曲的人做的呀,不过倒是可以加上播放精选集的功能。
    JwhSir
        16
    JwhSir  
       2013-02-15 20:26:08 +08:00
    @reorx 同感 就是这几个可以改进的地方:能不能如Kaiyuan所说能暂停最好能有进度条 而且在页面最上方有一个音量调节 播放精选集和专辑的功能也很值得期待 不管怎样 这个比原版flash已经有了很大的改进 谢谢你的分享了
    reorx
        17
    reorx  
    OP
       2013-02-15 21:06:22 +08:00 via iPad
    @JwhSir 嗯,会加上暂停/播放控制和精选集、收藏专辑播放。不过我还是打算尽量保持界面和功能的简洁,毕竟在 pc 上有虾米自己的播放器用,没必要替代它嘛。Simple is better :)
    lossdante
        18
    lossdante  
       2013-02-16 00:37:59 +08:00
    不错不错,支持骁爷~
    pansafe
        19
    pansafe  
       2013-02-16 02:34:54 +08:00 via iPad
    太棒了,求追加github链接
    laoyuan
        20
    laoyuan  
       2013-02-16 04:04:01 +08:00
    好东东!!编程我不行,听歌我在行~~分享下我收的200来首歌,摇滚、独立为主
    http://xiami.reorx.com/?user_id=2497091
    http://www.xiami.com/space/lib-song/u/2497091
    paloalto
        21
    paloalto  
       2013-02-16 06:22:14 +08:00
    我这边在 Firefox 中无法播放,点击歌曲名字无反应。firebug中也看不到网络请求。

    Firefox 版本 18.0.2

    Chrome正常。
    SamZeng
        22
    SamZeng  
       2013-02-16 08:45:04 +08:00
    连续多次点击登陆表单上面的“黑圈”,发现表单乱了。可能就我无聊......
    reorx
        23
    reorx  
    OP
       2013-02-16 09:08:41 +08:00
    @paloalto 这是因为 firefox 不支持 audio 标签的 mp3 播放,哎,我忘了交代了,多谢提醒~

    @pansafe 等代码整理好就开源。

    @lossdante <3
    qiukun
        24
    qiukun  
       2013-02-16 09:44:31 +08:00
    @reorx sae 需要申请,秒申 http://python.sinaapp.com/apply
    reorx
        25
    reorx  
    OP
       2013-02-16 10:02:04 +08:00
    @qiukun 谢谢,已申请,等待回复中。
    @laoyuan 歌单很棒,符合我的口味~
    xsmile
        26
    xsmile  
       2013-02-16 11:03:45 +08:00
    有点意思!
    felinx
        27
    felinx  
       2013-02-16 17:40:35 +08:00
    @reorx SAE上不能用Tornado的异步特性,在上面用Tornado几乎没有什么意义。
    reorx
        28
    reorx  
    OP
       2013-02-17 00:01:52 +08:00 via Android
    @felinx 现在好像能用了,文档说 config.yaml 里 worker 设为 tornado 就可以了。不过它的 tornado 版本是 2.1.1,竟不能跟进最新。。

    话说飞龙你怎么知道我这个项目用 tornado 写的,太神了!
    reorx
        29
    reorx  
    OP
       2013-02-17 00:05:55 +08:00 via Android
    @felinx 我二了,一定是看了 Header > <
    felinx
        30
    felinx  
       2013-02-17 10:17:08 +08:00
    @reorx 嘿嘿!
    felinx
        31
    felinx  
       2013-02-17 10:18:15 +08:00
    @reorx 确实我有很久没有关注SAE的最新动态了,现在支不支持就不了解了。
    supersheep
        32
    supersheep  
       2013-02-17 12:09:07 +08:00
    设计的好赞。很想知道 api_proxy/fav_songs 这个接口是怎么抓的。以前自己也做过类似的事情,但是是抓html来分析的,这个看着不像啊,还拿了一些应用中没有用到的专辑封面歌词地址什么的,看着很像官方的感觉。是不是抓了app里的请求然后看到的?
    reorx
        33
    reorx  
    OP
       2013-02-17 23:42:40 +08:00 via iPad
    @supersheep sorry 回复晚了,今天一直在亲戚家。获取歌曲列表的接口就如它名字所说的那样,其实是对虾米已有接口的一个代理,返回数据也没有改动过。这样做是因为受跨域请求的限制,不然整个应用其实都可以是一个静态页面了。设计是偷 ipad 的音乐播放器,取色都是和它一样的呢。。其实前端代码写得很乱,明天把项目开源,还请多指教呀!
    supersheep
        34
    supersheep  
       2013-02-18 10:22:35 +08:00
    @reorx 期待
    reorx
        35
    reorx  
    OP
       2013-02-18 22:20:36 +08:00
    supersheep
        36
    supersheep  
       2013-02-21 15:46:41 +08:00
    赞!
    haichong520
        37
    haichong520  
       2013-02-25 20:53:57 +08:00
    貌似虾米音乐有做防盗链,请教一下楼主怎么越过防线的?
    reorx
        38
    reorx  
    OP
       2013-02-25 21:28:50 +08:00
    @haichong520 虾米的音乐链接的确不能直接跨域加载,我也是误打误撞才发现,当去掉 Header 里的 referer 项时就能加载了,所以我把 audio 标签放在一个没有 src 的 iframe 里面,你懂的~
    regent
        39
    regent  
       2013-02-25 21:33:18 +08:00 via iPad   ❤️ 1
    按钮太小了一点,ipad上面操作不够方便
    reorx
        40
    reorx  
    OP
       2013-02-25 21:51:25 +08:00
    @regent 是说播放控制的按钮吗?的确小了点,主要是没有找到好的 icon,不过应该不影响操作的,如果你按下去不放就会发现,它的有效范围其实是个方形,高度和整个导航条是一样的。另外多谢提议,我会换个更显眼的 :)
    toboy
        41
    toboy  
       2013-03-04 00:09:39 +08:00
    menu弹出的几个按钮,点击没有效果,mac chrome下。
    另外希望支持随机播放等功能,谢谢lz了。
    reorx
        42
    reorx  
    OP
       2013-03-04 08:50:17 +08:00
    @toboy menu 是预留下一步开发的功能的,这两天找工作,所以耽误了。。做好了一定通知你~
    evilever
        43
    evilever  
       2013-05-16 20:30:46 +08:00
    做得真好.
    regent
        44
    regent  
       2014-08-13 01:39:44 +08:00
    能不能更新一下,发现已经失效了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2819 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 14:56 · PVG 22:56 · LAX 06:56 · JFK 09:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.