一个简单的在线音乐播放器
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">歌曲IDth><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 ><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>
<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的srclisten : function (event){vm.currentid= event.srcElement.dataset.mid;player.src = "https://music.163.com/song/media/outer/url?id="+vm.currentidplayer.play();vm.status=1;//网易云音乐播放地址},// 暂停事件 将audio暂停 并将状态设置为0stop : function (){player.pause();vm.status=0;},// 继续事件 将audio继续 并将状态设置为1continued :function () {player.play();vm.status=1;}}});
script>
html>
用的是这个大佬的音乐ApI 大家可以去看一看
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！