使用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="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控件, 代码见方法 autoplayneedupdate: false, // 是否更新音乐控件picUrl: "", // 歌曲图片地址hotComment: [], // 歌曲的热门评论hasMV: false, // 该歌曲是否有mvmvUrl: "",},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("音乐暂停");},// 点击播放mvplayMV: 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>

视频教程

更强大的音乐下载网站: 全网音乐下载

使用vue开发的网易云音乐播放器相关推荐

移动应用开发——uni-app框架仿网易云音乐播放器学习心得
目录一.uni-app框架介绍 1.什么是 uni-app 2.为什么要选择uni-app 3.uni-app 统一规范 4.uni-app功能框架二.开发工具与项目创建 1.开发工具 2.项目创 ...
第三方网易云音乐播放器ieaseMusic Mac中文版v1.3.4版
ieasemusic mac中文版是目前mac平台上最好的网易云音乐播放器,与网易云音乐官方客户端最大的区别是,官方的就是「客户端」,完全按照其产品内容进行直接堆砌布局,而 ieaseMusic 是基 ...
树莓派云音乐c语言,基于树莓派的红外遥控版网易云音乐播放器
基于树莓派的红外遥控版网易云音乐播放器.下面是遥控键盘示意图: CH- CH CH+ << >> || - + EQ 0 100+ 200+ 1 2 3 4 5 6 7 8 9 ...
linux树莓派网易云音乐,基于树莓派的红外遥控版网易云音乐播放器
基于树莓派的红外遥控版网易云音乐播放器.下面是遥控键盘示意图: CH- CH CH+ << >> || - + EQ 0 100+ 200+ 1 2 3 4 5 6 7 8 9 ...
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 1
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器前言没有使用任何框架,只是想用最简单纯js的代码实现下前台: Javascript+jQuery 后台: php/nodej ...
HTML网页调用网易云音乐播放器代码
表现形式一:单曲播放调用代码: <iframe frameborder="no" border="0" marginwidth="0" ...
vue3 + TypeScript + vant +pinia 实现网易云音乐播放器
vue3 + TypeScript + vant +pinia 实现网易云音乐播放器实现功能每日推荐私人FM 歌单广场排行榜歌手歌曲播放 mv播放上下滑动切换云盘上传用户登录歌单创 ...
YesPlayMusic:一个高颜值多音频资源的网易云音乐播放器
都2023年了还有人不知道这款开源免费下载的多音频,高颜值的音乐播放器吗(文末有下载地址) 首先我们来看一下YesPlayMusic的特性和网易云音乐播放器的功能大同小异,少了歌曲评论的功能,这个功 ...
Vue仿网易云音乐播放器（一）
项目简介写了很多关于Vue的项目,都是一部分一部分的小模块,这次想把全部学过的关于Vue知识和模块写成一个完整的项目.都是组件化进行mvvm模式开发,实现了view和data的同步更新.仿网易云播放 ...
小项目：网易云音乐播放器
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

使用vue开发的网易云音乐播放器

使用vue开发的网易云音乐播放器相关推荐

最新文章

热门文章