QQ音乐播放器的简单开发

因为我喜欢听音乐，突然间抽筋，所以我想使用H5音频编写一个模拟qq播放器功能的页面. 去做就对了. 花了4天的时间，歌词的lrc文件花了很多时间TT.

要点: 1.歌词同步:

支持主界面和子界面的歌词同步功能，突出显示当前行.

2. 多类别切换:

实现了在4种类别的不同播放列表中以黑色背景显示当前歌曲的功能.

3. 主屏幕上的进度条和拖动功能:

实现了进度条以同步歌曲和拖放功能的进度，并且拖放了三个主要界面（CD界面，歌词界面和播放列表界面）.

4. 歌曲以随机顺序播放:

实现一键随机播放序列.

5. 添加动态歌词信息:

使用软件包作为插件，可以动态添加所有歌曲信息. 要更改歌曲，您只需要更改日期中的json文件. 数据文件格式如下:

经验:

1.css样式部分:

filter: blur（10px）; filter: progid: DXImageTransform.Microsoft.Blur（PixelRadius = '10'）;

它可以用来制作模糊属性. 实际上，这是我第一次做胆红素时发现的. 用户选择: 无；可以禁止用户选择单词.

2. svg部分绘图:

手机的一部分是svg图像. 由于当时我还不知道如何自己编写svg，因此只能先使用AI进行绘制，然后在绘制后导出svg格式，这对我来说也很令人伤心.

3.H5音频标签应用程序:

/C100000eyims3MbmGS.m4a?fromtag=52“>您的浏览器不支持html5音频标记

4.H5音频API文档应用程序:

audio.play（）;播放audio.pause（）;加载audio.duration播放时间audio.currentTime当前播放时间audio.end当前歌曲播放结束后，暂停audio.reday（）

5. 面向对象的包装[已作为插件编写]:

我使用面向对象的方式再次编写整个脚本. 最近，我经常以面向对象的方式编写js，偶尔以面向过程的方式编写js时，我会感到特别轻松，几乎从不报告错误. 老牛将整个脚本封装为: 下载源代码后，可以查阅插件和界面. 有兴趣的朋友可以使用它.

6. 动态播放列表信息，播放列表和相应的类别表跳转:

由于我已经多次处理了json格式的数据文件，因此这次可以说非常方便. 处理类别表和对应表之间的索引值. 由于有4个主要类别，因此有很多小播放列表，小歌曲. 切换大类别列表后取消黑背景使我很头疼.

7. 使用前置运算符:

在框的拖放部分，老牛第一次使用-和++进行计算，然后执行. 它减少了剩下的代码This._boxIndex ++，然后被替换. 值得注意的是，在mouseup中有许多执行操作，因此有必要在最后取消绑定mouseup.

8. 点击判断并拖动判断:

由于歌曲列表模块中支持点击播放，并且拖动在移动，因此在这里我使用鼠标按下和抬起的时差来确定用户的意图.

9. 歌词细分:

处理歌词lrc文件是本章中的困难之一. 我以以下方式划分了lrc格式，并将每个歌词存储在一个歌词数组中，并在每次播放歌曲时将其动态添加到lyricsWrapper中. 时间格式存储在cal数组中，分钟: 秒格式转换为秒格式，用于计算播放时间.

10. 歌曲长度，进度条长度和歌词同步计算:

首先，将当前歌曲长度除以60，然后四舍五入为最接近的整数. 然后，取总长度-分钟* 60，并取小数点0，以获取歌曲长度的秒数作为歌曲的总长度，然后让显示屏显示，设置计时器. 每200毫秒执行一次操作. 首先找到当前的播放时间. 计算与总时间相似. 进度条的长度以当前歌曲时间/总歌曲时间作为百分比值显示. 此处的歌词已同步. 我使用grep函数在先前处理的歌词时间节点数组中循环当前秒数，以返回小于当前秒数减去1的次数，然后使用dis存在并且dis不等于-1和dis不相等在最后一个dis之后执行歌词的移动. 机芯的距离是每个高度. 这样，一种是避免错误，另一种是提高运行性能. 每200毫秒不会不必要地移动歌词. 值得注意的是，我最初使用$ .inArray来计算当前时间戳在处理数组中的位置，但是我发现使用inArray拖动进度条后，因为时间节点的计算需要完全相等为了得到回应，会有延迟的回应. 这里有趣的是，我首先使用addEventListener来监视音频的结尾，然后有很多错误，然后我切换到是否进行判断，并解决了问题. 我不知道具体原因.

11. 冒泡事件

拖动并计算进度条时，必须取消背景层的拖动起泡事件！ ！

12. 欢迎下载

由于此页面包含太多内容，并且逻辑过于复杂，因此无法在许多地方说出所有内容. 看起来大约有2000行CSS. 如果您使用本机js编写代码，我不知道要花多长时间...还有一个常规播放器. 数十万行？有兴趣的朋友可以一起下载和讨论，原始链接: 老牛の博客

如果您喜欢这篇文章，可以关注Tongge-Zhihu，如果有任何疑问，可以加入小组进行交流. 欢迎大家为“ Web前端开发”专栏做贡献

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/shumachanpin/article-307350-1.html