网络音乐播放器
网络音乐播放器，vue+axios
参照： https://blog.csdn.net/qq_45018127/article/details/118365900
<!--
1、请求地址：https://autumnfish.cn/search
请求方式：get
请求参数：keywords(关键字)
响应内容：歌曲搜索结果
2、请求地址：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、请求地址：https://autumnfish.cn/mv/url
请求方式：get
请求参数：id(mvid,为0说明没有mv)
响应内容：mv的地址
-->
就一个html页面，直接打开就能运行。
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
<!-- import JavaScript -->
<script src="https://unpkg.com/element-plus"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>音乐播放器单页版</title>
</head>
<body>
<div id="app">
<header>
<h2>听歌</h2>
<input type="text" placeholder="请输入要搜索的歌星" autofocus="autofocus" v-model="query"
@keyup.enter="searchMusic" />
</header>
<section>
<ul>
<li class="list">
<dl>
<dd v-for="item in musicList">
<div class="name">
<i class="iconfont icon-bofang3" @click="playMusic(item.id)"></i>
<span @click="playMusic(item.id)" title="点击播放"
style="cursor:pointer;">{{ item.name }}</span>
</div>
<i class="iconfont icon-bofang6" v-show="item.mvid != 0" @click="playMv(item.mvid)"></i>
</dd>
</dl>
</li>
<li class="img">
<h1>正在播放：{{ musicName }}</h1>
<div class="tx" :class="{play:isPlaying}">
<img :src="musicCover">
</div>
</li>
<li class="message">
<h3>热门留言</h3>
<dl>
<dd v-for="item in hotComments">
<div class="pic">
<img :src="item.user.avatarUrl">
</div>
<div class="text">
<span>{{ item.nikename }}</span><br>
<em>{{ item.content }}</em>
</div>
</dd>
</dl>
</li>
</ul>
</section>
<footer>
<audio ref="audio" @play="play" @pause="pause" :src="musicUrl" controls autoplay loop
class="myaudio"></audio>
</footer>
<!--播放mv-->
<div class="vedio_con" v-show="isShow" @click="hide">
<video class="video" :src="mvUrl" controls="controls"></video>
</div>
<div style="text-align: center; font-size: 12px; color: #1a191b94; height: 26px; padding-top: 6px;">
MP3下载：右键点击上面播放器-另存为音频-保存
</div>
</div>
</body>
<script>
const App = {
data() {
return {
query: "张学友",
musicList: [],
musicUrl: "",
musicCover: "",
musicName: "音乐名称",
hotComments: [],
isPlaying: false,
isShow: false,
mvUrl: ""
};
},
methods: {
searchMusic: function () {
var that = this;
// 获取歌曲列表
axios.get("https://autumnfish.cn/search?keywords=" + this.query)
.then(function (res) {
// console.log(res.data.result.songs);
that.musicList = res.data.result.songs;
}, function (err) {
console.log(err);
})
},
playMusic: function (musicId) {
var that = this;
console.log("musicId")
// 获取歌曲地址
axios.get("https://autumnfish.cn/song/url?id=" + musicId)
.then(function (res) {
// console.log(res.data.data[0].url);
that.musicUrl = res.data.data[0].url;
console.log(this.musicUrl);
}, function (err) {
console.log(err);
})
// 获取歌曲详情
axios.get("https://autumnfish.cn/song/detail?ids=" + musicId)
.then(function (res) {
// console.log(res.data.songs[0].name);
that.musicCover = res.data.songs[0].al.picUrl;
that.musicName = res.data.songs[0].name;
}, function (err) {
console.log(err);
})
// 获取歌曲评论
axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId)
.then(function (res) {
// console.log(res.data.hotComments);
that.hotComments = res.data.hotComments;
}, function (err) {
console.log(err);
})
},
play: function () {
this.isPlaying = true;
},
pause: function () {
this.isPlaying = false;
},
playMv: function (mvid) {
var that = this;
axios.get("https://autumnfish.cn/mv/url?id=" + mvid)
.then(function (res) {
// console.log(res.data.data.url);
that.isShow = true;
that.mvUrl = res.data.data.url;
}, function (err) {
console.log(err);
})
},
hide: function () {
this.isShow = false;
}
}
};
const app = Vue.createApp(App);
app.use(ElementPlus);
app.mount("#app");
</script>
</html>
<style>
li {
list-style: none;
}
em {
font-style: normal;
}
dd {
margin: 20px 10px;
}
#app {
position: relative;
display: inline-block;
margin: 100px 300px;
width: 1000px;
border: 1px solid #ccc;
}
header {
background: #33abfa;
display: flex;
justify-content: space-between;
padding: 0 20px;
}
h2 {
color: #fff;
}
input {
display: block;
height: 30px;
width: 400px;
margin-top: 19px;
border-radius: 20px;
padding: 0 15px;
border: none;
background: #92e9fa;
}
input:focus {
outline: none;
}
section {
background-image: linear-gradient(to bottom right, #fffcdd, #f1cdc2);
height: 500px;
overflow: hidden;
}
ul {
display: flex;
justify-content: space-between;
padding: 0;
margin: 0;
}
li {
width: 30%;
}
li:nth-child(2) {
width: 40%;
border-left: 1px solid #aaa;
border-right: 1px solid #aaa;
margin: 20px 0;
}
.list,
.message {
height: 500px;
overflow: auto;
}
.tx {
width: 200px;
height: 200px;
background: url(imgs/item-4.png);
margin: 100px auto;
border-radius: 50%;
overflow: hidden;
border: 30px solid #000;
}
/* 定义动画 */
@keyframes move {
/* 开始状态 */
0% {
transform: rotate(0);
}
/* 结束状态 */
100% {
transform: rotate(360deg);
}
}
.play {
/* 调用动画（简写） */
animation: move 10s linear 0.2s infinite;
}
/* 鼠标经过是停止动画，不然就继续 */
.tx:hover {
/* 动画的播放状态 ：需要单写 */
animation-play-state: paused;
}
.img h1 {
text-align: center;
}
img {
width: 100%;
}
dd {
display: flex;
justify-content: space-between;
}
.pic {
width: 45px;
height: 45px;
border-radius: 50%;
overflow: hidden;
}
.text {
width: 80%;
}
.text span {
font-size: 16px;
font-weight: 600;
}
.text em {
font-size: 14px;
color: #323232;
}
.list dd {
position: relative;
}
.list i {
font-size: 20px;
color: #ac1b02;
}
.name i {
position: absolute;
top: -4px;
left: 0;
font-size: 30px;
color: red;
background: transparent;
}
.name span {
padding-left: 35px;
}
.myaudio {
display: block;
width: 100%;
height: 40px;
background-color: #f0f0f0;
}
.myaudio:focus {
outline: none;
}
.vedio_con {
/* display: none; */
position: absolute;
top: 0;
left: 0;
z-index: 99;
width: 1000px;
height: 611px;
background: rgba(0, 0, 0, .8);
}
.video {
display: block;
width: 100%;
height: 100%;
}
</style>
本文来自云海天，作者：油腻老张，转载请注明原文链接：https://www.cnblogs.com/stou/p/17442160.html
原文地址：https://www.cnblogs.com/stou/p/17442160.html