在线音乐播放器(ajax请求网络中免费的api)

JavaScript 专栏收录该内容
9 篇文章 0 订阅

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="referrer" content="never">
<title></title>
</head>

<style type="text/css">
table{display: none;border: none;}
</style>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){

$("#btn").click(function(){
var value=$("#info").val();
$.ajax({
type:"get",
url:"http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query="+value,
async:true,
dataType:"jsonp",
success:function(data1){
var songids=data1.song;
console.log(songids.length);
for(var i=0;i<songids.length;i++){
var songid=songids[i].songid;
var td=document.createElement("td");
var a=document.createElement("a");
a.href="#";
a.src=songid;

var songname=songids[i].songname
console.log(songname);
a.textContent=songname;
var tr=document.createElement("tr");
var tbody=document.getElementsByTagName("tbody")[0];
td.appendChild(a);
tr.appendChild(td);
$("table")[0].style.display="block";
tbody.appendChild(tr);
a.οnclick=function(){
console.log("a.src"+this.src);
$.ajax({
type:"get",
url:"http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.song.play&songid="+this.src,

async:true,
dataType:"jsonp",
success:function(data2){
var audio=document.getElementById("audio");
audio.src=data2.bitrate.file_link;
audio.play();
}
});
}
}
}
});

})




})


</script>

<body>
<h3>网易劲音乐</h3>
请输入要查询的歌曲:<input type="text" value="" id="info"/><button id="btn">查询</button>
<div id="">
<audio id="audio" preload="auto" controls="controls">
浏览器不支持h5音乐标签
</audio>
</div>

<h4>歌曲列表</h4>
<table border="" cellspacing="" cellpadding="">
<tr><th>点击播放</th></tr>
</table>
</body>
</html>

  • 0
    点赞
  • 2
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
<p> <span style="color:#333333;">本课程详细讲解了以下内容:<br />     1.jsp环境搭建及入门、虚拟路径和虚拟主机、JSP执行流程<br /><br />     2.使用Eclipse快速开发JSP、编码问题、JSP页面元素以及request对象、使用request对象实现注册示例<br /><br />     3.请求方式的编码问题、response、请求转发和重定向、cookie、session执行机制、session共享问题<br /><br />      4.session与cookie问题及application、cookie补充说明及四种范围对象作用域<br /><br />      5.JDBC原理及使用Statement访问数据库、使用JDBC切换数据库以及PreparedStatement的使用、Statement与PreparedStatement的区别<br /><br />      6.JDBC调用存储过程和存储函数、JDBC处理大文本CLOB及二进制BLOB类型数据<br /><br />      7.JSP访问数据库、JavaBean(封装数据和封装业务逻辑)<br /><br />      8.MVC模式与Servlet执行流程、Servlet25与Servlet30的使用、ServletAPI详解与源码分析<br /><br />      9.MVC案例、三层架构详解、乱码问题以及三层代码流程解析、完善Service和Dao、完善View、优化用户体验、优化三层(加入接口和DBUtil)<br /><br />     1 0.Web调试及bug修复、分页SQL(Oracle、MySQL、SQLSERVER)<br /><br />      11.分页业务逻辑层和数据访问层Service、Dao、分页表示层Jsp、Servlet<br /><br />      12.文件上传及注意问题、控制文件上传类型和大小、下载、各浏览器下载乱码问题<br /><br />      13.EL表达式语法、点操作符和括号操作符、EL运算、隐式对象、JSTL基础及set、out、remove<br /><br />      14.过滤器、过滤器通配符、过滤器链、监听器<br /><br />      15.session绑定解绑、钝化活化<br /><br />      16.以及Ajax的各种应用<br /></span> </p> <p> <span style="color:#333333;"><br /></span> </p> <p> <span style="color:#333333;">     17. Idea环境下的Java Web开发</span> </p>
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏

TheZing

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值