基于Vue实现的网页音乐播放器

基于Vue现实网页音乐播放器

该音乐播放器是由父组件和子组件相结合通过axios获取音乐的相关属性，将其显示在界面，通过点击实现相应的操作。链接为https://download.csdn.net/download/hahayixiao1/12380128

这是搜索页面

这是关于音乐界面

这是推荐歌单界面

这是最新音乐界面

这是最新MV界面

这是MV界面

这是音乐列表界面

代码代码较多，给出部分代码，如果需要下载，我已经上传。
App.vue
父组件：

<template><div id="app"><top /><index /></div>
</template>
<script>
import top from './components/01.top.vue';
import index from './components/02.index.vue';
export default {name: 'app',components: {top,index}
};
</script>
<style >
</style>

01.top.vue
子组件

<template><div class="top-container"><div class="left-box"><div class="icon-wrapper" style="padding-top:20px"><span class="iconfont icon-home" @click="toHomeClick()"></span><!-- <span class="iconfont icon-sami-select"></span> --><span class="iconfont icon-full-screen" @click="getFullCreeen(btnStatus)"></span></div><!-- <div class="history-wrapper"><span class="iconfont icon-arrow-lift"></span><span class="iconfont icon-arrow-right"></span></div> --></div><div class="right-box" style="padding-right:700px"><div class="el-input el-input--small el-input--prefix" ><input type="text"   style="width:500px;" autocomplete="off" placeholder="搜索" v-model="inputVal" @keyup.enter="toResult" class="el-input__inner" /><span class="el-input__prefix"><i class="el-input__icon el-icon-search"></i></span></div></div></div>
</template><script>
export default {name: 'top',data() {return {query: '',inputVal: '',n: 0,btnStatus: 0}},methods: {toResult() {if (this.inputVal === '') {// 提示用户this.$message.warning('请输入内容!')} else {// 携带数据去搜索页面this.$router.push(`/result?q=${this.inputVal}`)}},toHomeClick() {if ('/discovery' === this.$route.path) {return}this.$router.push(`/discovery`)},//  点击实现全屏和退出全屏getFullCreeen(btnStatus) {this.btnStatus = this.btnStatus === 0 ? 1 : 0this.n++this.n % 2 == 0 ? this.outFullCreeen(document) : this.inFullCreeen(document.documentElement)},inFullCreeen(element) {let el = elementlet rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreenif (typeof rfs != 'undefined' && rfs) {rfs.call(el)} else if (typeof window.ActiveXObject != 'undefined') {let wscript = new ActiveXObject('WScript.Shell')if (wscript != null) {wscript.SendKeys('{F11}')}}},outFullCreeen(element) {let el = elementlet cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreenif (typeof cfs != 'undefined' && cfs) {cfs.call(el)} else if (typeof window.ActiveXObject != 'undefined') {let wscript = new ActiveXObject('WScript.Shell')if (wscript != null) {wscript.SendKeys('{F11}')}}}}
}
</script><style scoped></style>

02.index.vue
子组件：

<template><div class="index-container" ><!-- 导航区域 --><div class="nav" style="padding-left:50px"><ul><li><router-link to="/discovery"><span class="iconfont icon-find-music"></span>发现音乐</router-link></li><li><router-link to="/playlists"><span class="iconfont icon-music-list"></span>推荐歌单</router-link></li><li><router-link to="/songs"><span class="iconfont icon-music"></span>最新音乐</router-link></li><li><router-link to="/mvs"><span class="iconfont icon-mv"></span>最新MV</router-link></li></ul></div><!-- 主体区域 --><div class="main" ><router-view></router-view></div><!-- 播放标签 --><div class="players" style="background-color:black" ><img :src="imgUrl+'?param=50y50'" alt="" style="padding-top:5px;padding-left:20px" /><h3 style="float:right;padding-right:310px;padding-top:16px;font-size:1em;color:white">{{namees}}</h3></div><div class="player"  ><audio :src="musicUrl" autoplay controls id="music"  > </audio></div></div>
</template><script>
import mains from '../main-dev.js'
export default {name: 'index',data() {return {musicUrl: '',namees:'',imgUrl:''}},mounted() {var _this=this;mains.$on("message",function(message){_this.namees=message})mains.$on("message1",function(message1){_this.imgUrl=message1})//订阅消息this.$pubSub.subscribe('pauseAudio', msg => {var audio = document.getElementById('music')audio.pause()})}
}
</script><style >
</style>

代码实在太多，如果各位需要可以去下载。。
vue启动方法利用cmd 到文件目录下之后npm run serve 如果有相应的组件没有下载上网查询下载。

基于Vue实现的网页音乐播放器相关推荐

基于VUE框架的网页音乐播放器（可自适应手机布局）
该项目是大三上学期学VUE课程老师带我们做的一个项目,整个布局使用VUE框架,界面简洁,功能简单.apI是使用网易云音乐的API. 一.项目展示二.项目代码我使用的软件是VScode,该项目的代码 ...
基于Vue和axios的音乐播放器——悦听音乐效果展示及代码分享
接口还是网易的,毕竟它家的公开,也就搜搜网易云音乐的歌了.不想敲的,可以用下面的 gitee地址: link. https://gitee.com/lyh1999/enjoy-listening-mu ...
10款Flash和Javascript网页音乐播放器
关联:9 Fresh jQuery Media Players 10款音乐播放器, 有基于javascript的网页音乐播放器,也有基于Flash的音乐播放器.赶快挑一款,分享你喜爱的音乐吧! 1. ...
HTML5之audio实战，网页音乐播放器开发
今天我们就基于 HTML5 audio 来,开发一个网页音乐播放器. 在HTML5 新特性中,audio .video 是我们比较关心的新元素,我们终于可以脱离 Flash ,来开发音频.视频播 ...
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署本源码技 ...
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署本源 ...
仿照网易云界面做的Flask网页音乐播放器（豪华版）
一个基于Flask的网页音乐播放器,前端用了h5,css,jq,ajax,hash,数据库是mysql,前端到后端,全都有.管理员有上传音乐的功能,一定要先注册一个账户名为Admin的账户. 主要功能 ...
python + vue + electron实现本地音乐播放器
前言因为受够了一般音乐播放软件的各种没什么用的功能以及各种垃圾广告,所以想自己搞一个音乐播放器来用,花了几天时间就搞了这么个东西,跟大家分享一下. 这个文档并不是针对前端新手的,所以如果你接触前端不 ...
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库本源码技术栈: 项目 ...