V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zythum
V2EX  ›  程序员

写了个基于html5的本地音频播放器(虽然很多大牛都写过了),写的东西总想让更多多多人看到的18.

  •  
  •   zythum ·
    zythum · 2011-04-23 21:54:56 +08:00 · 8494 次点击
    这是一个创建于 4945 天前的主题,其中的信息可能已经有所发展或是发生改变。
    同题,今天刚看的FileReader和dataTransfer部分。所以就做了一下。
    本人还是学生,喷子们就止步吧。
    url: http://zythum.free.bg/zplayer
    如果吃的好,还有chrome app 下载:
    url: http://dl.dbank.com/c0y25yize9

    还有就是,仅限firefox及chrome用户。。
    43 条回复    1970-01-01 08:00:00 +08:00
    zythum
        1
    zythum  
    OP
       2011-04-23 21:57:35 +08:00
    有什么bug或者指正的可以写在下面。。。^^
    Sai
        2
    Sai  
       2011-04-23 22:01:14 +08:00
    不支持 Mac 的 FF?选了文件没有出现在 List 中。
    Sai
        3
    Sai  
       2011-04-23 22:01:50 +08:00
    好吧,FF 只支持 ogg⋯⋯
    zythum
        4
    zythum  
    OP
       2011-04-23 22:07:19 +08:00
    好吧。。。。chrome ---mp3 ff----ogg = =。这我没办法的。。。
    zythum
        5
    zythum  
    OP
       2011-04-23 22:07:25 +08:00
    @Sai 好吧。。。。chrome ---mp3 ff----ogg = =。这我没办法的。。。
    xflykkk
        6
    xflykkk  
       2011-04-23 22:08:22 +08:00
    lz应该传chrome的插件中心去
    loading
        7
    loading  
       2011-04-23 22:17:49 +08:00
    好吧,我也要给自己写一个。
    zythum
        8
    zythum  
    OP
       2011-04-24 10:53:08 +08:00
    某同学说在ubuntu 下的ff会有问题。。。但是我距那人有些远。。。也不知道什么报错。。。各位有ubuntu 的大大帮我看下。。谢谢/
    dimlau
        9
    dimlau  
       2011-04-24 10:54:55 +08:00
    楼主啊,您错别字也太多了。
    chone
        10
    chone  
       2011-04-24 10:59:09 +08:00
    Uncaught TypeError: Cannot set property 'innerHTML' of undefined
    _Zplayer.songChange/zplayer/js/index.js:83
    Event.on.rangeTimer.style.width/zplayer/js/index.js:214
    g._handle/zplayer/js/kissy-min.js:76
    g.add.q/zplayer/js/kissy-min.js:74
    Semidio
        11
    Semidio  
       2011-04-24 10:59:57 +08:00
    @dimlau 歌曲名黑色的在这背景图下看不清楚啊,
    reorx
        12
    reorx  
       2011-04-24 11:03:56 +08:00
    @zythum 你没有收到Turkeywzd的邮件吗?我把debug报告发给他了……
    Sion
        13
    Sion  
       2011-04-24 11:40:13 +08:00
    ......FF的那个格式有点冷
    zythum
        14
    zythum  
    OP
       2011-04-24 11:43:48 +08:00
    @chone @reorx Turkeywzd有邮件给我,但是观看那个Cannot set property 'innerHTML' of undefined 实在不知道是哪里的问题。。。。
    因为win上的ff很正常。。。所以。。。也不知道这个错误的触发条件。。。去找个就近的ubtu的主吧。
    @Semidio 已经改过了。。。现在应该看得清楚了。
    @Sion 没办法。。。这不是我能改了。。。我能改我肯定吧所有格式支持了。
    TashinV
        15
    TashinV  
       2011-04-24 13:43:59 +08:00
    不知道可以加点对mac 的safari 的支持不..
    chloerei
        16
    chloerei  
       2011-04-24 13:51:35 +08:00
    不错。

    不知为什么放进音乐之后没播放起来。chrome

    我对显示相关资源那里比较感兴趣
    hfharry
        17
    hfharry  
       2011-04-24 13:55:08 +08:00
    无法安装extension。。。
    zythum
        18
    zythum  
    OP
       2011-04-24 14:03:33 +08:00
    @hfharry 哦,这个是这样的。你先把那个crx文件下载下来(目标另存为到本地),然后拖到chrome上。。。因为这个不是挂在官方webstore上的。所以。。。。抱歉,上面 没说。
    zythum
        19
    zythum  
    OP
       2011-04-24 14:06:56 +08:00
    @TashinV 等safari 什么时候支持读取本地文件了。。。我也是safari用户。。。乔大爷,摆脱了。
    @chloerei 没播放起来。。。手动双击播放列表能不能播放呢? 因为这个就写了1天,昨天晚上刚刚做完的,所以问题还是有的。 相关资源是调用的google images 的搜索api。
    hfharry
        20
    hfharry  
       2011-04-24 20:40:05 +08:00
    @zythum got it, thx!
    ps: lovely work! lol~
    zythum
        21
    zythum  
    OP
       2011-04-24 22:06:10 +08:00
    @hfharry 你喜欢我很开心。。。
    zythum
        22
    zythum  
    OP
       2011-04-25 12:06:29 +08:00
    @reorx @chone 今天找了个linux的主。调了下.上文中的错误不是重点.是有一个地方的函数用的参数里面少些了一个变量 = =||| 不影响功能,现在已经更正了.但是ubuntu下ff 3.6还是不能。把那个主的ff更新到4.0之后发现播放正常。UI那个位置偏移问题也解决了。建议ff用户升级到4.0版本。

    暂时ff4.0版本还是有个小问题,在进度条上有bug.可能是api不一致导致,但是firebug没有报错。但是在win下的ff 4.0下正常。。。头大中。别把ff整得更ie那么悲剧啊。
    这几天比较忙。过几天在调吧 。
    只要是朱一没有linux环境。比较麻烦。

    chrome 正常。不管是什么环境。但是没有测试什么基于chromium的其他第三方浏览器。
    以上。
    reorx
        23
    reorx  
       2011-04-25 16:41:04 +08:00
    @zythum 嗯Linux下chrome stable 确实是可以用的:) 我一开是用chromium测试的,没有说清楚,sorry~

    不过现在chromium还是不能使用,我想造成chrome 和 chromium 差异的原因应该是个很有趣的问题,可以研究研究。
    zythum
        24
    zythum  
    OP
       2011-04-25 16:52:21 +08:00
    @reorx 这个中午也研究过了。。chromium不支持mp3 格式。但是支持wav格式。
    但是怎么区分chrome 还是chromium呢?
    zythum
        25
    zythum  
    OP
       2011-04-25 18:02:05 +08:00
    加入背景图片自定义功能
    9hills
        26
    9hills  
       2011-04-25 18:06:40 +08:00
    @reorx chrome买了然后内置mp3,h264,flash,pdf一堆东西,chromium是开源的,不能放这些,firefox也是。。

    而且两个UA是一样的。。
    zythum
        27
    zythum  
    OP
       2011-05-10 00:57:23 +08:00
    我只到挖坟是件很不好的事情。但是。。。
    已经吧浏览器的音频格式过滤做完了。所以
    chrome现在只是mp3了,aac,m4a,ogg,webm,wma都可以了。
    firefox/opera:ogg,webm
    ie9:mp3,aac

    就这样。
    zythum
        28
    zythum  
    OP
       2011-05-10 00:58:12 +08:00
    @zythum 好吧。我是错字娘。。。
    yyfearth
        29
    yyfearth  
       2011-05-10 08:59:42 +08:00 via Android
    可以用canplaytype进行判定
    zythum
        30
    zythum  
    OP
       2011-05-10 12:32:05 +08:00
    @yyfearth 是用的canplaytype。
    yyfearth
        31
    yyfearth  
       2011-05-10 23:19:56 +08:00
    @zythum 呵呵
    “aac(mp4/m4a), mp3, ogg, wav, webm”几乎是我的原话,不过试了了一下发现有问题,很抱歉。貌似IE9不支持FileReader API,因此请把“ie9用户选择aac, mp3”去掉吧;另外Opera也不支持。因此这两个浏览器是点不开那个大按钮的,也不必考虑了。
    另外我提到过,chrome支持读取整个文件夹包括子文件夹,可以考虑一下。
    chengdujin
        32
    chengdujin  
       2011-05-10 23:28:26 +08:00
    [BUG] 貌似没有对上传文件格式做限制 我刚才传了个jpg的都给通过了
    yyfearth
        33
    yyfearth  
       2011-05-10 23:49:37 +08:00
    @zythum 不好意思,纠正一下上面的说法,opera 11.10 支持filereader了,但是你的player还是不能用。
    zythum
        34
    zythum  
    OP
       2011-05-11 11:48:33 +08:00
    @yyfearth@chengdujin 有格式过滤的。上传非音频格式的确会跳转到播放页面,但是是不会加载到播放列表的。播放列表右下角的songlist。
    @yyfearth opera朱一这边没有更新到11.10,还是11.01 我更新下试试。
    谢谢@yyfearth 在我blog的留言
    zythum
        35
    zythum  
    OP
       2011-05-11 11:51:03 +08:00
    @yyfearth 的确是你的原话没错。。。这些日子比较忙。所以。。。抱歉
    zythum
        36
    zythum  
    OP
       2011-05-11 12:13:08 +08:00
    @yyfearth 刚才去看了下。
    ogg格式在opera下的解析有个很好玩的问题。在chrome以及ff下ogg的格式解析file.type是vedio/ogg或者是audio/ogg.刚刚在opera下添加alert调了下。发现不是FileReader的问题。是格式解析。这里被解析成了application/ogg。朱一上面的格式列表没有这个。就像没有jpg一样所以被过滤掉了,
    现在添加进去了。
    zythum
        37
    zythum  
    OP
       2011-05-11 12:23:03 +08:00
    @yyfearth opera 不知道文件拖拽。。。。忘说了。。
    PS.去楼下吃饭。。。不知道还有什么,
    zythum
        38
    zythum  
    OP
       2011-05-11 12:46:44 +08:00
    @yyfearth opera 不支持文件拖拽。。。。。。 我是错字娘 5555555
    PS.去楼下发现没菜了55555
    Hyperion
        39
    Hyperion  
       2011-05-11 14:06:45 +08:00
    文件名很长的时候, 整个界面看上去好乱. 给标题加上text-overflow:ellipsis; 样式把... 跑马灯也不错 -_-#

    另外...重复播放一首, 下面google的搜索结果就重新加载一次...有点暴力= =+

    顺便扫了一眼kissy的event object 囧囧有神啊! (https://github.com/kissyteam/kissy/blob/master/src/event/object.js)
    zythum
        40
    zythum  
    OP
       2011-05-11 18:16:40 +08:00
    @Hyperion 文件名很长的时候。。。我没觉得有那么长的文件名啊 = =。这个,果断日子去改吧。

    下面那个问题么。。。搜索那些操作是并行的,所以不会因为搜索卡的。所以,就然他搜吧。
    好吧。。。
    好吧。。。好吧。。。
    YiShamrock
        41
    YiShamrock  
       2011-05-17 22:48:13 +08:00
    嘿嘿,想学HTML5,不知道楼主有没有书可以推荐~
    yyfearth
        42
    yyfearth  
       2011-05-17 23:25:07 +08:00
    @YiShamrock html5都还是草案,应该不会有啥好书。还是自己去网上多搜搜吧。牛人的博客,国外的论坛,wiki,w3c多去看看就能够有所了解。
    cotion
        43
    cotion  
       2011-05-17 23:35:03 +08:00
    @zythum 很炫丽哈!我很喜欢,LZ给力哈~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1058 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 19:29 · PVG 03:29 · LAX 11:29 · JFK 14:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.