html5⾳乐播放器歌词显⽰,(1)H5实现⾳乐播放器【正在播
放-歌词篇】
近期闲来⽆事,就想着复习⼀下前端的东西,然后正好跟朋友搞了⼀个公共开放的⾳乐api接⼝,就想着写⼀个⾳乐播放器玩玩!
话不多说,直接上图,然后上代码
【播放器显⽰正在播放】
实现功能:
1:歌词随着歌单滚动!
2:背景虚拟化,跟着歌曲封⾯图改变!
这个好多朋友问过我怎么做到的,这⾥可以共享出源码。
歌词滚动很重要⼀点就是需要解析歌词,其实是我们⾃⼰想复杂了,先来看看api获取的歌词是什么样的:
如下所⽰,获取歌词其实前⾯都带着时间,所以我们要做到的就是根据歌曲播放的时间来跟歌词前⾯的时间对⽐,然后定位到歌词那⼀⾏,然后通过js设置那⼀⾏歌词⾼亮,字体放⼤,改变字体颜⾊!
[by:goodtm]
[00:00.00] 作曲 : 花粥
[00:01.00] 作词 : 花粥
[00:10.43]
[00:11.12]在夜半三更过天桥从来不敢回头看
[00:15.86]⽩⽇⾥是车⽔马龙此时脚下是忘川
html5颜代码[00:21.30]我独⾃⾛过半⼭腰⼭间野狗来作伴
[00:25.19]层林尽染百舸流秋风吹过⿁门关
[00:29.81]⼀瞬三年五载 品粗茶 ⾷淡饭
[00:34.49]六界⼋荒四海 ⽆⼈与我来叫板
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论