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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 5285 天前的主题，其中的信息可能已经有所发展或是发生改变。

同题，今天刚看的FileReader和dataTransfer部分。所以就做了一下。
本人还是学生，喷子们就止步吧。
url: http://zythum.free.bg/zplayer
如果吃的好，还有chrome app 下载:
url: http://dl.dbank.com/c0y25yize9

还有就是,仅限firefox及chrome用户。。

URL

Chrome

喷子

43 条回复 1970-01-01 08:00:00 +08:00

zythum

2011-04-23 21:57:35 +08:00

有什么bug或者指正的可以写在下面。。。^^

Sai

2011-04-23 22:01:14 +08:00

不支持 Mac 的 FF？选了文件没有出现在 List 中。

Sai

2011-04-23 22:01:50 +08:00

好吧，FF 只支持 ogg

zythum

2011-04-23 22:07:19 +08:00

好吧。。。。chrome ---mp3 ff----ogg = =。这我没办法的。。。

zythum

2011-04-23 22:07:25 +08:00

@Sai 好吧。。。。chrome ---mp3 ff----ogg = =。这我没办法的。。。

xflykkk

2011-04-23 22:08:22 +08:00

lz应该传chrome的插件中心去

loading

2011-04-23 22:17:49 +08:00

好吧，我也要给自己写一个。

zythum

2011-04-24 10:53:08 +08:00

某同学说在ubuntu 下的ff会有问题。。。但是我距那人有些远。。。也不知道什么报错。。。各位有ubuntu 的大大帮我看下。。谢谢/

dimlau

2011-04-24 10:54:55 +08:00

楼主啊，您错别字也太多了。

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

2011-04-24 10:59:57 +08:00

@dimlau 歌曲名黑色的在这背景图下看不清楚啊，

reorx

2011-04-24 11:03:56 +08:00

@zythum 你没有收到Turkeywzd的邮件吗？我把debug报告发给他了……

Sion

2011-04-24 11:40:13 +08:00

......FF的那个格式有点冷

zythum

2011-04-24 11:43:48 +08:00

@chone @reorx Turkeywzd有邮件给我，但是观看那个Cannot set property 'innerHTML' of undefined 实在不知道是哪里的问题。。。。
因为win上的ff很正常。。。所以。。。也不知道这个错误的触发条件。。。去找个就近的ubtu的主吧。
@Semidio 已经改过了。。。现在应该看得清楚了。
@Sion 没办法。。。这不是我能改了。。。我能改我肯定吧所有格式支持了。

TashinV

PRO

2011-04-24 13:43:59 +08:00

不知道可以加点对mac 的safari 的支持不..

chloerei

2011-04-24 13:51:35 +08:00

不错。

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

我对显示相关资源那里比较感兴趣

hfharry

2011-04-24 13:55:08 +08:00

无法安装extension。。。

zythum

2011-04-24 14:03:33 +08:00

@hfharry 哦，这个是这样的。你先把那个crx文件下载下来（目标另存为到本地），然后拖到chrome上。。。因为这个不是挂在官方webstore上的。所以。。。。抱歉，上面没说。

zythum

2011-04-24 14:06:56 +08:00

@TashinV 等safari 什么时候支持读取本地文件了。。。我也是safari用户。。。乔大爷，摆脱了。
@chloerei 没播放起来。。。手动双击播放列表能不能播放呢？因为这个就写了1天，昨天晚上刚刚做完的，所以问题还是有的。相关资源是调用的google images 的搜索api。

hfharry

2011-04-24 20:40:05 +08:00

@zythum got it, thx!
ps: lovely work! lol~

zythum

2011-04-24 22:06:10 +08:00

@hfharry 你喜欢我很开心。。。

zythum

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

2011-04-25 16:41:04 +08:00

@zythum 嗯Linux下chrome stable 确实是可以用的:) 我一开是用chromium测试的，没有说清楚，sorry～

不过现在chromium还是不能使用，我想造成chrome 和 chromium 差异的原因应该是个很有趣的问题，可以研究研究。

zythum

2011-04-25 16:52:21 +08:00

@reorx 这个中午也研究过了。。chromium不支持mp3 格式。但是支持wav格式。
但是怎么区分chrome 还是chromium呢？

zythum

2011-04-25 18:02:05 +08:00

加入背景图片自定义功能

9hills

2011-04-25 18:06:40 +08:00

@reorx chrome买了然后内置mp3，h264，flash，pdf一堆东西，chromium是开源的，不能放这些，firefox也是。。

而且两个UA是一样的。。

zythum

2011-05-10 00:57:23 +08:00

我只到挖坟是件很不好的事情。但是。。。
已经吧浏览器的音频格式过滤做完了。所以
chrome现在只是mp3了,aac,m4a,ogg,webm,wma都可以了。
firefox/opera：ogg,webm
ie9：mp3，aac

就这样。

zythum

2011-05-10 00:58:12 +08:00

@zythum 好吧。我是错字娘。。。

yyfearth

2011-05-10 08:59:42 +08:00 via Android

可以用canplaytype进行判定

zythum

2011-05-10 12:32:05 +08:00

@yyfearth 是用的canplaytype。

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

2011-05-10 23:28:26 +08:00

[BUG] 貌似没有对上传文件格式做限制我刚才传了个jpg的都给通过了

yyfearth

2011-05-10 23:49:37 +08:00

@zythum 不好意思，纠正一下上面的说法，opera 11.10 支持filereader了，但是你的player还是不能用。

zythum

2011-05-11 11:48:33 +08:00

@yyfearth@chengdujin 有格式过滤的。上传非音频格式的确会跳转到播放页面，但是是不会加载到播放列表的。播放列表右下角的songlist。
@yyfearth opera朱一这边没有更新到11.10，还是11.01 我更新下试试。
谢谢@yyfearth 在我blog的留言

zythum

2011-05-11 11:51:03 +08:00

@yyfearth 的确是你的原话没错。。。这些日子比较忙。所以。。。抱歉

zythum

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

2011-05-11 12:23:03 +08:00

@yyfearth opera 不知道文件拖拽。。。。忘说了。。
PS.去楼下吃饭。。。不知道还有什么，

zythum

2011-05-11 12:46:44 +08:00

@yyfearth opera 不支持文件拖拽。。。。。。我是错字娘 5555555
PS.去楼下发现没菜了55555

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

2011-05-11 18:16:40 +08:00

@Hyperion 文件名很长的时候。。。我没觉得有那么长的文件名啊 = =。这个，果断日子去改吧。

下面那个问题么。。。搜索那些操作是并行的，所以不会因为搜索卡的。所以，就然他搜吧。
好吧。。。
好吧。。。好吧。。。

YiShamrock

2011-05-17 22:48:13 +08:00

嘿嘿，想学HTML5，不知道楼主有没有书可以推荐~

yyfearth

2011-05-17 23:25:07 +08:00

@YiShamrock html5都还是草案，应该不会有啥好书。还是自己去网上多搜搜吧。牛人的博客，国外的论坛，wiki，w3c多去看看就能够有所了解。

cotion

2011-05-17 23:35:03 +08:00

@zythum 很炫丽哈！我很喜欢，LZ给力哈~