下载文档原格式
基于JavaScript的移动端音乐播放器设计与开发移动端音乐播放器在当今数字化时代已经成为人们日常生活中不可或缺的一部分。
随着智能手机的普及和移动互联网的发展，人们可以随时随地通过手机应用来欣赏自己喜爱的音乐。
本文将介绍如何基于JavaScript语言设计和开发一个简单而实用的移动端音乐播放器，让用户可以方便地享受音乐。
1. 概述移动端音乐播放器是一款能够在移动设备上播放音频文件的应用程序。
通过该应用程序，用户可以搜索、选择、播放各种类型的音乐，同时还可以进行暂停、调整音量、切换歌曲等操作。
基于JavaScript语言的移动端音乐播放器具有跨平台、易扩展等特点，适用于各种移动设备。
2. 技术选型在设计和开发移动端音乐播放器时，我们选择使用以下技术：HTML5：作为页面结构语言，提供了丰富的标签和API，支持音频播放功能。
CSS3：用于页面样式设计，使播放器界面更加美观和易用。
JavaScript：作为核心开发语言，实现播放器的逻辑控制和交互功能。
Ajax：用于与后端服务器进行数据交互，获取音乐资源信息。
LocalStorage：用于本地存储用户的播放记录和设置信息。
3. 功能设计基于JavaScript的移动端音乐播放器应具备以下主要功能：音乐播放控制：包括播放、暂停、上一首、下一首、调整音量等功能。
歌曲列表展示：显示当前歌单中的所有歌曲，并支持点击选择播放。
歌曲搜索：用户可以通过关键词搜索歌曲，并进行播放。
歌曲收藏：用户可以收藏喜爱的歌曲，方便下次快速查找。
播放历史记录：记录用户最近播放过的歌曲，方便回顾和继续播放。
4. 页面布局与样式设计在移动端音乐播放器的页面设计中，我们需要考虑到不同尺寸设备的适配性和用户体验。
以下是简单的页面布局示例：示例代码star：编程语言：html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Mobile Music Player</title><link rel="stylesheet" href="styles.css"></head><body><div class="player-container"><div class="player-header">Music Player</div><div class="player-body"><div class="music-list"> <!-- 歌曲列表 --><!-- 歌曲项 --></div><div class="player-controls"> <!-- 播放控制按钮 --><!-- 播放、暂停、上一首、下一首等按钮 --> </div></div></div><script src="main.js"></script></body></html>示例代码end通过CSS样式表对页面进行美化和布局调整，使得移动端音乐播放器界面更加友好和易用。
基于Vue框架技术音乐平台的设计与实现1. 引言音乐平台是当下非常受欢迎的应用之一，为用户提供了丰富的音乐资源和交互体验。
本文档将介绍一个基于Vue框架技术的音乐平台的设计与实现，包括平台的功能设计、技术架构和实现要点。
2. 功能设计音乐平台的主要功能设计如下：2.1 用户登录和注册•用户可以通过手机号、邮箱等方式进行注册和登录。
•平台提供基本的用户管理功能，如修改密码、找回密码等。
2.2 音乐推荐和搜索•平台根据用户的兴趣、喜好和历史数据，推荐相应的音乐。
•用户可以通过关键字搜索音乐，平台会提供智能的搜索建议。
2.3 音乐播放和收藏•用户可以在线播放音乐，并支持调整音量、播放模式等功能。
•用户可以将喜欢的音乐添加到收藏夹中，方便以后快速访问。
2.4 音乐上传和分享•用户可以将自己创作的音乐上传至平台。
•用户可以将自己喜欢的音乐分享到社交媒体上。
2.5 歌手和专辑管理•平台提供歌手和专辑信息的管理功能，方便用户查找和了解。
•用户可以浏览歌手的信息和专辑的曲目列表。
3. 技术架构基于Vue框架技术的音乐平台的技术架构如下：3.1 前端架构•使用Vue框架构建前端应用。
•前端使用Vue Router实现页面路由、VueX实现状态管理。
•使用Axios等工具库处理HTTP请求和响应。
3.2 后端架构•使用Node.js构建后端服务器。
•后端使用Express框架处理HTTP请求和响应。
•使用MongoDB存储用户信息、音乐数据等。
•使用JWT实现用户的身份认证和权限管理。
3.3 数据库设计•用户表：存储用户的基本信息，如用户名、密码、邮箱等。
•音乐表：存储音乐的基本信息，如歌曲名、歌手、专辑等。
•收藏表：存储用户收藏的音乐信息。
4. 实现要点实现基于Vue框架技术的音乐平台的一些要点如下：4.1 组件设计•根据平台的功能设计，设计各个组件，如登录组件、注册组件、音乐推荐组件等。
•合理划分组件的职责，方便复用和维护。
基于Vue的音乐网站设计与实现随着互联网的发展，音乐已经成为人们生活中不可或缺的一部分。
近年来，越来越多的音乐爱好者开始通过互联网收听和下载音乐。
因此，本文将介绍如何使用Vue框架设计并实现一个基于Web的音乐网站，为用户提供更加便捷的音乐体验。
本项目的目标是设计并实现一个基于Vue的音乐网站，该网站应该具备以下功能：Vue是一种流行的JavaScript框架，用于构建交互式的Web应用程序。
Vue的核心思想是将应用程序分解为多个独立的组件，这些组件可以单独开发和测试，然后组合在一起形成一个完整的应用程序。
Vue 还提供了指令、过滤器、路由、状态管理等强大的功能，使得开发人员可以更加高效地开发应用程序。
(1)歌曲列表组件：用于显示音乐库中的所有歌曲，用户可以通过搜索框搜索歌曲；(2)歌曲播放组件：用于播放歌曲并显示播放进度；(3)用户登录组件：用于用户注册、登录和注销；(4)个人歌单组件：用于显示和管理用户的个人歌单；(5)其他用户歌单组件：用于显示其他用户的歌单并他们。
(1)提供RESTful API接口，用于前端发送请求；(2)与数据库进行交互，实现数据的增删改查操作；(3)对用户进行身份认证，确保用户登录状态和权限管理。
(1)安装Vue CLI脚手架工具，创建Vue项目；(2)安装需要的npm包，如axios、vue-router等；(2)使用Vue Router实现路由跳转；(3)使用axios发送请求并处理响应数据。
(1)使用Express框架搭建后端服务器；(3)使用Passport模块进行用户身份认证。
(1)编写单元测试用例，对前后端进行测试；(2)进行集成测试，确保前后端能够正常配合工作。
(1)将前端和后端代码分别部署到不同的服务器上；(2)配置负载均衡器，提高网站的并发性能。
本文介绍了如何使用Vue框架设计和实现一个基于Web的音乐网站。
通过本项目的实践，我们深刻认识到Vue作为一种现代化JavaScript 框架在开发Web应用程序方面的高效性和灵活性。
vue2.0实现⾳乐视频播放进度条组件基于vue2.0实现⾳乐/视频播放进度条组件的⽅法及代码解释，具体内容如下需求分析：①：进度条随着歌曲的播放延长，歌曲播放完时长度等于⿊⾊总进度条长度；时间实时更新。
②：当滑动按钮时，实时更新播放时间，橙⾊进度条长度也会随着按钮的滑动⽽改变，当滑动结束时，橙⾊区域停留在滑动结束的位置，歌曲从当前进度开始播放。
③：点击进度条，橙⾊进度条长度变为点击处⾄起点的长度，并从当前点开始播放歌曲。
⼤概思路：①：左边的时间可以通过audio播放时派发的timeupdate事件获取，右边的时间为接⼝获取的当前歌曲的总时间。
②：进度条⼦组件的长度通过⽗组件传⼊⼀个percent值计算，percent值为播放进度与总进度的⽐值。
③：进度条的滑动及点击结束后，需要向⽗组件传递⼀个percent值，使⽤this.$emit()像⽗组件派发事件，⽗组件中设置事件响应函数，接收percent参数值，⽤于改变audio中当前播放的⾳乐进度。
详细实现，关键代码已经注释：先上组件源码：<template><div class="progress-bar" ref="progressBar" @click="progressClick"><div class="bar-inner"><div class="progress" ref="progress"></div><div class="progress-btn-wrapper"ref="progressBtn"@touchstart.prevent = "progressTouchStart"@touchmove.prevent = "progressTouchMove"@touchend = "progressTouchEnd"><div class="progress-btn"></div></div></div></div></template><script type="text/ecmascript-6">// 进度条按钮宽度,由于style中没有设置width,因此只能⽤clientWidth获取export default {data() {return {btnWidth: {type: Number,default: 0},touchInfo: {initiated: false}}},props: {percent: {type: Number,default: 0}},mounted() {this.btnWidth = document.getElementsByClassName('progress-btn')[0].clientWidth},methods: {// 点击按钮progressTouchStart(e) {// 记录touch事件已经初始化this.touchInfo.initiated = true// 点击位置this.touchInfo.startX = e.touches[0].pageX// 点击时进度条长度this.touchInfo.left = this.$refs.progress.clientWidth},// 开始移动progressTouchMove(e) {if (!this.touchInfo.initiated) {return}// 计算移动距离const moveX = e.touches[0].pageX - this.touchInfo.startX// 设置偏移值const offsetWidth = Math.min(Math.max(0, this.touchInfo.left + moveX),this.$refs.progressBar.clientWidth - this.btnWidth)this._setOffset(offsetWidth)},// 移动结束progressTouchEnd(e) {this.touchInfo.initiated = false// 向⽗组件派发事件,传递当前百分⽐值this._triggerPercent()},// 进度条点击事件progressClick(e) {console.log('clikc')// 设置进度条及按钮偏移this._setOffset(e.offsetX)// 通知⽗组件播放进度变化this._triggerPercent()},_triggerPercent() {const barWidth = this.$refs.progressBar.clientWidth - this.btnWidthconst percent = Math.min(1, this.$refs.progress.clientWidth / barWidth)this.$emit('percentChange', percent)},// 设置偏移_setOffset(offsetWidth) {// 设置进度长度随着百分⽐变化this.$refs.progress.style.width = `${offsetWidth}px`// 设置按钮随着百分⽐偏移this.$refs.progressBtn.style.transform = `translate3d(${offsetWidth}px, 0, 0)` }},watch: {// 监听歌曲播放百分⽐变化percent(newPercent, oldPercent) {if (newPercent > 0 && !this.touchInfo.initiated) {// 进度条总长度const barWidth = this.$refs.progressBar.clientWidth - this.btnWidthconst offsetWidth = barWidth * newPercent// 设置进度条及按钮偏移this._setOffset(offsetWidth)}}}}</script><style lang="stylus" rel="stylesheet/stylus">@import "~common/stylus/variable.styl".progress-barheight 0.5rem.bar-innerposition relativetop 0.2remheight 0.08rembackground rgba(0, 0, 0, 0.3).progressposition absoluteheight 100%background $color-theme.progress-btn-wrapperposition absoluteleft -0.25remtop -0.25remwidth 0.5remheight 0.5rem.progress-btnposition relativetop 0.12remleft 0.12rembox-sizing border-boxwidth 0.32remheight 0.32remborder 0.06rem solid $color-textborder-radius 50%background $color-theme</style>此为progerss-bar.vue组件源码，组件所需要⽗组件传⼊的值只有⼀个“percent”，为⽗组件中audio当前播放时间与总时间的⽐值，⽤于计算此组件中橙⾊进度条的长度。
vue+elementui实现播放器功能的实例代码没有效果图的展⽰都是空⼝⽆凭1.基于audio并结合elementUI 的进度条实现2.实现了播放器基本的功能，播放/暂停、快进、静⾳、调节声⾳⼤⼩、下载等功能html代码，关键部分已加注释<div class="right di main-wrap" v-loading="audio.waiting"><!-- 此处的ref属性，可以很⽅便的在vue组件中通过 this.$refs.audio获取该dom元素 --><audio ref="audio" class="dn":src="url" :preload="audio.preload"@play="onPlay"@error="onError"@waiting="onWaiting"@pause="onPause"@timeupdate="onTimeupdate"@loadedmetadata="onLoadedmetadata"></audio><div class="w-full"><div class="flex items-center w-10/12 mx-auto"><!-- 当前时间 --><el-tag type="info">{{ audio.currentTime | formatSecond}}</el-tag><!-- 滚动条 --><el-slider v-show="!controlList.noProcess" v-model="sliderTime" :format-tooltip="formatProcessToolTip" @change="changeCurrentTime" class="slider_time"></el-slider> <!-- 总时长 --><el-tag type="info">{{ audio.maxTime | formatSecond }}</el-tag></div><div class="mt-3 flex items-center w-1/2 mx-auto justify-around"><!-- 播放/暂停 --><el-button type="text" @click="startPlayOrPause">{{audio.playing | transPlayPause}}</el-button><!-- 快进 --><el-button v-show="!controlList.noSpeed" type="text" @click="changeSpeed">{{audio.speed | transSpeed}}</el-button><!-- 静⾳ --><el-button v-show="!controlList.noMuted" type="text" @click="startMutedOrNot">{{audio.muted | transMutedOrNot}}</el-button><!-- ⾳量 --><div class="flex items-center"><span class="mr-2 text-sm">⾳量</span><el-slider v-show="!controlList.noVolume" v-model="volume" :format-tooltip="formatVolumeToolTip" @change="changeVolume" class="slider_voice"></el-slider></div><!-- 下载 --><a :href="url" rel="external nofollow" v-show="!controlList.noDownload" target="_blank" class="download text-sm" download>下载</a></div></div></div>js代码<script>// 将整数转换成时：分：秒的格式function realFormatSecond(second) {var secondType = typeof secondif (secondType === 'number' || secondType === 'string') {second = parseInt(second)var hours = Math.floor(second / 3600)second = second - hours * 3600var mimute = Math.floor(second / 60)second = second - mimute * 60return hours + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)} else {return '0:00:00'}}export default {name: 'voicetotext',type: Array,default () {return [1, 1.5, 2]}},theControlList: {type: String,default: ''}},data(){return{url: 'https:///element-audio/static/falling-star.mp3',audio: {currentTime: 0,maxTime: 0,playing: false,muted: false,speed: 1,waiting: true,preload: 'auto'},sliderTime: 0,volume: 100,speeds: this.theSpeeds,controlList: {// 不显⽰下载noDownload: false,// 不显⽰静⾳noMuted: false,// 不显⽰⾳量条noVolume: false,// 不显⽰进度条noProcess: false,// 只能播放⼀个onlyOnePlaying: false,// 不要快进按钮noSpeed: false}}},methods:{setControlList () {let controlList = this.theControlList.split(' ')controlList.forEach((item) => {if(this.controlList[item] !== undefined){this.controlList[item] = true}})},changeSpeed() {let index = this.speeds.indexOf(this.audio.speed) + 1this.audio.speed = this.speeds[index % this.speeds.length]this.$refs.audio.playbackRate = this.audio.speed},startMutedOrNot() {this.$refs.audio.muted = !this.$refs.audio.mutedthis.audio.muted = this.$refs.audio.muted},// ⾳量条toolTipformatVolumeToolTip(index) {return '⾳量条: ' + index},// 进度条toolTipformatProcessToolTip(index = 0) {index = parseInt(this.audio.maxTime / 100 * index)return '进度条: ' + realFormatSecond(index)},// ⾳量改变changeVolume(index = 0) {this.$refs.audio.volume = index / 100this.volume = index},// 播放跳转changeCurrentTime(index) {this.pausePlay()this.$refs.audio.currentTime = parseInt(index / 100 * this.audio.maxTime) },startPlayOrPause() {return this.audio.playing ? this.pausePlay() : this.startPlay()},// 开始播放startPlay() {this.$refs.audio.play()// 暂停pausePlay() {this.$refs.audio.pause()},// 当⾳频暂停onPause () {this.audio.playing = false},// 当发⽣错误, 就出现loading状态onError () {this.audio.waiting = true},// 当⾳频开始等待onWaiting (res) {console.log(res)},// 当⾳频开始播放onPlay (res) {console.log(res)this.audio.playing = truethis.audio.loading = falseif(!this.controlList.onlyOnePlaying){return}let target = res.targetlet audios = document.getElementsByTagName('audio');[...audios].forEach((item) => {if(item !== target){item.pause()}})},// 当timeupdate事件⼤概每秒⼀次，⽤来更新⾳频流的当前播放时间onTimeupdate(res) {// console.log('timeupdate')// console.log(res)this.audio.currentTime = res.target.currentTimethis.sliderTime = parseInt(this.audio.currentTime / this.audio.maxTime * 100) },// 当加载语⾳流元数据完成后，会触发该事件的回调函数// 语⾳元数据主要是语⾳的长度之类的数据onLoadedmetadata(res) {this.audio.waiting = falsethis.audio.maxTime = parseInt(res.target.duration)}},filters: {formatSecond(second = 0) {return realFormatSecond(second)},transPlayPause(value) {return value ? '暂停' : '播放'},transMutedOrNot(value) {return value ? '放⾳' : '静⾳'},transSpeed(value) {return '快进: x' + value}},created() {this.setControlList()}}</script>CSS代码⽤的是SCSS<style scoped lang="scss">.right{width: 100%;padding: 10px 15px;display: inline-block;.slider {display: inline-block;position: relative;top: 14px;margin-left: 15px;}.slider_time{width: 550px;margin: 0 10px;.slider_voice{width: 80px;}.download {color: #409EFF;margin-left: 15px;}.dn{display: none;}}</style>到此这篇关于vue + element ui实现播放器功能的⽂章就介绍到这了,更多相关vue element ui播放器内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。
vue⾳乐播放器插件vue-aplayer的配置及其使⽤实例详解昨天在vue的官⽹上看到vue-aplayer这个⾳乐播放器的插件，由于个⼈有⽐较喜欢⾳乐，所以就拿过来玩⼀玩，感觉还是⽐较实⽤的，界⾯美观。
⾸先，我们先安装 npm install vue-aplayer --save ，之后在组件中引⼊ import VueAplayer from 'vue-aplayer'，下⾯就是源码，可供参考：<template><div><div style="padding:10px 0;"><a-player :music="songList" :showlrc="3" :narrow="false" theme="#b7daff" mode="circulation" v-if="flag" listmaxheight='96px' ref="player"></a-player> </div></div></template><script>import axios from 'axios'import VueAplayer from 'vue-aplayer'export default {components: {//别忘了引⼊组件'a-player': VueAplayer},data () {return {flag:false,musicList:'',songList:[]}},async mounted () {//异步加载，先加载出player再使⽤await this.init();let aplayer = this.$refs.player.control;aplayer.play();},methods:{async init () {//这边是引⼊了axios然后使⽤的get请求的⼀个⾳乐列表接⼝const getMusicList = url => axios.get(url);//这边url随⼤家更改了let url = '';let data = await getMusicList(url);//以下就是这边对请求的⼀个处理，看接⼝了if(data && data.data.showapi_res_code==0){this.musicList = data.data.showapi_res_body.pagebean.songlist;for(let i=0;i<=this.musicList.length;i++){if(i<=9){let obj={};//url=>歌曲地址 title=>头部 author=>歌⼿ pic=>写真图⽚ lrc=>歌词//其中url必须有，其他的都是⾮必须obj.title = this.musicList[i].songname;obj.author = this.musicList[i].singername;obj.url = this.musicList[i].url;obj.pic = this.musicList[i].albumpic_small;obj.lrc = this.musicList[i].irl;//把数据⼀个个push到songList数组中，在a-player标签中使⽤ :music="songList" 就OK了this.songList.push(obj);}}//因为是异步请求，所以⼀开始播放器中是没有歌曲的，所有给了个v-if不然会插件默认会先⽣成播放器，导致报错(这个很重要)this.flag = true;};}}}</script><style scoped></style>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
vue⼀个页⾯实现⾳乐播放器的⽰例本⽂介绍了vue⼀个页⾯实现⾳乐播放器的⽰例，分享给⼤家，具体如下：效果如下：开发前构思界⾯做⾳乐播放器，界⾯⼀定要炫酷。
太low了听歌没感觉。
本⾝是为了在上班的时候⽤，于是做成了⼀个类似⽹易云⾳乐的界⾯，⼤⼩合适。
不⽤兼容⼿机端。
⽤css做图标本怀着简单实⽤的需求去考虑，图标可⽤SVG、url或者css。
相对于url，SVG和css更好⼀些。
为了修炼，最终选择的css。
利⽤好after和before，能减少很多dom嵌套。
.next {position: relative;display: inline-block;height: 36px;width: 36px;border: 2px solid #fff;border-radius: 20px;-webkit-border-radius: 20px;-moz-border-radius: 20px;}.next:before {content: '';height: 0;width: 0;display: block;border: 10px transparent solid;border-right-width: 0;border-left-color: #fff;position: absolute;top: 8px;left: 10px;}.next:after {content: '';height: 20px;width: 4px;display: block;background: #fff;position: absolute;top: 8px;left: 22px;}画⼀个唱⽚⽹易云的唱⽚很好看，我也要弄⼀个唱⽚! ⽤好 box-shadow ，⼀个元素便可以做成很好看的唱⽚效果。
.disc {position: relative;margin-top: 10%;margin-left: 10%;width: 300px;height: 300px;border-radius: 300px;transform: rotate(45deg);background-image: radial-gradient(5em 30em ellipse, #fff, #000);border: 2px solid #131313;box-shadow: 0 0 0 10px #343935;opacity: 0.7;}⽤range做进度条audio本⾝的样式很难看，并且不同的浏览器呈现出来的效果也不⼀样。
vue-music关于Player（播放器组件）--播放和进度条迷你播放器1.播放器组件会在各个页⾯的情况下会打开。
⾸先在vuex state.js 中定义全局的播放器状态import {playMode} from 'common/js/config.js';const state = {singer:{},playing:false, //是否播放fullScreen:false, //是否全屏playList:[], //播放列表sequenceList:[], // ⾮顺序播放列表mode:playMode.sequence, // 播放模式（顺序0，循环1，随机2）currentIndex:-1, //当前播放索引}export default state---------------------------------------------// config.jsexport const playMode = {sequence:0,loop:1,random:2}2.进⼊播放器页⾯时获取播放列表数据，改变播放状态在music-list列表中打开在song-list 组件中派发事件到⽗组件，传⼊当前歌曲的信息和索引<li @click="selectItem(song,index)" v-for="(song,index) in songs" class="item">------------------------------selectItem(item,index){this.$emit('select',item,index)},在music-list 组件中接受派发事件。
<song-list :rank="rank" :songs="songs" @select="selectItem"></song-list>3. 如果commit 多个状态在actions ⾥设置import {playMode} from 'common/js/config.js'export const selectPlay = function({commit,state},{list,index}){commit(types.SET_SEQUENCE_LIST, list)commit(types.SET_PLAYLIST, list)commit(types.SET_CURRENT_INDEX, index)commit(types.SET_FULL_SCREEN, true)commit(types.SET_PLAYING_STATE, true)}4. 在music-list 组件中⽤mapActions提交改变值import {mapActions} from 'vuex'methods:{selectItem(item,index){this.selectPlay({list:this.songs,index})},...mapActions(['selectPlay'])},5.在palyer 中获取vuex 全局状态，赋值状态到相应位置（代码为完整代码，对照后⾯讲解慢慢理解）<div class="player" v-show="playList.length>0"> // 如果有列表数据则显⽰<div class="normal-player" v-show="fullScreen"> //如果全屏<div class="background"><img :src="currentSong.image" alt="" width="100%" height="100%"> //模糊背景图</div><div class="top"><div class="back" @click="back"><i class="icon-back"></i></div><h1 class="title" v-html=""></h1> //当前歌曲名称<h2 class="subtitle" v-html="currentSong.singer"></h2> //当前歌⼿名</div><div class="middle"><div class="middle-l"><div class="cd-wrapper"><div class="cd" :class="cdCls"><img :src="currentSong.image" alt="" class="image"> //封⾯图</div></div></div></div><div class="bottom"><div class="progress-wrapper"><span class="time time-l">{{ format(currentTime) }}</span><div class="progress-bar-wrapper"><progress-bar :percent="percent" @percentChange="onProgressBarChange"></progress-bar></div><span class="time time-r">{{ format(currentSong.duration) }}</span></div><div class="operators"><div class="icon i-left"><i :class="iconMode" @click="changeMode"></i></div><div class="icon i-left" :class="disableCls"><i @click="prev" class="icon-prev"></i></div><div class="icon i-center" :class="disableCls"><i :class="playIcon" @click="togglePlaying"></i></div><div class="icon i-right" :class="disableCls"><i @click="next" class="icon-next"></i></div><div class="icon i-right"><i class="icon icon-not-favorite"></i></div></div></div></div></transition><transition name="mini"><div class="mini-player" v-show="!fullScreen" @click="open"><div class="icon"><img :src="currentSong.image" alt="" width="40" height="40" :class="cdCls"></div><div class="text"><h2 class="name" v-html=""></h2><p class="desc" v-html="currentSong.singer"></p></div><div class="control"><i :class="miniIcon" @click.stop="togglePlaying"></i></div><div class="control"><i class="icon-playlist"></i></div></div></transition><audio :src="currentSong.url" ref="audio" @canplay="ready" @error="error" @timeupdate="updateTime" @ended="end"></audio></div>打开播放器的状态import {mapGetters,mapMutations} from 'vuex';...mapGetters(['fullScreen','playList','currentSong','playing','currentIndex',])注意：不可在组件中直接赋值改版vuex 中的状态 this.fullScreen = false 需要通过mutations 改变，定义mutation-types 和mutations 然后⽤vuex的 mapMutations 代理⽅法调⽤[types.SET_FULL_SCREEN](state, flag) {state.fullScreen = flag},import {mapGetters,mapMutations} from 'vuex';methods:{...mapMutations({setFullScreen:"SET_FULL_SCREEN",}),back(){this.setFullScreen(false)},}设置点击播放按钮⽅法<i :class="playIcon" @click="togglePlaying"></i>togglePlaying(){this.setPlayingState(!this.playing); //改变全局变量playing 的属性},// 然后watch 监听playing 操作实际的audio 标签的播放暂停watch:{playing(newPlaying){let audio = this.$refs.audio;this.$nextTick(() => {newPlaying ? audio.play():audio.pause();})}},// ⽤计算属性改变相应的播放暂停图标playIcon(){return this.playing? 'icon-pause':'icon-play'},设置点击播放上⼀⾸和下⼀⾸按钮⽅法。
Vue+ElementUI：⼿把⼿教你做⼀个audio组件⽬的本项⽬的⽬的是教你如何实现⼀个简单的⾳乐播放器（这并不难）本项⽬并不是⼀个可以⽤于⽣产环境的element播放器，所以并没有考虑太多的兼容性问题本项⽬不是ElementUI的⼀个⾳频插件，只是⼀个教程，不过你可以⾃⾏扩展实现本项⽬只是为了学习audio相关事件以及API本项⽬的⾳频⽂件是位于static/falling-star.mp3，歌曲名为：星球坠落Live 艾热、李佳隆查看在线demo:项⽬地址:运⾏cd element-aduio && yarn && yarn run dev⽂档1. 简介1.1 相关技术(之前我⽤npm, 并使⽤cnpm的源，但是⽤了yarn之后，我发现它⽐cnpm的速度还快，功能更好，我就毫不犹豫选择yarn了) 1.2 从本教程你会学到什么？Vue单⽂件组件开发知识Element UI基本⽤法Audio原⽣API及Audio相关事件⾳频播放器的基本原理⾳频的播放暂停控制⾳频显⽰时间⾳频进度条控制与跳转⾳频⾳量控制⾳频播放速度控制⾳频静⾳控制⾳频下载控制个性化配置与排他性播放⼀点点ES6语法1.3 学前准备基本上不需要什么准备，但是如果你能先看⼀下Aduio相关API和事件将会更好1.4 在线demo没有在线demo的教程都是耍流氓2 开始编码2.1 项⽬初始化➜ test vue init webpack element-audioA newer version of vue-cli is available.latest: 2.9.2installed: 2.9.1Project name element-audioProject description A Vue.js projectAuthor wangdd <wangdd@>Vue build standaloneInstall vue-router NoUse ESLint to lint your code NoSet up unit tests NoSetup e2e tests with Nightwatch NoShould we run `npm install` for you after the project has been created (recommended) npm➜ test cd element-audio➜ element-audio npm run dev图⽚12.2 安装ElementUI并插⼊audio标签2.2.1 安装ElementUIyarn add element-ui // or npm i element-ui -S2.2.2 在src/main.js中引⼊Element UI// filename: src/main.jsimport Vue from 'vue'import ElementUI from 'element-ui'import App from './App'import 'element-ui/lib/theme-chalk/index.css'Vue.config.productionTip = falsee(ElementUI)/* eslint-disable no-new */new Vue({el: '#app',template: '<App/>',components: { App }})2.2.3 创建src/components/VueAudio.vue// filename: src/components/VueAudio.vue<template><div><audio src="/secret base~.mp3" controls="controls"></audio> </div></template><script>export default {data () {return {}}}</script><style></style>2.2.4 修改src/App.vue, 并引⼊VueAudio.vue组件// filename: src/App.vue<template><div id="app"><VueAudio /></div></template><script>import VueAudio from './components/VueAudio'export default {name: 'app',components: {VueAudio},data () {return {}}}</script><style></style>2.3 ⾳频的播放暂停控制我们需要⽤⼀个按钮去控制⾳频的播放与暂停，这⾥调⽤了audio的两个api,以及两个事件audio.play()audio.pause()play事件pause事件修改src/components/VueAudio.vue// filename: src/components/VueAudio.vue<template><div><!-- 此处的ref属性，可以很⽅便的在vue组件中通过 this.$refs.audio获取该dom元素 --><audio ref="audio"@pause="onPause"@play="onPlay"src="/secret base~.mp3" controls="controls"></audio><!-- ⾳频播放控件 --><div><el-button type="text" @click="startPlayOrPause">{{audio.playing | transPlayPause}}</el-button> </div></div></template><script>export default {data () {return {audio: {// 该字段是⾳频是否处于播放状态的属性playing: false}}},methods: {// 控制⾳频的播放与暂停startPlayOrPause () {return this.audio.playing ? this.pause() : this.play()},// 播放⾳频play () {this.$refs.audio.play()},// 暂停⾳频pause () {this.$refs.audio.pause()},// 当⾳频播放onPlay () {this.audio.playing = true},// 当⾳频暂停onPause () {this.audio.playing = false}},filters: {// 使⽤组件过滤器来动态改变按钮的显⽰transPlayPause(value) {return value ? '暂停' : '播放'}}}</script><style></style>图3 ⾳频播放与暂停2.4 ⾳频显⽰时间⾳频的时间显⽰主要有两部分，⾳频的总时长和当前播放时间。
毕业设计（论文）题目：基于Vue的音乐播放器的设计与实现指导教师：职称：______________指导教师(校外)：职称： ___________学生姓名：学号：_ ___________专业：计算机科学与技术（软件方向）院（系）：信息工程学院___________完成时间：______________________________年月日使用Vue实现音乐播放器的核心功能摘要随着前端技术的发展和迭代，前端开发工程师在java的MVC框架基础上，推出了前端的MVC，MVP，MVVM等架构模式，利用目前主流的前端开发技术，如React、AngularJS等，我们可以很轻松的构建起一个不需要服务器端渲染就可以展示的WebApp，同时这类框架也都提供了前端路由功能，后台可以不再去控制路由的跳转，将原本属于后台的业务逻辑全部丢给前端，做到了前后端的架构分离，这也是近几年来最为流行和使用的开发手段。
2016年Vue2.0的正式发布，更是在前端开发工程师之间掀起了轩然大波，Vue的快速响应机制，数据绑定机制，组件化开发等，在功能和效率上做的尤为突出，本文通过最先进的前端模式架构结合JavaScript、Vue-Router、DOM、axios、vuex、Muse-UI（一个基于Vue2.x的material design 风格UI框架）等前端的核心开发技术，在MVVM模式的基础上，来完成一个移动音乐播放器的前端开发。
本论文的音乐播放器采用了WebApp的开发模式，利用HTML5语言提供的新特性和Vue的新技术对播放器进行编写。
同时给出了详细的系统设计过程换和部分界面图及主要功能运行的流程图，本文还对开发过程中遇到的问题和解决方法进行了详细的讨论，该音乐播放器主要通过Vue的新技术去实现音乐的播放、暂停、停止、上一首、下一首还有歌词的显示，播放的进度条等功能于一体，性能良好。
使用HTML5模式开发的WebApp还有它最为重要的一个优点就是，在各种系统中它都能够独立运行，而不像安卓和iOS一样只能在各自的平台运行，做到了真正的跨平台开发，实现了一次开发多平台使用。
关键词：音乐播放器，HTML5，Vue，MVVM，webpackAbstractWith the development of the front-end technology and iterative development engineer in MVC based on the framework of Java, launched in front of MVC, MVP, MVVM architecture, using the current mainstream technology development, such as React, AngularJS and so on, we can easily construct a server-side rendering can display WebApp, the framework also provides front-end routing function, the background can be no longer to control the routing of the jump, the business logic originally belonging to the background all thrown to the front, do before and after the end of the architecture is separated, which is the most popular in recent years and the use of development tools.In 2016, Vue2.0 officially released, it caused a great disturbance between the front-end development engineer, rapid response mechanism of Vue, data binding mechanism, component development, the function and efficiency of the front-end architecture is particularly prominent, through the most advanced mode of combination of JavaScript, Vue-Router, DOM, Axios, vuex, Muse-UI (a based on the material design style UI framework Vue2.x) core technology for the development of the front end, on the basis of MVVM, to complete the front-end development of a mobile music player.The music player using the WebApp development model, new technology and new characteristic of Vue and using HTML5 language to provide for the player to write. It also gives the flow chart of the system design process with the change and part of the interface diagram and main function, this paper also encountered in the process of development problems and Solutions were discussed in detail, the music player play, pause, stop, on the one, the next song, lyrics display and other functions, good performance of.WebApp as well as its most important advantage is that in various systems it can run independently, unlike Android and iOS as platform to run only in their the achieved true cross platform development, to achieve a multi platform development.Key words: music player, HTML5, Vue,MVVM, webpack1 前言1.1 选题背景随着计算机技术的不断发展，移动互联网在生活中被应用的越来越广泛，特别是多媒体技术在我们生活中被应用到的更多，这使得我们的业余生活变得越来越丰富。
作为移动音乐播放器，市场有着很多种，比如：酷狗、QQ音乐、百度音乐的等，这些都是一些非常优秀的播放器，针对市场上的主流的移动设备，主要分为两大种，一种是以苹果公司的设备为主的iOS 系统，另一种就是以Google 公司开发的基于Linux的自由及开放源代码的操作系统Android。
因此在开发的过程中，要针对这两种设备开发两款匹配这两种设备的App，这无疑加大了开发的工作量，耗费了更多的开发时间。
使用Vue设计的这个音乐播放器使用到是HTML5的开发技术，做到了真正彻底的跨平台开发，实现了一次开发多平台应用，极大的缩短了开发过程提高了工作的效率。
1.2 HTML5发展现状及趋势HTML5之所以能引发如此广泛的效应，其根本的原因在于它不只是一种标记语言，它为下一代互联网提供了全新的框架和平台，包括提供免插件的音视频、图像动画、本体存储以及更多酷炫而且重要的功能，并使这些应用标准化和开放化，从而使互联网也能够轻松实现类似桌面的应用体验。
HTML5的最显著的优势在于跨平台性。
它可以轻易地移植到各种不同的开放平台、应用平台上，打破各自为政的局面。
这种强大的兼容性可以显著地降低开发与运营成本，可以让企业特别是创业者获得更多的发展机遇。
此外，HTML5的本地存储特性也给使用者带来了更多便利。
基于H5开发的轻应用比本地APP拥有更短的启动时间，更快的联网速度，而且无需下载占用存储空间，特别适合手机等移动媒体。
而H5让开发者无需依赖第三方浏览器插件即可创建高级图形、版式、动画以及过渡效果，这也使得用户用较少的流量就可以欣赏到炫酷的视觉听觉效果。
在国内，腾讯，阿里巴巴，百度，新浪等互联网公司也开始将自家的产品开始向HTML5转换，而且随着苹果公司的iOS系统不再支持flash,更是使得H5技术大火了一把，2014年10月29日，HTML5的规范制定完成，截止到目前，HTML5的普及已经广泛地被人们所接受，大概有90%以上网站都在使用HTML技术，而在移动端，基本上全部都是HTML5的天下。
1.3 目的和意义本次毕业设计的目的在于，结合HTML5所提供的先进思想和媒体的多样控制手段，结合前后端架构分离的思想，利用Vue.js这个新的前端技术，开发出满足用户对音乐播放器的习惯和对媒体播放器的要求，设计出一款符合用户体验的，界面清楚明了，操作简单，可以在播放列表中加载多个多媒体文件，并且能够实现连续播放的音乐播放器。
该软件开发的意义在于，随着javascript 语法的不断扩充，使得前端设计师的责任不仅仅是再做一些简单的页面实现，而且还能够更加高效的处理各种复杂的业务逻辑，完成从设计师向工程师的转变。
让前端开发的各种技术不断地运用到各种移动互联网的开发中。
2 相关技术简介2.1 Vue.js的简介Vue.js是一个构建数据驱动的Web界面的渐进式框架。
Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
与其他框架不同的是，Vue.js采用自底向上增量开发的设计。
它的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。
另一方面，Vue.js完全有能力驱动采用单文件组件和Vue.js生态系统支持的库开发的复杂单页应用。
