vue 音乐播放器之歌词解析和滚动(js源码)

效果图

注：歌词和图片来源于网络

总体思路

①：请求歌词资源
②：解析歌词，生成html代码
③：html代码插入歌词显示的区域
④：监听歌曲播放进度，通过id选择器选中正在播放的歌词添加样式
⑤：判断条件是否滚动
⑥：歌曲播放完毕清除样式，滚动到顶部

①：请求歌词资源

 init() {//请求资源this.axios.get("/dataJson/musicList.json").then(response => {let { data, status } = response;//对象解析if (status != 200) return Error("资源请求出错");if(data.list[0].lyc!=undefined){//请求歌词this.axios.get(data.list[0].lyc).then(response=>{//vuex全局状态管理，触发changeInfo事件this.$store.commit("changeInfo", {name: data.list[0].name,singer: data.list[0].singer,lyc:response.data});})}});

json文件格式

{"list":[{"name":"他只是经过","singer":"h3R3","compose":"h3R3","src":"./music/test1.mp3","lyc":"./music/test1.mp3"}]
}

vuex中state数据和mutations中的方法

 state: {title: "歌名",msg: "歌曲附加信息",lyc: "",lycArr: []},mutations: {//只有在mutations中才能修改state状态changeInfo(state, newValue) {//修改信息state.title = newValue.name;state.msg = newValue.singer;state.lyc = newValue.lyc;}}

②：解析歌词，生成html代码

解析歌词在vuex的mutations中

initialize(state, lyc) {//解析歌词let lycArr = state.lyc.split("\n"); //拆分为数组for (let item of lycArr) {let flag = false;let arr = item.match(/\[(\d+:.+?)\]/g); //提取时间字段，可能有多个let start = 0;for (let k of arr) {start += k.length; //计算歌词位置（用于下一步提取歌词）}let content = item.substring(start); //提取从start提取文字一直到最后for (let value of arr) {let t = value.substring(1, value.length - 1); //取[]间的内容let s = t.split(":"); //分离:前后文字let time = (parseFloat(s[0]) * 60 + parseFloat(s[1])).toFixed(0);for (let t of state.lycArr) {if (time == t.time) {//防止时间重复flag = true;t.c += ` ${content}`;break;}}if (!flag) {//如果时间不重复state.lycArr.push({//对象{t:时间,c:歌词}加入ms数组time: time,c: content});}}}//生成htmllet html = `<p>${state.title}</p>`;for (let item of state.lycArr) {html += `<p id=${item.time}>${item.c}</p>`;}//插入展示区lyc.lycContainer.innerHTML = html;}

state.lycArr数组生成的结果如下

③：html代码插入歌词显示的区域

第二步mutations中，这行代码就是把html代码插入到歌词显示区

     //插入展示区lyc.lycContainer.innerHTML = html;

现在数据已经有了，来看一下显示区样式

<template><div v-bind:class="{ lycContainer: true }"></div>
</template><style lang="less">
.lycContainer {height: 100%;padding: 0.625rem;box-sizing: border-box;font-size: 0.55rem;text-align: center;overflow-x: hidden;overflow-y: auto;scrollbar-width: none;//兼容火狐浏览器,隐藏滚动条
}
.lycContainer::-webkit-scrollbar {//兼容webkit内核浏览器,隐藏滚动条display: none;
}
</style>

④：监听歌曲播放进度，通过id选择器选中正在播放的歌词添加样式

当点击开始播放按钮时，进行歌曲播放进度监听

start() {if (!this.startFlag) {this.$refs.startClick.src = "./publicImg/pause.png";//图片，立即替换为暂停按钮this.startFlag = true;sound.title = "暂停";this.lycContainerHeight = document.getElementsByClassName("lycContainer")[0].getBoundingClientRect().height.toFixed(0);sound.addEventListener("timeupdate", this.lycMonitor, false);// 在音频/视频（audio/video）的播放位置发生改变时触发。sound.addEventListener("ended", this.musicEnd, false);//在音频/视频（audio/video）播放结束触发sound.play();} else {this.$refs.startClick.src = "./publicImg/start.png";this.startFlag = false;sound.title = "播放";sound.pause();}

歌词滚动。通过下面lycMonitor函数进行歌词滚动

lycMonitor() {//歌词监听滚动let lycId = document.getElementById(sound.currentTime.toFixed(0));if (lycId) {if (lycId.offsetTop >(this.lycContainerHeight / 2 +lycId.getBoundingClientRect().height).toFixed(0)) {document.getElementsByClassName("lycContainer")[0].scrollTop = (lycId.offsetTop -this.lycContainerHeight / 2).toFixed(0);}lycId.previousSibling.removeAttribute("style");//因为每个id，都不一样。当前lycid播放时，移出上一个歌词样式lycId.style.cssText ="background: linear-gradient(-3deg,rgba(184,134,11,0.9) 0%,rgba(255,255,0,0.6) 60%);-webkit-background-clip: text;color: transparent;transform: scale(1.2);transition: all .5s ease-in;";//添加歌词样式}},

⑤：判断条件是否滚动

判断滚动条件如下

if (lycId.offsetTop >(this.lycContainerHeight / 2 +lycId.getBoundingClientRect().height).toFixed(0)) {document.getElementsByClassName("lycContainer")[0].scrollTop = (lycId.offsetTop -this.lycContainerHeight / 2).toFixed(0);}

当当前歌词距离页面顶部距离大于歌词显示区域一半加上当前歌词高度时，开始滚动

⑥：歌曲播放完毕清除样式，滚动到顶部

musicEnd() {document.getElementsByClassName("lycContainer")[0].lastChild.removeAttribute("style"); //删除最后一个p的stylelet timer = setInterval(() => {//匀速回到开头document.getElementsByClassName("lycContainer")[0].scrollTop -= 10;if (document.getElementsByClassName("lycContainer")[0].scrollTop == 0) {clearInterval(timer);}}, 10);}

vue 音乐播放器之歌词解析和滚动(js源码)相关推荐

android音乐播放器之歌词下载、处理、开始、同步
android音乐播放器之歌词下载.处理.开始.同步 ** 程序源代码在底部 ** 先来看看效果下载 /*** 自定义下载方法,调用系统DownloadManager下载* * @param myU ...
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署本源 ...
计算机毕业设计Python+uniapp音乐播放微信小程序LW(小程序+源码+LW)
计算机毕业设计Python+uniapp音乐播放微信小程序LW(小程序+源码+LW) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: Pychram社区版+ py ...
vue音乐播放器之入门篇
第一章前言这里对应的是课程中的第一章到第三章,因为前三章内容比较少,我就把它们合并成一章.我比较懒,要让我多写三章的内容,没门.这一章会比较简单,是一个项目的准备过程,仅仅开发了两个很简单的基础组 ...
Flash版（迷你音乐播放器mp3Player1.0 Beta1 ）附源码
迷你音乐播放器mp3Player1.0 Beta1 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ //What's new: 主要功能特色: 1.支持歌曲名称,歌手名称以及专辑等关键字搜索. 2.支持随机搜索 ...
在线音乐播放系统的设计与实现(论文+源码)_kaic
摘要随着大城市建设步伐的加快,越来越多的市民在物质生活条件得到改善的同时,为了调节紧张的生活节奏,把目光投向了工作之余的休闲娱乐上.因此,娱乐市场需求越来越大.而其中,音乐更是休闲娱乐的主流.在 ...
android音乐播放器之----天天动听
下载手机软件的时候,随意的下了个天天动听,觉得喜欢,就仿照着他的UI做了个简单的音乐播放器,还不完善,只是在工作之余随便做做,贴图: 本文来自CSDN丹丹博库,转载请必须注明出处: http://bl ...
【笔记-vue】《imooc-vue.js高仿饿了么》、《imooc-vue 音乐app》、《imooc-vue.js源码全方位解析》
20170709 - 20171128:<imooc-vue.js高仿饿了么> 一.第一章课程简介 1-1课程简介 1.需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译 ...
Android开源音乐播放器之播放器基本功能
系列文章 Android开源在线音乐播放器--波尼音乐 Android开源音乐播放器之播放器基本功能 Android开源音乐播放器之高仿云音乐黑胶唱片 Android开源音乐播放器之自动滚动歌词 An ...
【android】音乐播放器之设计思路
学习Android有一个多月,看完了<第一行代码>以及mars老师的第一期视频通过音乐播放器小项目加深对知识点的理解.从本文开始,将详细的介绍简单仿多米音乐播放器的实现,以及网络解析数据获 ...