// music.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div class="wrap"> <!--搜索区域--> <div class="search_bar" id="player"> <!--搜索歌曲--> <input type="text" autocomplete="off" v-model="query" @keyup.enter="searhMusic"> <div> <ul> <li v-for="item in music"> {{item.name}} <a href="javascript:;" @click="playMusic(item.id,item.name)">播放</a> </li> <div> <span><p>播放:{{musicName}}</p></span> <audio ref="audio" v-bind:src="musicUrl" controls autoplay loop class="myaudio"></audio> </div> </ul> </div> </div> </div> <script src="./main.js"></script> </body> </html>
// js 文件
/* 歌曲搜索接口 请求地址:https://autumnfish.cn/search 请求方式:get 请求关键字:keywords 相应内容 获取歌曲地址 https://autumnfish.cn/song/url */ var vu=new Vue({ el:"#player", data:{ query:"", music:[], musicUrl:"", musicName:"" }, methods:{ searhMusic:function(){ var that=this; axios.get("https://autumnfish.cn/search?keywords="+this.query).then(function(res){ console.log(res); if(res.data.result !=null){ that.music=res.data.result.songs } console.log(that.music) }, function(err){ } ) }, playMusic:function(id,name){ this.musicName=name; var that=this; axios.get("https://autumnfish.cn/song/url?id="+id).then(function(res){ console.log("音乐播放路径") console.log(res) that.musicUrl=res.data.data[0].url; }, function(err){ } ) } } })