MusicPlay 音乐播放器(纯前端)
纯Css,js前端音乐播放器,界面UI比较好。我特别喜欢,适合二次开发,调用了网易云第三方接口以及将歌曲链接导出可以访问的歌曲链接,实现了异步歌曲搜索播放,以及异步显示歌词等.结合html5 新特性实现歌曲暂停,下一首,快进等等.为大二前端练手项目.采用渐变质背景
是前端练手的好项目,强烈推荐,会让你对js产生浓浓的兴趣
挺好玩的,挺有意思的
记得当时搞出来高兴了好久
异步搜索歌曲链接并添加播放(原生态js异步调用网易云根据关键字匹配歌曲链接的接口)目前该接口因版权部分歌曲链接失效
网易云音乐接口:http://s.music.163.com/search/get/
如曹操这首歌的链接为http://s.music.163.com/search/get/?type=1&limit=6&s=%E6%9B%B9%E6%93%8D
返回的json 数据格式如下:
参数
var data = {
"type": 1,//单曲
"limit": 1,//返回数量1
"s": value,//搜索词
"callback": "jsonpcallback"
};
搜索歌曲实现播放关键代码
searchBtn.addEventListener('click', function () {var value = keyword.value;if (!value) {alert('关键词不能为空');return;}//http://music.163.com/api/song/lyric?os=pc&id=" . $music_id . "&lv=-1&kv=-1&tv=-1.歌词的链接var url = "http://s.music.163.com/search/get/";var data = {"type": 1,//单曲"limit": 1,//返回数量1"s": value,//搜索词"callback": "jsonpcallback"};var buffer = [];for (var key in data) {buffer.push(key + '=' + encodeURIComponent(data[key]));}var fullpath = url + '?' + buffer.join('&');CreateScript(fullpath);
});
//异步加载js不影响当前渲染结果
function CreateScript (src) {var el = document.createElement('script');el.src = src;//加载urlel.async = true;el.defer = true;document.body.appendChild(el);
};
加载歌曲链接搜索歌词
网易云音乐歌词接口:http://music.163.com/api/song/lyric?os=pc&id='+rs.result.songs[0].id+'&lv=-1&kv=-1&tv=-1&callback=lycjson。 这里首先要获取歌曲id
如 曹操的歌词链接为:http://music.163.com/api/song/lyric?os=pc&id=108795&lv=-1&kv=-1&tv=-1&callback=lycjson
关键代码:
function jsonpcallback (rs) {var resultHtml = '歌曲:<strong>' + rs.result.songs[0].name + '</strong>' + '歌手:<strong>' + rs.result.songs[0].artists[0].name + '</strong>' +'<a href="javascript:;" id="to-play">立即播放</a>'; //这个时候开始查询歌词// http://music.163.com/api/song/lyric?os=pc&id=" . $music_id . "&lv=-1&kv=-1&tv=-1var lyc='http://music.163.com/api/song/lyric?os=pc&id='+rs.result.songs[0].id+'&lv=-1&kv=-1&tv=-1&callback=lycjson';alert("已经搜索到了歌词");window.open(lyc,"新窗口歌词","width=500,height=500,toolbar=no,scrollbars=no,menubar=no,screenX=100,screenY=100"); //var el = document.createElement('script');//el.src = 'http://music.163.com/api/song/lyric?os=pc&id='+rs.result.songs[0].id+'&lv=-1&kv=-1&tv=-1&callback=lycjson';//加载url//el.async = true;//el.defer = true;//document.body.appendChild(el);//window.open(lyc,"新窗口歌词","width=100,height=200,toolbar=no,scrollbars=no,menubar=no,screenX=100,screenY=100"); // window.location.href=lyc;//解释json//alert(lycjson.lrc.lyric);// http://s.music.163.com/search/get/?type=1&limit=1&s=%E5%8C%97%E4%BA%AC%E6%AC%A2%E8%BF%8E%E4%BD%A0&callback=jsonpcallback:formatted//http://s.music.163.com/search/get/?type=1&limit=1&s=%E6%88%91%E5%92%8C%E4%BD%A0&callback=jsonpcallbackresult.innerHTML = resultHtml;result.setAttribute('data-audio', rs.result.songs[0].audio);result.setAttribute('data-img', rs.result.songs[0].album.picUrl);result.setAttribute('data-music', rs.result.songs[0].name);result.setAttribute('data-singer', rs.result.songs[0].artists[0].name);result.style.opacity = '1';};function lycjson(rs){alert('123');var string =rs.lrc.lyric;alert(string);}
网站效果图:
歌词
最后还有响应式布局:
挺有意思挺好玩的项目强烈推荐会让你对js产生浓浓的兴趣~~~~哈哈哈
Github上项目源码地址:
https://github.com/gb1998/MusicPlay/
MusicPlay 音乐播放器(纯前端)相关推荐
- 仿照网易云界面做的Flask网页音乐播放器(豪华版)
一个基于Flask的网页音乐播放器,前端用了h5,css,jq,ajax,hash,数据库是mysql,前端到后端,全都有.管理员有上传音乐的功能,一定要先注册一个账户名为Admin的账户. 主要功能 ...
- 纯前端语言编写音乐播放器
纯前端语言编写音乐播放器 html代码 index.html <!DOCTYPE html> <html lang="en"><head>< ...
- 前端切图:自制简易音乐播放器
音乐播放器是一个非常常见的应用,这篇博客就是介绍如何制作一个简单的音乐播放器,这款音乐播放器具有以下的功能:图片旋转功能,点击播放,点击暂停播放的功能,音量调大调小功能,设置音频的播放时间,循环播放, ...
- vue 判断同一数组内的值是否一直_前端代码+后端API,值得一学的Vue高仿音乐播放器实战项目
项目名称:vue-fds_music 项目作者:符道胜 开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...
- 好程序员前端分享使用JS开发简单的音乐播放器
好程序员前端分享使用JS开发简单的音乐播放器,最近,我们在教学生使用JavaScript,今天就带大家开发一款简单的音乐播放器.首先,最终效果如图所示: 首先,我们来编写html界面index.htm ...
- php加本地音乐代码,WordPress添加音乐播放器(纯代码实现)
一.前言 为WordPress网站添加一个音乐播放器,网上大部分的教程都是使用各种插件,有的插件还需要花钱买授权,用着不爽.本文用纯代码为网站添加音乐播放器,安全可靠,可以任意修改. 二.效果图 三. ...
- 用html制作静态音乐欣赏,纯静态HTML音乐播放器模板
[实例简介] 纯静态HTML音乐播放器模板,可以直接套用到cms后台使用,页面简洁漂亮 www.guangrao.ren [实例截图] [核心代码] 525460f6-62cf-4282-9d42-3 ...
- 【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果~前端开发网页设计基础入门教程~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码 ...
- 前端----利用html,css,js自制有趣的音乐播放器
最近在学前端,然后做了一个简易的音乐播放器,原本只是一个静态的网页,用a标签实现链接,embed标签引入mv,audio标签实现音乐播放,右边的marquee标签实现歌词滚动但是总觉得还不够,就加上了 ...
最新文章
- Spring Remoting: Remote Method Invocation (RMI)--转
- Python Django通过牵引文件查看建表sql语句的命令sqlmigrate
- 使用 Label 类在 XNA 中显示文本,WPXNA(七)
- python字典添加数组_一步一步学Python3(小学生也适用) 第十三篇: 字典Dict类型
- (40)不确定性约束
- [码海拾贝 之JS] JS 之删除数组中的元素
- ASP.NET MVC 4 (二)控制器
- matlab中低通滤波器程序,MATLAB低通滤波器程序
- NumPy的详细教程
- Leetcode 741. Cherry Pickup DP
- 商丘服务器维修,商丘联想服务器维修网点
- 【图像处理】多光谱 波长波段划分 主要波段特性 植被遥感原理 典型植被指数
- 当了两天向导,带他进行了上海都市游885
- 绘制中国象棋棋盘 - CSS Pseudo Elements 的使用
- 模拟QQ心情图片上传预览
- 上帝向我们所怀的意念
- Serverlet简介
- 京东抢购Python脚本
- Automatic Extrinsic Calibration for Lidar-Stereo Vehicle Sensor Setups阅读笔记
- 落单的数IV --- lintcode 824