最近现在个人博客上嵌入音乐播放,与是撸起袖子就干了起来,由于博客前端是基于Vue开发,所以在网上查了一下,说vue-aplayer使用起来不错,于是便用了起来,效果如下:
此代码可以直接使用,且里面音乐地址链接都是有效的
使用前提:安装vue-aplayer
npm install vue-aplayer –save
vue页面完整代码:
<template>
<div>
<div style="padding:10px 0;">
<aplayer autoplay :music="{
title: '剑心',
artist: '张杰',
src: 'http://m7.music.126.net/20200607161403/ed714b7dbaaee6f862184ff96da280bf/ymusic/3e70/4277/5715/abf7aaf8e92b13f339a59dfc6940499d.mp3',
pic: 'https://p2.music.126.net/ixIs5kkukgNYMmeDsc35_g==/29686813955450.jpg'
}" :list="musicList">
</aplayer>
</div>
</div>
</template>
<script>
import aplayer from "vue-aplayer";
export default {
name: "Aplayer",
components: {
//别忘了引入组件
aplayer: aplayer
},
data() {
return {
musicList: [{
title: '白羊',
artist:'徐秉龙',
src: "http://m8.music.126.net/20200607160502/d62b8d5dc9c90c93a151914be957a617/ymusic/25a2/4ff4/52fc/d664724d25de35a8d4e23c1b986c60b5.mp3",
pic: 'https://p1.music.126.net/tczb_7II9KzSuLQsVt89Gw==/109951163049336667.jpg',
},
{
title: '说谎',
artist: '林宥嘉',
src: "http://m7.music.126.net/20200607161953/af2e67e22c2407fea966c46769106159/ymusic/05ee/4458/4a12/e3ea4813e0c4abafe6c3d40b13cb9f65.mp3",
pic: 'https://p2.music.126.net/mMZNB-jhYsw29K61QtopJA==/109951163187404137.jpg',
},
{
title: '成都',
artist: '赵雷',
src: "http://m7.music.126.net/20200607162234/8629f14056f784879d33dedbab34bf03/ymusic/fa90/df9c/59f7/95c4a2802e0b9191ae1a048f127e53c5.mp3",
pic: 'https://p1.music.126.net/34YW1QtKxJ_3YnX9ZzKhzw==/2946691234868155.jpg'
},
{
title: '陪你到底',
artist: '许华升',
src: "http://m7.music.126.net/20200607161155/1ddfddaa4d9a7c3100c3e7329ce8e3da/ymusic/540f/005e/065e/ce65b58fea742cac390e1499eb32db98.mp3",
pic: 'https://p1.music.126.net/a7QkLGexMQGT2lF3mqcUdw==/109951163693319625.jpg',
},
{
title: '广东爱情故事',
artist: '雨神',
src: "http://m7.music.126.net/20200607160858/6143003bbb9021f13678624978f9ba14/ymusic/c69c/aeed/2bd9/57487636f38ec8ef9355bf67d0741dfe.mp3",
pic: 'https://p1.music.126.net/gjvguk9I-QwuyWFjQHM9SA==/109951163189947600.jpg',
},
{
title: '烟火里的尘埃',
artist: '华晨宇',
src: "http://m8.music.126.net/20200607161716/e2266bad871c28351a3ce257061b3310/ymusic/5d63/5150/0851/5f226aac018cafc2cb248f7d28fbd5b4.mp3",
pic: 'https://p1.music.126.net/_49Xz_x9kTTdEgmYYk6w2w==/6672936069046297.jpg',
}]
};
},
computed: {
}
};
</script>
<style lang="scss" scoped type="text/css">
</style>
若有不懂的可以私信我,希望能帮到你…
1:歌曲搜索接口
请求地址:https://autumnfish.cn/search
请求方法:get
请求参数:keywords(查询关键字)
响应内容:歌曲搜索结果
2:歌曲url获取接口
请求地址:https://autumnfish.cn/song/url
请求方法:get
请求参数:id(歌曲id)
响应内容:歌曲url地址
3.歌曲详情获取
请求地址:https://autumnfish.cn/song/detail
请求方法:get
请求参数:ids(歌曲id)
响应内容:歌曲详情(包括封面信息)
4.热门评论获取
请求地址:https://autumnfish.cn/comment/hot?type=0
请求方法:get
请求参数:id(歌曲id,地址中的type固定为0)
响应内容:歌曲的热门评论
5.mv地址获取
请求地址:https://autumnfish.cn/mv/url
请求方法:get
请求参数:id(mvid,为0表示没有mv)
响应内容:mv的地址
使用时有不懂的地方也可私信我,好了,最好欢迎大家的三连(点赞,关注、收藏),祝你生活愉快……