// 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){
}
)
}
}
})
原文：https://www.cnblogs.com/xianz666/p/14845478.html