为了方便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="/ajax/libs/vue/2.6.1/vue.min.js"></script><script src="/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控件, 代码见方法 autoplayneedupdate: false, // 是否更新音乐控件picUrl: "", // 歌曲图片地址hotComment: [], // 歌曲的热门评论hasMV: false, // 该歌曲是否有mvmvUrl: "",},methods: {// 搜索音乐searchMusic: function () {axios.get("/search?keywords=" + this.query).then(res => {this.musicList = res.data.result.songs;}).catch(err => {console.error(err);})this.hasMV = false;},// 点击歌名 播放音乐 /song/url?id= (id的值在searchMusic方法中有)clickMusic: function (songId, musicName) {axios.get("/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("/song/detail?ids=" + songId).then(res => {this.picUrl = res.data.songs[0].al.picUrl;}).catch(err => {})// 获取歌曲评论axios.get("/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("音乐暂停");},// 点击播放mvplayMV: function (mvid) {axios.get("/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>
视频教程
更强大的音乐下载网站: 全网音乐下载
