<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<title>在线发牌</title>
</head>
<body>
<div id="container" class="text-center">
<br/>
<!--绑定异步请求的参数-->
<input type="text" v-model="keywords" style="height: 35px" placeholder="请输入歌曲名" class="mt-2">
<!--绑定点击事件-->
<button class="btn btn-primary btn-sm" v-on:click="doSearch">搜索</button>
<br/>
<br/>
<br/>
<table class="table table-bordered table-condensed" style="width: 1200px;" >
<tr >
<th class="text-center" style="width: 80px">序号</th>
<th class="text-center" style="width: 80px">歌曲ID</th>
<th class="text-center" style="width: 200px">歌曲名</th>
<th class="text-center" style="width: 200px">歌手名</th>
<th class="text-center" style="width: 200px">专辑名</th>
<th class="text-center" style="width: 200px">时长</th>
<th class="text-center" style="width: 200px">操作</th>
</tr>
<!--数据渲染-->
<tr v-for="song,index in info">
<td >{{index+1}}</td>
<td >{{song.id}}</td>
<td >{{song.name}}</td>
<td >
<span v-for="singer in song.artists">
{{singer.name}}
</span>
</td>
<td >
{{song.album.name}}
</td>
<td >
{{Math.floor(Math.round(song.duration/1000)/60)<10?'0'+(Math.floor(Math.round(song.duration/1000)/60)):(Math.floor(Math.round(song.duration/1000)/60))}}
:
{{Math.round(song.duration/1000%60)<10?'0'+(Math.round(song.duration/1000%60)):(Math.round(song.duration/1000%60))}}
</td>
<td >
<!--设置点击事件 并将当前id传过去
根据状态的不同 来显示不同的按钮
-->
<button type="button" v-if="song.id == currentid && status==1" class="btn btn-warning btn-sm"
@click="stop" :data-mid="song.id">暂停</button>
<button type="button" v-else-if="song.id == currentid && status==0" class="btn btn-primary btn-sm"
@click="continued" :data-mid="song.id">继续</button>
<button type="button" v-else class="btn btn-success btn-sm" @click="listen" :data-mid="song.id">播放</button>
</td>
</tr>
</table>
</div>
<!--播放器 要定义在vue的容器外 要不会影响数据渲染-->
<audio controls style="width: 100%" src="" id="player"></audio>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
let player=document.getElementById("player");
let vm = new Vue({
el : "#container",
data : {
keywords : '',
src : '',
currentid : 0,
status : 0,
info : [ {
"id": 1861640530,
"name": "变废为宝",
"artists": [
{
"id": 5781,
"name": "薛之谦",
"picUrl": null,
"alias": [],
"albumSize": 0,
"picId": 0,
"img1v1Url": "https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
"img1v1": 0,
"trans": null
}
],
"album": {
"id": 130455751,
"name": "变废为宝",
"artist": {
"id": 0,
"name": "",
"picUrl": null,
"alias": [],
"albumSize": 0,
"picId": 0,
"img1v1Url": "https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
"img1v1": 0,
"trans": null
},
"publishTime": 1626451200000,
"size": 1,
"copyrightId": 22036,
"status": 1,
"picId": 109951166183527740,
"mark": 0
},
"duration": 279163,
"copyrightId": 22036,
"status": 0,
"alias": [],
"rtype": 0,
"ftype": 0,
"mvid": 0,
"fee": 0,
"rUrl": null,
"mark": 128
},
{
"id": 1463165983,
"name": "天外来物",
"artists": [
{
"id": 5781,
"name": "薛之谦",
"picUrl": null,
"alias": [],
"albumSize": 0,
"picId": 0,
"img1v1Url": "https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
"img1v1": 0,
"trans": null
}
],
"album": {
"id": 121012393,
"name": "天外来物",
"artist": {
"id": 0,
"name": "",
"picUrl": null,
"alias": [],
"albumSize": 0,
"picId": 0,
"img1v1Url": "https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
"img1v1": 0,
"trans": null
},
"publishTime": 1609344000000,
"size": 10,
"copyrightId": 22036,
"status": 1,
"picId": 109951165591010370,
"mark": 0
},
"duration": 257212,
"copyrightId": 22036,
"status": 0,
"alias": [],
"rtype": 0,
"ftype": 0,
"mvid": 10968017,
"fee": 8,
"rUrl": null,
"mark": 8192
},
{
"id": 571340283,
"name": "那是你离开了北京的生活",
"artists": [
{
"id": 5781,
"name": "薛之谦",
"picUrl": null,
"alias": [],
"albumSize": 0,
"picId": 0,
"img1v1Url": "https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
"img1v1": 0,
"trans": null
}
],
"album": {
"id": 74999481,
"name": "怪咖",
"artist": {
"id": 0,
"name": "",
"picUrl": null,
"alias": [],
"albumSize": 0,
"picId": 0,
"img1v1Url": "https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
"img1v1": 0,
"trans": null
},
"publishTime": 1546185600000,
"size": 10,
"copyrightId": 22036,
"status": 0,
"picId": 109951163755246380,
"mark": 0
},
"duration": 268402,
"copyrightId": 22036,
"status": 0,
"alias": [],
"rtype": 0,
"ftype": 0,
"mvid": 10851234,
"fee": 8,
"rUrl": null,
"mark": 8192
},
{
"id": 574921549,
"name": "怪咖",
"artists": [
{
"id": 5781,
"name": "薛之谦",
"picUrl": null,
"alias": [],
"albumSize": 0,
"picId": 0,
"img1v1Url": "https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
"img1v1": 0,
"trans": null
}
],
"album": {
"id": 74999481,
"name": "怪咖",
"artist": {
"id": 0,
"name": "",
"picUrl": null,
"alias": [],
"albumSize": 0,
"picId": 0,
"img1v1Url": "https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
"img1v1": 0,
"trans": null
},
"publishTime": 1546185600000,
"size": 10,
"copyrightId": 22036,
"status": 0,
"picId": 109951163755246380,
"mark": 0
},
"duration": 250491,
"copyrightId": 22036,
"status": 0,
"alias": [],
"rtype": 0,
"ftype": 0,
"mvid": 10785871,
"fee": 8,
"rUrl": null,
"mark": 73728
},
{
"id": 417859631,
"name": "我好像在哪见过你",
"artists": [
{
"id": 5781,
"name": "薛之谦",
"picUrl": null,
"alias": [],
"albumSize": 0,
"picId": 0,
"img1v1Url": "https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
"img1v1": 0,
"trans": null
}
],
"album": {
"id": 34780271,
"name": "初学者",
"artist": {
"id": 0,
"name": "",
"picUrl": null,
"alias": [],
"albumSize": 0,
"picId": 0,
"img1v1Url": "https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
"img1v1": 0,
"trans": null
},
"publishTime": 1468771200007,
"size": 10,
"copyrightId": 14026,
"status": 0,
"picId": 1369991500930171,
"mark": 0
},
"duration": 279145,
"copyrightId": 14026,
"status": 0,
"alias": [
"动画电影《精灵王座》主题曲"
],
"rtype": 0,
"ftype": 0,
"mvid": 5342354,
"fee": 8,
"rUrl": null,
"mark": 8192
},
]
},
methods :{
doSearch:function (){
//发送异步请求
console.log(vm.keywords)
$.ajax({
url: "http://music.eleuu.com/search",
dataType : "json",
async :true,
//参数
data : {keywords : vm.keywords},
type : "post",
xhrFields: { withCredentials: true },
success:function (res){
if (res.code=200) {
vm.info = res.result.songs;
console.log(vm.info)
}
}
})
},
//为播放按钮设置播放点击事件 加载audio的src
listen : function (event){
vm.currentid= event.srcElement.dataset.mid;
player.src = "https://music.163.com/song/media/outer/url?id="+vm.currentid
player.play();
vm.status=1;
//网易云音乐播放地址
},
// 暂停事件 将audio暂停 并将状态设置为0
stop : function (){
player.pause();
vm.status=0;
},
// 继续事件 将audio继续 并将状态设置为1
continued :function () {
player.play();
vm.status=1;
}
}
});
</script>
</html>
用的是这个大佬的音乐ApI 大家可以去看一看
扫一扫
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
