JavaScript实时监听歌曲播放进度显示对应歌词

前言

在之前我就想试试在线的音乐播放器的制作,昨晚动手实现了播放音乐的歌词实时对应显示的组件,下面就来看看其中的解析原理。

正文

这里我以李玉刚的《刚好遇见你》为例,首先我们需要获取到音频文件以及歌词的lrc内容,lrc歌词文件内容如下:

现在对其歌词进行解析,歌词的解析写法参考了js解析lrc歌词-制作滚动歌词,如下:

上述代码会将你的歌词文件转换为数组,并且每个数组下标即为歌词的播放时间(单位:秒),接着在页面中添加一个音频组件,并引入音频文件:

使用JS监听播放动态,并对每次的时间进行转换以此来对应数组下标然后更改页面上对应的歌词内容:

因为我是使用Vue+Webpack写的,所以页面中的完整代码如下:

最后,页面显示为:
JavaScript实时监听歌曲播放进度显示对应歌词

后记

在本次的歌词解析实例中,侧面学到了一些Webpack相关的知识,后续会整理出来分享给大家。

    A+
所属分类:vue

发表评论

请在下方填写评论信息

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

表情 粗体 斜体 图片 引用 链接 删除线 下划线 插代码 签到

目前评论:6   其中:访客  3   博主  3

  1. avatar 耐火砖 0  来自天朝的朋友 火狐浏览器 Windows 7 河南省郑州市 联通

    感谢博主分享,很强大的功能

  2. avatar Amour 1  来自天朝的朋友 谷歌浏览器 Windows 10 广东省广州市 电信

    js确实很强大

  3. avatar 电磁泵 0  来自天朝的朋友 谷歌浏览器 Windows 10 广东省东莞市 联通

    js确实很强大。没有不可能,只有想不到。