前言

前面一篇文章Vue开发历程—音乐播放器，实现了播放音乐，以及基本的布局。但是进度条没有实现同步，本文即介绍进度条的实现。

一、效果图

二、心路历程

1、elementUI 滑块的使用

 <div class="block" style="margin-top:5px"><el-slider v-model="value" @change="updateSlideTime()" :format-tooltip="formatTooltip"></el-slider></div>

2、JS的编写

进度条的状态是实时的，也就是每一秒每一刻都要变化，如何实现这一功能？
首先需要写一个方法，每30ms更新一次状态，同时在组件挂载完成的时候调用这个方法，从而实现了每30ms，即更新进度条的数值。
通过refs可以获得audio这个标签，这个标签上有duration（时长），currentTime（当前时间）这两个属性，通过这两个属性，可以计算出来进度的占比。

 updateSongsTime: function () {const timer = setInterval(() => {const music = document.getElementById("m_mp3")||null;if (music != null) {this.currentTime = music.currentTime;this.duration = music.duration;this.persent = (this.currentTime / this.duration) * 100;}}, 30);

mounted() {this.songNum = this.songNames.length;const music = this.$refs.player;this.updateSongsTime();}

同时也需要在MusicPlayer.vue组件里面如法炮制，获取父组件的值从而实时更新滑块的状态，因为滑块是写在MusicPlayer组件里面了，但是歌曲的播放在父组件Player.vue里，所以也是用到了组件的通信。

3、时间的转化

由于currentTime返回来的是总秒数，而音乐播放器一般都是分:秒这样的格式，所以通过一些简单的数学计算（除以60求分，对60取余求秒）来进行对时长的格式化处理。采用了三目运算符，还对不足10的时间进行了处理，即小于10的数值前面自动补0

formatTooltip(){return Math.trunc(this.$parent.currentTime/60)+":"+((Math.trunc(this.$parent.currentTime%60)<10)?("0"+Math.trunc(this.$parent.currentTime%60)):Math.trunc(this.$parent.currentTime%60));}

#源代码

代码如下：
Player.vue

<template><div class="player_div1"><transition name="open" mode="out-in"><component v-bind:is="view" @hello="changeSlideState" @play="changePlayState" @lastSongs="lastSongs"@nextSongs="nextSongs" @changeSongsTime="changeSongsTime"></component></transition><audio class="m_mp3" id="m_mp3" :src="this.songNames[this.index].Url" autoplay loop ref="player" controlsstyle="display:none"></audio></div></template><script>
import HidePlayer from '@/part/HidePlayer'
import MusicPlayer from '@/part/MusicPlayer'
export default {name: 'Player',data() {return {view: MusicPlayer,isClose: false,isShow: true,isRun: 'come',index: 0,songNum: 2,currentTime: 0,duration: 0,persent: 0,songNames: [{id: 6,name: '庐州月-许嵩',Url: require('@/assets/庐州月.mp3'),png: require('@/assets/庐州月.png'),},{id: 7,name: '燕归巢-许嵩',Url: require('@/assets/燕归巢.mp3'),png: require('@/assets/燕归巢.jpg'),},{id: 1,name: '张韶涵-篇章',Url: require('@/assets/张韶涵-篇章.mp3'),png: require('@/assets/篇章.png'),},{id: 2,name: '爱就一个字 抒情版',Url: require('@/assets/爱就一个字 抒情版.mp3'),png: require('@/assets/爱就一个字.png'),},{id: 3,name: '最伟大的作品-周杰伦',Url: require('@/assets/最伟大的作品-周杰伦.mp3'),png: require('@/assets/周杰伦.jpg'),},{id: 4,name: '等你下课 (with 杨瑞代)-周杰伦',Url: require('@/assets/等你下课 (with 杨瑞代)-周杰伦.mp3'),png: require('@/assets/等你下课.png'),},{id: 5,name: '告白气球-周杰伦',Url: require('@/assets/告白气球-周杰伦.mp3'),png: require('@/assets/告白气球.png'),},{id: 6,name: '还在流浪-周杰伦',Url: require('@/assets/还在流浪-周杰伦.mp3'),png: require('@/assets/还在流浪.png'),},]}},components: {HidePlayer,MusicPlayer},methods: {changeSlideState() {this.isClose = !this.isClose;if (this.isClose) {this.view = HidePlayer;} else {this.view = MusicPlayer;}},changePlayState() {if (!this.isShow) {this.isShow = true;this.isRun = "come";document.getElementById("m_mp3").pause();} else {this.isShow = false;this.isRun = "go";var my_mp3 = document.getElementById("m_mp3");my_mp3.play();}},nextSongs() {if (this.isShow) {this.isShow = false;this.isRun = "go";}this.index = (this.index + 1) % this.songNum;},lastSongs() {if (this.isShow) {this.isShow = false;this.isRun = "go";}if (this.index == 0) {this.index = this.songNum - 1;} else {this.index = this.index - 1;}},changeSongsTime(value) {const music = document.getElementById("m_mp3");music.currentTime = value / 100 * music.duration;},updateSongsTime: function () {const timer = setInterval(() => {const music = document.getElementById("m_mp3")||null;if (music != null) {this.currentTime = music.currentTime;this.duration = music.duration;this.persent = (this.currentTime / this.duration) * 100;}}, 30)}}, mounted() {this.songNum = this.songNames.length;const music = this.$refs.player;this.updateSongsTime();}}
</script><style scoped>
.open-enter-active {animation: slide-in linear 0.5s;
}.open-leave-active {animation: slide-in reverse linear 0.5s;
}@keyframes slide-in {from {transform: translateX(-100%);}to {transform: translateX(0%);}
}</style>

MusicPlayer.vue

<template><div class="music"><!-- 占位 --><div class="m_hold"></div><div class="m_img"><img :src="this.$parent.songNames[this.$parent.index].png" width="90px" :class="this.$parent.isRun"></div><!-- 歌曲信息 --><div class="m_text">{{ this.$parent.songNames[this.$parent.index].name }}<div class="block" style="margin-top:5px"><el-slider v-model="value" @change="updateSlideTime()" :format-tooltip="formatTooltip"></el-slider></div></div><!-- 音乐时间信息 --><div class="m_time"><span>{{nowtime}} / </span><span>{{allTime}}</span></div><!-- 按钮 --><div class="m_btn"><a href="#" class="m_prev" @click="playLastSong()"></a><a href="#" class="m_play" @click="changeState()" v-show="this.$parent.isShow"></a><a href="#" class="m_pause" @click="changeState()" v-show="!this.$parent.isShow"></a><a href="#" class="m_next" @click="playNextSong()"></a></div><!-- 折叠功能 --><div class="m_close" @click="changeCloseState()"><a href=""></a></div></div>
</template><script>
export default {name: 'MusicPlayer',data() {return {songName: '',value:0.0,}},methods: {changeState() {this.$emit("play")},changeCloseState() {this.$emit("hello");},playNextSong() {this.$emit("nextSongs");this.songName = this.$parent.songNames[this.$parent.index].name},playLastSong() {this.$emit("lastSongs");this.songName = this.$parent.songNames[this.$parent.index].name},changeSlideTime(){const timer = setInterval(()=>{this.value = this.$parent.persent;},30)},updateSlideTime(){this.$emit("changeSongsTime",this.value);},formatTooltip(){return Math.trunc(this.$parent.currentTime/60)+":"+((Math.trunc(this.$parent.currentTime%60)<10)?("0"+Math.trunc(this.$parent.currentTime%60)):Math.trunc(this.$parent.currentTime%60));}},watch:{},computed:{nowtime(){return ((Math.trunc(this.$parent.currentTime/60)<10)?("0"+Math.trunc(this.$parent.currentTime/60)):(Math.trunc(this.$parent.currentTime/60)))+":"+((Math.trunc(this.$parent.currentTime%60)<10)?("0"+Math.trunc(this.$parent.currentTime%60)):(Math.trunc(this.$parent.currentTime%60)));},allTime(){return ((Math.trunc(this.$parent.duration/60)<10)?("0"+Math.trunc(this.$parent.duration/60)):(Math.trunc(this.$parent.duration/60)))+":"+((Math.trunc(this.$parent.duration%60)<10)?("0"+Math.trunc(this.$parent.duration%60)):(Math.trunc(this.$parent.duration%60)));}} ,mounted() {this.songName = this.$parent.songNames[this.$parent.index].name;this.changeSlideTime();}}
</script><style scoped>
/* 关于播放器的样式 */
.music {width: 100%;height: 120px;background: black;/* 相对浏览器定位 */position: fixed;left: 0px;bottom: 0px;/* bottom: 100px; *//* border-bottom: 50px; *//* 透明度 */opacity: 0.8;/* 阴影值 */box-shadow: 10px 15px 15px 1px black
}.music .m_hold {float: left;width: 90px;height: 90px;
}/* 调整音乐盒图片 */
.music .m_img {margin-top: 15px;margin-left: 10px;margin-right: 10px;/* 左浮动 */float: left;width: 90px;height: 90px;border-radius: 50%;overflow: hidden;}/* 修改文字 */
.music .m_text {/* 左浮动 */float: left;color: white;font-size: 20px;/* 字体加粗 */font-weight: bold;margin-top: 25px;margin-left: 20px;margin-bottom: 10px;width: 25%;}/* 使得所有a标签一起移动 */
.music .m_btn {float: left;position: absolute;/* 绝对定位：防止歌曲名称过长，挤出div */left: 48%;
}/* 修改a标签 */
.music .m_btn a {width: 32px;height: 32px;float: left;margin-top: 50px;margin-left: 20px;background: url(@/assets/player_bg.png);}.music .m_btn .m_prev {background-position: -69px 0px;
}.music .m_btn .m_next {background-position: -150px 0px;
}.music .m_btn .m_play {background-position: -107px -5px;
}.music .m_btn .m_prev:hover {background-position: -69px -32px;
}.music .m_btn .m_next:hover {background-position: -150px -32px;
}.music .m_btn .m_play:hover {background-position: -107px -47px;
}.music .m_btn .m_pause {background-position: -292px -94px;
}.music .m_btn .m_pause:hover {background-position: -334px -94px;
}/* 还有一个悬停 没写 */
/* 设置最右边的关闭样式 */
.music .m_close {float: right;background: white;cursor: pointer;width: 23px;height: 100px;margin-top: 10px;background: url(@/assets/player_bg.png);}
.m_time
{width: 100px;height: 20px;margin-top: 64px;float:left;margin-left: 10px;font:bold
}/* 设置最右边的关闭样式 */
.music_hide {float: left;background: white;cursor: pointer;width: 23px;height: 100px;margin-top: 2px;
}.go {animation: bounce-in 2s linear infinite;
}.come {animation: none;
}@keyframes bounce-in {from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}.open-enter-active {animation: slide-in linear 0.5s;
}.open-leave-active {animation: slide-in reverse linear 0.5s;
}@keyframes slide-in {from {transform: translateX(-100%);}to {transform: translateX(0%);}
}
</style>

HidePlayer.vue

<template><div class="music_hide" @click="changeCloseState()"><a href="#" class="m_open"></a></div>
</template><script>
export default {name:'HidePlayer',methods:{changeCloseState(){this.$emit("hello");}}
}
</script><style scoped>
.music_hide {float: left;background: url(@/assets/player_bg.png);cursor: pointer;width: 23px;height: 100px;margin-top: 10px;bottom: 0px;/* bottom: 100px; */position: fixed;background-position-x: -45px;
}
</style>

总结

真可谓是基础不牢，地动山摇，由于CSS，JS学的很浅，现在很多的布局搞不明白，布局效果只有一点点的尝试，导致自己的开发进度变得特别特别缓慢，再次提醒各位C友，一定一定要注重基础的深入学习。勉之哉！！

Vue开发历程---音乐播放器的继续相关推荐

java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档 java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S ...
vue引入音乐播放器插件
欢迎大家进群,一起探讨学习微信公众号,每天给大家提供技术干货博主技术笔记博主网站地址1 博主网站地址2 博主开源微服架构前后端分离技术博客项目源码地址,欢迎各位star vue引入音乐播放器插件 ...
java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署 ...
JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库本源码技术栈 ...
Vue 自定义音乐播放器组件为H5添加背景音乐
自定义音乐播放器组件为H5添加背景音乐: 1.创建music.vue组件 <template><div><div @click="changeOn" ...
vue相关音乐播放器
1.初始化vue,vue-cli,webpack: $ vue init webpack vue-music ? Project name (vue-music) ? Project descript ...
Java和vue实现音乐播放器_vue实现的网易云音乐在线播放和下载功能案例
本文实例讲述了vue实现的网易云音乐在线播放和下载功能.分享给大家供大家参考,具体如下: 效果如图: 完整代码: Document html, body { height: 100%; padding ...
vue实现音乐播放器
通过vue与原生js实现音乐播放器下面是需要的网址 1.歌曲搜索接口请求地址:https://autumnfish.cn/search 请求方法:get 请求参数:keyw ...
基于VUE的音乐播放器
文章目录前言一.功能分解 1.布局 2.JS功能实现二.例程下载 1.引入库 2.读入数据总结前言 html音乐播放器练习小例子 1.调用网易云的api查询歌曲信息,api不是官方的,而是g ...
Java和vue实现音乐播放器_躁！DJ 风格 Java 桌面音乐播放器
本文适合有 Java 基础知识的人群,跟着本文可学习和运行 Java 版桌面 DJ 音乐播放器. 本文作者:HelloGitHub-秦人 HelloGitHub 推出的<讲解开源项目>系列 ...

Vue开发历程---音乐播放器的继续

文章目录

前言