Jsonp调用网易云音乐API搜索播放歌曲
效果如下图:
基本就是正常的文件播放,暂停,停止,设置循环,随机播放,加速,减速,上一曲,下一曲,再多个选择本地文件加入到播放列表的功能。
然后想着给加个能搜索网络歌曲并且播放的功能,今天研究了一下,成果如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>demo</title>
<style>
#data{
width: 400px;
height: 300px;
border: 1px solid #000;
margin-top: 30px;
word-break: keep-all;
overflow: auto;
}
#data>img{
margin: 20px;
}
#search{
outline: none;
margin: 20px;
}
</style>
</head>
<body>
<audio id="audio" controls="controls">
<source />
</audio><br />
<input id="search" type="text" /><label for="search">输入关键词后点击回车听歌</label><br />
<input id="btn" type="button" value="下一曲" /><span>点击切换歌曲,循环获取的歌曲数</span>
<div id="data">
<img src="" alt="" />
</div>
<script>
/**
* [cb jsonp回调函数]
* @param {[type]} data [description]
* @return {Function} [description]
*/
function cb (data) {
var oData = document.getElementById('data'),
oBtn = document.getElementById('btn'),
oAudio = document.getElementById('audio'),
iNow = 0, // 默认播放第一个歌曲
str = '';
if (data.code == 200) { // 正确返回内容
try {
updateMusic(); // 更改信息框和播放搜索的第一个歌曲
oBtn.onclick = function () { // 点击显示下一首歌曲并播放
iNow++;
iNow %= data.result.songs.length; // 控制只循环取到的几个歌曲
updateMusic();
};
} catch(e) {
oData.innerHTML = ''; // 出错清空列表
oAudio.load(); // 搜索出错重载音频 以防出错时候还有音频在播放
var oImg = document.createElement('img'); // 猜这是什么图片 -0-
oImg.src = 'data:image/jpeg;base64,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';
oData.appendChild(oImg);
}
}else{
oData.innerHTML = '网易云音乐:(๑•ี_เ•ี๑)'; // 返回代码不是200
}
/**
* [updateMusic 更新消息框显示内容和正在播放的歌曲]
* @return {[type]} [description]
*/
function updateMusic () {
str = '歌曲id:' + data.result.songs[iNow].id + '<br />歌曲名:' + data.result.songs[iNow].name + '<br />演唱者:' + data.result.songs[iNow].artists[0].name + '<br />歌曲url:' + data.result.songs[iNow].audio + '<br />专辑图片:' + data.result.songs[iNow].album.picUrl; // 显示歌曲部分信息
oData.innerHTML = str;
// oImg.src = data.result.songs[iNow].album.picUrl;
var oImg = document.createElement('img');
oImg.src = data.result.songs[iNow].album.picUrl; //显示歌曲专辑图片
oData.appendChild(oImg);
oAudio.src = data.result.songs[iNow].audio; // 设置播放音频的src
oAudio.volume = 0.2; // 修改一下音量 否则默认是1
oAudio.play(); //播放指向的音频
}
}
window.onload = function () {
var oSearch = document.getElementById('search'),
oData = document.getElementById('data');
var iNum = 2; // 取2条歌曲数据
oSearch.onkeydown = function (e) { //回车按键编码为13
if (e.which == 13 && oSearch.value.trim()) { // 去除输入的空格
var oScirpt = document.createElement('script');
oScirpt.src = 'http://s.music.163.com/search/get/?type=1&filterDj=true&s=' + oSearch.value.trim() + '&limit=' + iNum + '&offset=0&callback=cb'; // |limit返回1条 |函数名为cb |type=1表示单曲 |offset偏移量 用于分页 | 过滤掉DJ那些乱的歌儿
document.body.appendChild(oScirpt); // 将有src属性的脚本加到页面
}
};
};
</script>
</body>
</html>
再就是浏览器上面读取本地文件的话,file格式的表单读取到的url是fakepath,所以我只能预先设置好一个路径,定位到一个文件夹,再只能选择这个文件夹里的音频文件,请问下大家有没做过类似的,有怎么解决的?
Jsonp调用网易云音乐API搜索播放歌曲的更多相关文章
- 网易云音乐API
网易云音乐API使用 封装了一些api调用 ZZRRegion/StNetease
- 推荐一个高大上的网易云音乐命令行播放工具:musicbox
网易云音乐上有很多适合程序猿的歌单,但是今天文章介绍的不是这些适合程序员工作时听的歌,而是一个用Python开发的开源播放器,专门适用于网易云音乐的播放.这个播放器的名称为MusicBox, 特色是用 ...
- Web前端:博客美化:四、网易云音乐单曲播放器
1.页面定制CSS代码 /*3.音乐播放器*/ .content-wrap { overflow-y: scroll; -webkit-overflow-scrolling: touch; } /* ...
- 网易云音乐api资料
https://github.com/LanFD/music_163 网易云音乐常用API浅析:http://moonlib.com/606.html
- Manjaro / ArchLinux 安装网易云音乐解决搜索不能输入中文方法
0. 安装网易云音乐 yay -S netease-cloud-music 1.先安装qcef这个软件包. sudo yay -S qcef 2.编辑/opt/netease/netease-clou ...
- 网易云音乐JS逆向解析歌曲链接
Request URL: https://music.163.com/weapi/song/enhance/player/url?csrf_token= FormData : params: BV ...
- 关于网易云音乐爬虫的api接口?
抓包能力有限,分析了一下网易云音乐的一些api接口,但是关于它很多post请求都是加了密,没有弄太明白.之前在知乎看到过一个豆瓣工程师写的教程,但是被投诉删掉了,请问有网友fork了的吗?因为我觉得他 ...
- 基于Taro与Typescript开发的网易云音乐小程序
基于Taro与网易云音乐api开发,技术栈主要是:typescript+taro+taro-ui+redux,目前主要是着重小程序端的展示,主要也是借此项目强化下上述几个技术栈的使用,通过这个项目也可 ...
- 基于Taro与typescript开发的网易云音乐小程序(持续更新)
基于Taro与网易云音乐api开发,技术栈主要是:typescript+taro+taro-ui+redux,目前主要是着重小程序端的展示,主要也是借此项目强化下上述几个技术栈的使用,通过这个项目也可 ...
随机推荐
- DirectWrite 模糊问题——如何正确根据DIP计算实际像素
使用Windows.Graphics.Display.DisplayInformation的时候,一定要根据RawPixelsPerViewPixel计算,而不是RawDpiX或RawDpiY,或许L ...
- Day12-mysql&&redis
1. 数据库介绍 什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据.我们也可以将数 ...
- 检查Linux服务器性能
如果你的Linux服务器突然负载暴增,告警短信快发爆你的手机,如何在最短时间内找出Linux性能问题所在? 概述通过执行以下命令,可以在1分钟内对系统资源使用情况有个大致的了解. • uptime• ...
- ip扫描
ipscan24 Advanced IP Scanner http://www.advanced-ip-scanner.com/cn/
- Apache Shiro 学习记录3
晚上看了教程的第三章....感觉Shiro字符串权限很好用....但是教程举的例子太少了.....而且有些地方讲的不是很清楚....所以我也自己测试了一下....记录一下测试的结果.... (1) * ...
- 在Android中Intent的概念及应用(一)——显示Intent和隐式Intent
Intent寻找目标组件的两种方式: 显式Intent:通过指定Intent组件名称来实现的,它一般用在知道目标组件名称的前提下,一般是在相同的应用程序内部实现的. 隐式Intent:通过Intent ...
- logback日志写入数据库(mysql)配置
如题 建议将日志级别设置为ERROR.这样可以避免存储过多的数据到数据中. 1 logback 配置文件(如下) <?xml version="1.0" encoding ...
- shell脚本学习第一课
shell是一种程序设计语言,是访问操作系统内核的服务. Linux的shell种类常见的有: Bourne Shell(/usr/bin/sh或/bin/sh) Bourne Again Shell ...
- 转→js数组遍历 千万不要使用for...in...
看到一篇内容还不错,但是排版实在糟糕, 逼死强迫症患者啊,直接拉下去找原文连接,找到了,但是已经消失了···500错误... 第一次因为实在看不下去一篇博客的排版, 为了排版而转载... 转载地址:h ...
- R可视化lend_club 全球最大的P2P平台数据75W条
lend_club 全球最大的P2P平台2007~2012年贷款数据百度云下载. 此文章基于R语言做简单分析. rm(list=ls()) #清除变量 gc() #释放内存 step1 考虑到后续分析 ...