无聊写了个在线音乐播放器

原创 2016-10-26 18:50  阅读 5,850 次 评论 29 条
温馨提示

MKOnlineMusicPlayer v2.0 已发布,详情请戳 https://mkblog.cn/757/

最近在网上瞎逛,找到了一段网易云音乐的API,然后又找到了一个仿虾米音乐的前端界面。闲着无聊就将它们组合了一下,做了个在线音乐播放器。暂时命名为 MKOnlineMusicPlayer(名字好长好拉风)~~

特色功能:

  • 支持搜索并播放音乐;
  • 支持一键提取音乐外链;
  • 支持音乐下载;
  • 支持显示歌曲封面、歌词。
  • 还有更多功能以后再开发……

效果展示:

无聊写了个在线音乐播放器 html 第1张

无聊写了个在线音乐播放器 html 第2张

无聊写了个在线音乐播放器 html 第3张

无聊写了个在线音乐播放器 html 第4张

项目地址:

这里将它的源代码放出,供大家玩玩(没啥技术含量)

源码下载地址:http://pan.baidu.com/s/1gfkbAef

源码演示地址:http://lab.mkblog.cn/music/

 

使用说明:

  1. 将下载到的压缩包解压,然后将文件夹下的所有文件上传到你的网站空间
  2. 用记事本打开 js/player.js 找到第十八行
    var APIurl = "********/api.php"; //api地址
    将后面的链接修改为你的 api.php 的地址
  3. Have fun!

注意事项:

  1. 这是HTML源码,不支持在本地运行,需上传到网站空间再使用!!!
  2. 本程序不支持IE浏览器
  3. 请务必按照前面的第二条修改api地址,现在程序中使用的 api.php 地址为临时的,仅供大家测试使用,由于服务器原因,将在2016年11月26日关闭。将其改为了你自己的 api.php 地址就可以永久使用了!
  4. 由于网易云音乐官方封锁了部分国家的访问,本播放器可能不支持国外空间!具体情况请自测。
  5. 本源码仅供学习,由于其音乐资源来自于网易云音乐,其相应的音乐版权归网易云音乐所有!支持正版,请自觉于下载后24小时内删除!谢谢配合!

更新内容

2016/10/27   V 1.1

  • 修复宽屏下背景覆盖缺失的BUG;
  • 修复打开页面后直接点击播放无效的BUG;
  • 修复Edge浏览器点击下载时文件名为乱码的BUG;
  • 播放已下架的音乐,会给出无法播放的提示;
  • 修复歌词获取失败时无法清除原有歌词的BUG;
  • 暂停播放时停止歌词滚动,方便复制歌词;
  • 搜索内容为空时会弹出提示。
版权声明: 本文为孟坤博客原创文章,欢迎转载。转载请务必注明出处! (参考格式:本文转自孟坤博客,原文地址:https://mkblog.cn/203/

发表评论


表情

  1. 崔长河
    崔长河 Lv 1 回复 #17 2017-08-09 18:58

    不懂代码,你说的那个api地址怎么换成自己的?如果网易的api失效了不就不能用了。。

  2. 爱喵
    爱喵 Lv 1 回复 #16 2017-08-03 14:03

    [强] 厉害了博主,谢谢了,自用听听太好了

  3. 科学人
    科学人 Lv 1 回复 #15 2017-06-28 13:18

    给你举报一个事,你的源码被盗版了,在那个144G网站上http://www.144g.com/web.php?id=RicOC6b

    • mengkun
      mengkun 站长 回复 2017-06-28 16:52

      @科学人谢谢提醒,对方保留了程序的版权信息,是合理使用。不算盗版。

  4. czh
    czh Lv 1 回复 #14 2017-06-23 18:00

    [鼓掌] 谢谢博主.拿走研究研究

  5. 片面
    片面 Lv 1 回复 #13 2017-06-11 13:26

    谢谢博主了,拿走研究下前端。 [呲牙]

  6. 小天蝎
    小天蝎 游客 回复 #12 2017-03-12 05:24

    博主那个你推翻重做的音乐播放器考虑放出来不

  7. 呵呵哒
    呵呵哒 Lv 1 回复 #11 2017-03-08 18:22

    这网页功能编辑完毕了吗 能公开2.0的版本源码吗

    • mengkun
      mengkun 站长 回复 2017-03-08 18:25

      @呵呵哒还没做完,现在还只是完成了基础的界面部分。还有很多功能没开工。最快也得两周之后发布 2.0 的测试版了……

  8. 可爱的草尼玛
    可爱的草尼玛 游客 回复 #10 2016-11-03 18:10

    我也写了一个,http://fm.aakuan.cn。真的挺佩服楼主。。因为我之前也准备做成虾米类似的,后来木有。。做成了现在这个。。也是调用的网易云

    • 孤帆远影
      孤帆远影 Lv 7 回复 2016-11-03 19:09

      @可爱的草尼玛哈哈,表示我的这个正是因为在吾爱破解上看到了你发的FM电台受到启发才做的 [憨笑]

  9. 前车之鉴
    前车之鉴 Lv 2 回复 #9 2016-11-02 19:01

    很喜欢这个播放器! [鼓掌]

  10. 小萌娘
    小萌娘 游客 回复 #8 2016-10-29 19:19

    提示播放器加载失败,请刷新网页

    是不是应为网易因为版权问题不让海外空间解析

    • 孤帆远影
      孤帆远影 Lv 7 回复 2016-10-29 19:41

      @小萌娘国外空间确实无法解析。目前暂未找到解决办法……

  11. 小萌娘
    小萌娘 游客 回复 #7 2016-10-29 19:18

    博主国外空间解析不了怎么破

    • mengkun
      mengkun 站长 回复 2017-01-14 23:07

      @小萌娘你好,刚刚我测试了一下,在部分空间上确实存在这样的问题,api返回的结果是加密的内容。我也不知道为什么,正在检查代码中…

  12. a懵逼
    a懵逼 游客 回复 #6 2016-10-29 17:13

    博主不错,那个api是改成自己域名+api.php 对不

    • 孤帆远影
      孤帆远影 Lv 7 回复 2016-10-29 17:48

      @a懵逼要看你把api.php放在哪。如果是放在根目录,就是 自己域名+api.php ,具体的你自己试一下就知道了

  13. a万人中央你会闪闪发光i
    a万人中央你会闪闪发光i 游客 回复 #5 2016-10-28 17:42

    为什么我用自己空间数据库却不行。。播放器加载失败,请刷新网页

  14. hover
    hover 游客 回复 #4 2016-10-28 15:08

    api.php 那个文件是你自己写的?

    • mengkun
      mengkun 站长 回复 2017-01-14 23:09

      @hoverapi.php是自己写的,但里面的接口是网上找的。

  15. hover
    hover 游客 回复 地板 2016-10-28 12:39

    我用了,厉害了我的哥。 那些功能什么时候实现呢?

    • mengkun
      mengkun 站长 回复 2017-01-14 23:10

      @hover由于时间原因,这个播放器暂时不会有大的更新。

  16. 人家
    人家 游客 回复 板凳 2016-10-28 07:50

    满满的正能量!

  17. 永林
    永林 游客 回复 沙发 2016-10-26 20:40

    我在坐等新程序(*^__^*) 嘻嘻……