红心电台

提醒:本文最后更新于 4268 天前,文中所描述的信息可能已发生改变,请谨慎使用。

前两天写了篇Audio标签的文章,想要更深入学习一下,遂决定写一个网页版音乐播放器试试(其实有更深部的动机的,不过我不告诉你们,哼哼!)。在整个网页的编写过程中,我学习到了很多的东西,感觉对jQuery又有了更新的认识。同时新接触了jQuery UI这个非常可靠的工具。不过说到底也还是新手,代码写的很脏,也没想到重构什么的,功能实现出来就好了,至于美观什么的,哈哈,你是在开玩笑么!

放上本篇文章主角:红心电台 - https://imnerd.org/lab/player

简单介绍:红心电台是一个利用HTML5制作的能够存储播放列表的在线音乐播放器。是的,没错,虽然是叫做红心电台,但是基本上也就只是一个能存播放列表的播放器而已。另外,本网页是用HTML5写的,然后由于播放的音乐基本是MP3格式的,所以只支持Webkit系的浏览器(Chrome为首)和IE9+以上的浏览器,对Firefox和Opera的用户感到抱歉了,OGG的音乐库毕竟还是挺小众的。具体浏览器支持可以看红心电台的HELP。

使用说明:

  • 1、左上角有搜索框,用户可自行添加歌曲到播放列表中。
  • 2、默认播放列表的歌曲在用户添加过歌曲后会自行清除(需要刷新页面),用户不必手动清除。
  • 3、默认支持快捷键,左右方向键为上一首下一首,空格键为暂停,Delete键为删除当前播放曲目。

如果对红心电台有什么意见或者是建议,又或者是发现了什么问题,可以随时与我联系(联系方式见关于页面),当然你也可以在本文留言,我都是可以看的到的。

Avatar
怡红公子 擅长前端和 Node.js 服务端方向。热爱开源时常在 Github 上活跃,也是博客爱好者,喜欢将所学内容总结成文章分享给他人。
上一页 PMBlog

7 评论

小北 Firefox24.0 Windows 7
2013-10-12 09:12:36 回复

博主很不错诶,膜拜一下哈哈

猫大叔 Firefox20.0 Windows 7
2013-02-28 05:40:18 回复

哎 一直用火狐啊 LZ这东东不错.可以改了弄成迷你版的.完了放博客上,或者弄一个音乐的页面.应该别有一翻风味吧.哈哈

公子 Chrome25.0 Windows 7
2013-02-28 05:46:01 回复

@猫大叔嗯,确实是别具一番风味,哈哈~只是不支持FF和Opera什么的比较可惜,哎!

音乐迷 360 Browser Windows XP
2013-02-15 02:54:09 回复

能提供MP3下载链接吗

公子 Chrome24.0 Windows 7
2013-02-15 03:46:34 回复

这个,我觉得这个功能没有必要,所以暂时应该不会添加上去的。不过你实在是需要这个功能的话,可以看看我之前写的这篇文章
初探标签实现同步显示歌词
,我写的那个API能够满足你的需求。不过需要注意的是这里下载的音乐是虾米试听级别的低分辨率版的,网上其实有很多软件能下到的,浏览器用嗅探也可以弄到,所以我觉得没有意义的说。

酱爆灵梦 Firefox20.0 Mac OS 10.7
2013-02-23 11:05:11 回复

出于版权问题还是不建议添加下载按钮为妙。

公子 Chrome25.0 Windows 7
2013-02-23 13:55:07 回复

嗯,深表同意~