vue.js解析lrc格式歌词文件

效果图如下：

1、布局部分
(1)、template部分

<div class="detail"><div class="song-title"><p ref="song">{{song}}</p><p ref="singer">{{singer}}</p></div><div class="wrapper"><ul class="content"><li v-for="(item,index) of ms" :key=item.index>{{item.c}}</li></ul></div>
</div>

其中，song与singer采用eventBus全局数据传输获取，可参考vue使用eventBus实现数据传输
另外，歌词溢出部分可采用better-scroll来进行拉动查看，可参考vue.js使用better-scroll实现滚动

(2)、style部分

.detailposition absolutetop 1rembottom 2.6remleft 0right 0text-align centercolor  #26a2ff .song-titlewidth 100%height 2rem// background-color #eeefffpwidth 100%line-height .8remfont-size 18pxcolor #FFD700 margin-top .1remtext-align center// background-color #fff.wrapperoverflow hiddenposition absolutetop 2remright 0left 0height 545px// background-color yellowulline-height 32pxwidth 100%padding-bottom 1rem// background-color redlifont-size 16pxtransition-duration 1200ms// background-color skyblue

2、lrc歌词文件解析逻辑部分

data () {return {Lrc:'',ms: [],song:'',singer: '',}},//this.Lrc是后端获取到的lrc格式的歌词文件
if(this.Lrc.length==0) return;// var lyricstxt = []; //存放歌词var lrcs = this.Lrc.split('\n');//用回车拆分成数组// console.log(lrcs)for(var i in lrcs) {//遍历歌词数组lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, ""); //去除前后空格var t = lrcs[i].substring(lrcs[i].indexOf("[") + 1, lrcs[i].indexOf("]"));//取[]间的内容var s = t.split(":");//分离:前后文字if(!isNaN(parseInt(s[0]))) { //是数值var arr = lrcs[i].match(/\[(\d+:.+?)\]/g);//提取时间字段，可能有多个var start = 0;for(var k in arr){start += arr[k].length; //计算歌词位置}var content = lrcs[i].substring(start);//获取歌词内容for (var k in arr){var t = arr[k].substring(1, arr[k].length-1);//取[]间的内容var s = t.split(":");//分离:前后文字this.ms.push({//对象{t:时间,c:歌词}加入ms数组t: (parseFloat(s[0])*60+parseFloat(s[1])).toFixed(3),c: content}); }}}

vue.js解析lrc格式歌词文件相关推荐

用JS解析LRC格式的歌词
用JS解析LRC格式的歌词 1.把歌词载入. 方法一:直接把歌词粘贴到一个textarea文本域中,然后把它设置为隐藏.  <textarea id=&q ...
用JS解析LRC格式的歌词，实现歌词同步滚动效果
用JS解析LRC格式的歌词 1.把歌词载入. 方法一:直接把歌词粘贴到一个textarea文本域中,然后把它设置为隐藏.  <textarea id=&q ...
lrc格式歌词格式化处理函数封装，返回对象数组
lrc格式歌词格式化处理函数封装,返回对象数组函数 /*** lrc格式歌词格式化 * @param { STRING } lrc lrc格式歌词* @return { ARRAY } 返回对象数组 ...
使用js解析歌词文件(lrc格式歌词)
首发地址:https://www.hsmus.top/202101235.html 像音乐播放器一样,可以把歌词文件解析为方便使用的对象效果如下: 代码如下: 用法: /***** 用法 ***** ...
js解析lrc 实现lrc歌词同步滚动效果
这两天想着做一个h5的网页播放器,实现歌词同步滚动但是上网找了很多资料,竟发现没有比较完善的代码供参考,但是无意间看到了百度的千千音乐有这样的效果,就想着一定能通过js实现经过两三天的努力,终于做 ...
Lrc格式歌词解析及误差纠正(C++)
首先是解析lrc文本/文件参考网上网友资料得到 #include "stdafx.h" #include <iostream> #include <fstream ...
在ASP.NET Core 3.1 MVC中集成Vue.js V4和使用Dropzone文件上传
目录介绍先决条件 Node.js的介绍您已经安装了Node.js/NPM吗? Node/ NPM版本相关的常见错误 Vue.js简介安装Vue.js V4 NET Core介绍安装Visua ...
vue php 文件上传,使用vue.js和laravel上传文件
我尝试在vue.js和laravel中上传pdf文件,files_array是这样定义的:data(){ return { formData: new Form ({ files_array:'', ...
解析rtf格式的文件数据
背景:最近接到一个解析doc后缀的word文件的需求,结果报错提示是rtf类型文件,无法解析.接下来,我将解析rtf 文件的代码分享出来. 1. 解析正常.doc后缀文件 //解析正常.doc后缀文件 ...
Vue.js解析(十)【Vue组件间通信】
什么是Vue组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊 ...

vue.js解析lrc格式歌词文件

vue.js解析lrc格式歌词文件相关推荐

最新文章

热门文章