使用vue开发的网易云音乐播放器
为了方便html,css,js(vue)全部写在下面的代码中可直接复制使用<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="vie
·
为了方便html,css,js(vue)全部写在下面的代码中
可直接复制使用
<!DOCTYPE html>
<html lang="zh-CN">
<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>音乐播放器</title>
<style type="text/css">
* {
margin: 4px;
padding: 0;
}
#wrap {
width: 100%;
margin: 0 auto;
}
#header {
/* margin:20px; */
height: 80px;
/* border: solid 1px #0000FF; */
}
#container {
position: relative;
margin-top: 20px;
height: auto;
/* border: solid 1px #ff5100; */
display: flex;
justify-content: center;
align-items: center;
}
#left_side {
float: left;
position: absolute;
top: 0px;
left: 0px;
/* border: solid 1px #00ff73; */
width: 25%;
height: fit-content;
}
#content {
position: relative;
float: inline-start;
margin: 0px 190px 0px 190px;
/* border: solid 1px #0000FF; */
height: 100%;
width: 48%;
text-align: center;
}
#right_side {
position: absolute;
top: 0px;
right: 0px;
/* border: solid 1px #0000FF; */
width: 25%;
height: auto;
}
#footer {
margin-top: 20px;
height: 80px;
width: fit-content;
/* border: solid 1px #0000FF; */
}
li:hover {
background: rgb(186, 220, 240);
}
.searchInput {
padding: 5px;
width: 24%;
border-radius: 3px;
border: 1px solid rgb(107, 96, 96);
outline-style: none;
font-size: medium;
}
.searchbutton {
width: 200px;
height: 30px;
border-width: 0px;
border-radius: 3px;
background: #C20C0C;
cursor: pointer;
color: white;
font-size: 17px;
}
.searchbutton:hover {
background: #a11717;
}
.mvbutton {
width: 25px;
height: 15px;
border-width: 0px;
border-radius: 3px;
cursor: pointer;
font-size: smaller;
}
</style>
</head>
<body>
<h1>音乐播放器</h1>
<div id="wrap">
<div id="player">
<div id="header">
<input class="searchInput" type="text" v-model="query" @keyup.enter="searchMusic" autofocus>
<button @click="searchMusic" class="searchbutton">网易云搜索</button>
<audio controls autoplay v-if="needupdate" id="myaudio" style="width: 100%;" @play="play"
@pause="pause">
<source :src="musicUrl" type="audio/mpeg">
</audio>
</div>
<div id="container">
<div id="left_side">
<ul style="list-style: none;">
<li v-for="item in musicList" @click="clickMusic(item.id, item.name)">
<a href="#">{{ item.name }}</a>
<!-- <input type="button" class="mvbutton" value="mv" v-if="item.mvid!=0" @click="playMV(item.mvid)"> -->
<button class="mvbutton" v-if="item.mvid!=0" @click="playMV(item.mvid)">mv</button>
</li>
</ul>
</div>
<div id="content">
<img id="musicPic" :src="picUrl" alt="" srcset="" width="500px" @click="clickImg"><br>
{{musicName}} <br>
<div v-if="hasMV" style="text-align: center;">
<video :src="mvUrl" controls width="100%"></video>
</div>
</div>
<div id="right_side">
<h2 v-if="hotComment.length>0">网易云热门评论</h2>
<ul style="list-style: none;">
<li v-for="comment in hotComment">
<hr>{{ comment.content }} <br></li>
</ul>
</div>
</div>
<!-- <div id="footer">
</div> -->
</div>
</div>
<!-- <script src="vue.js"></script> -->
<!-- <script src="axios.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.8.0/axios.min.js"></script>
<script>
var app = new Vue({
el: "#player",
data: {
query: "", // 输入框的搜索词
musicList: [], // 生成的音乐列表
musicUrl: "", // 点击某首歌后生成的音乐链接
musicName: "", // 音乐名
musicAudio: null, // 使用js生成的Audio控件, 代码见方法 autoplay
needupdate: false, // 是否更新音乐控件
picUrl: "", // 歌曲图片地址
hotComment: [], // 歌曲的热门评论
hasMV: false, // 该歌曲是否有mv
mvUrl: "",
},
methods: {
// 搜索音乐
searchMusic: function () {
axios.get("https://autumnfish.cn/search?keywords=" + this.query)
.then(res => {
this.musicList = res.data.result.songs;
})
.catch(err => {
console.error(err);
})
this.hasMV = false;
},
// 点击歌名 播放音乐 https://autumnfish.cn/song/url?id= (id的值在searchMusic方法中有)
clickMusic: function (songId, musicName) {
axios.get("https://autumnfish.cn/song/url?id=" + songId)
.then(res => {
this.musicName = musicName;
this.musicUrl = res.data.data[0].url;
// this.updateAudio();
if (this.needupdate == false) {
this.updateAudio();
} else {
this.updateAudio();
// 关键代码!!!!!!!!!
setTimeout(this.updateAudio, 100); // 在一个时间间隔后再更新Audio控件
// this.updateAudio(); // 不设置时间不会更新Audio控件, 即使audio控件中的src已经变化!!!
}
// 获取歌曲图片
axios.get("https://autumnfish.cn/song/detail?ids=" + songId)
.then(res => {
this.picUrl = res.data.songs[0].al.picUrl;
})
.catch(err => {})
// 获取歌曲评论
axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + songId)
.then(res => {
this.hotComment = res.data.hotComments;
})
.catch(err => {})
})
.catch(err => {})
var pic = document.getElementById("musicPic");
pic.width = 500;
this.hasMV = false;
},
autoplay: function () {
// !!! 这里可以使用js代码生成一个Audio元素
if (this.musicAudio != null) {
this.musicAudio.pause();
this.musicAudio = null;
}
musicAudio = new Audio(this.musicUrl);
musicAudio.play(); // 播放歌曲
this.musicAudio = musicAudio;
},
updateAudio: function () {
this.needupdate = !this.needupdate;
},
play: function () {
// console.log("播放音乐");
},
pause: function () {
// console.log("音乐暂停");
},
// 点击播放mv
playMV: function (mvid) {
axios.get("https://autumnfish.cn/mv/url?id=" + mvid)
.then(res => {
this.mvUrl = res.data.data.url;
this.hasMV = true;
var audio = document.getElementById('myaudio');
setTimeout(this.clickImg, 100);
var pic = document.getElementById("musicPic");
pic.width = 200;
// audio.pause(); // 暂停
})
.catch(err => {})
},
// 点击歌曲图片
clickImg: function () {
var audio = document.getElementById('myaudio');
var pic = document.getElementById("musicPic");
if (audio !== null) {
//检测播放是否已暂停.audio.paused 在播放器播放时返回false.
if (audio.paused) {
audio.play(); // 播放
} else {
audio.pause(); // 暂停
}
}
}
}
})
</script>
<script>
// 点击图片 暂停/播放音频
function bf() {
var audio = document.getElementById('myaudio');
if (audio !== null) {
//检测播放是否已暂停.audio.paused 在播放器播放时返回false.
if (audio.paused) {
audio.play(); // 播放
} else {
audio.pause(); // 暂停
}
}
}
</script>
</body>
</html>
更强大的音乐下载网站: 全网音乐下载
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)