自制一个简单的音乐播放器,该播放器实现的功能有歌曲搜索,音乐播放两个功能;
该音乐器的页面如下,(有一点难看);
这个播放器是通过axios来获取所需要的数据的(比如:歌名,播放地址),因为我是用vue-cli脚手架做的,所有该axios是通过cnpm下载的,下载方法是
打开终端
cd (项目名称)
cnpm i axios
然后通过import请求引入axios即可使用;
请求的语法是:
axios({
url: "https://autumnfish.cn/search",
method: "get",
params: {
keywords: this.inputValue,
},
请求的接口是
https://autumnfish.cn/search
关键字:keywords
该接口可以通过歌名搜索出歌曲Id,歌手等内容;
https://autumnfish.cn/song/url?id
关键字:id
通过搜索歌曲Id,可以得到该歌曲的播放地址;
至此实现一个简易播放器的所有数据都以请求完毕通过v-for将数据渲染置标签元素上即可;
这是我的代码;
import axios from "axios";
export default {
name: "app",
data() {
return {
inputValue: "",
result: [],
resurl:[],
murl:"",
};
},
methods: {
play(id){
console.log(id);
axios({url:`https://autumnfish.cn/song/url?id=${id}`,
method:"get",
parseInt:{
id:id
}
}).then((res)=>{
this.resurl=res.data.data
this.murl=this.resurl[0].url
console.log(this.resurl[0].url);
})
},
search() {
axios({
url: "https://autumnfish.cn/search",
method: "get",
params: {
keywords: this.inputValue,
},
}).then((res) => {
this.result = res.data.result.songs
console.log(this.result);
});
},
},
};
在这个播放器中我使用了svg标签做歌名后的那个三角形;
SVG意为可缩放矢量图形;svg使用xml格式定义图像;
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 31"
>
<path
d="M15.552 15.168q0.448 0.32 0.448 0.832 0 0.448-0.448 0.768l-13.696 8.512q-0.768 0.512-1.312 0.192t-0.544-1.28v-16.448q0-0.96 0.544-1.28t1.312 0.192z"
></path>
</svg>