节目:08-1202L/08-1203K:【教程】纯前端做一个歌词显示的音乐播放器
Bootstrap 4.6.0 CSS:https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css
一段音乐及这首歌的lrc歌词(只要带时间的都可以,这里用lrc举例)
浏览器
jquery(可选,为了查找元素更方便):https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js
通过html5的<audio>属性进行播放
这里为了方便不开发进度条和控制进度的工具,直接用各个浏览器渲染的audio标签
并且宽度设置为100%
<audio id="audio" src="mp3/Flower - 秋風のアンサー.mp3" controls style="width:100%"></audio>
注意,audio要指定一个id,方便后续获取
自己设置好
为了美观,我用Bootstrap的jumbotrom大块屏
<div class="jumbotron"> <h1 class="display-4">秋風のアンサー</h1> <p class="lead">Flower</p> </div>
因为LRC是timelrc 的格式,js不能读取,但js有个很相似的格式:json,因此我们可以把lrc转为json,类似于:
[00:01.00]powered [00:02.00]by [00:03.00]Ar-Sr-Na
{"time":1,"lrc":"Powered"}, {"time":2,"lrc":"by"}, {"time":3,"lrc":"Ar-Sr-Na"},
所以先要处理lrc
用sublime打开lrc
鼠标对准第一个中括号,按住中键不放,指针将会一直沿着你鼠标的方向选择,滑到最底部选中所有时间
Ctrl+C复制,在Excel里粘贴
最好留两个单元格计算
分钟单元格输入函数:=LEFT(C2,2);C2是你的LRC时间所在单元格,下同
秒数单元格输入函数:=RIGHT(C2,5)
这样分秒就分离了
然后将分钟+秒变成js能读取的时间
输入函数:=分钟单元格*60+秒钟单元格
鼠标在单元格右下角下拖快速填充到底
同样用Sublime,在第一个"]"右中括号那里按住中键选择(注意最好选择进中键,不然对于有些空行的歌词会复制不了)
粘贴进Excel
然后替换 ] 为 空
复制具有时间和歌词的两列,去到Excel转json的网站
转换完毕,接下来就是匹配歌词然后播放了
这部分我想了很久,一直没办法找到方法,现在有个问题,我想让每句播放的时候来个动画,但是现在刷新频率太快,各位大佬支个招吧
html里添加个显示歌词的元素,我用span,并且用Bootstrap的字体
<span id="lrc" class="lead"></span>
注意,文本要指定一个id,方便后续获取
js里有个操作,currentTime
给歌词json赋值
var lrcjson = {"time":261.96,"lrc":"ごめんね 好きなの Answer to you"},{......};
获取音频和文字控件:
var audio = document.getElementById('audio'); var lrcHTML= document.getElementById('lrc');
要匹配音频和歌词时间点,就要不断判断和遍历歌词数组
遍历数组可以这样来:
for(i1=0;i1<lrcjson.length;i1++) { //每句歌词时间:lrcjson[i1].time //每句歌词:lrcjson[i1].lrc ]
直接用audio.currentTime与上述遍历数组查找lrcjsoni1.time是行不通的,因为他们的时间点不可能完全精确,有0.01ms的误差都不行
{"time":122.09,"lrc":"不安なのよ だからお願い"},
所以只能用模糊搜索
当音频播放时不断执行事件:
audio.ontimeupdate=function(e) { }
遍历歌词的同时不断查找匹配歌词
for(i1=0;i1<lrcjson.length;i1++) { if (audio.currentTime > lrcjson[i1].timeout) { //歌词:lrcjson[i1].lrc } }
播放的时候不断查找,不断遍历数组
audio.ontimeupdate=function(e){ for(i1=0;i1<lrcjson.length;i1++) { if(audio.currentTime > lrcjson[i1].timeout) { //歌词:lrcjson[i1].lrc } } }
如果你用console输出,就会看到速度非常快,所以不适合在html创建元素或者document.write,只能用innerHTML不断刷新元素
前面已经讲到获取歌词元素了,所以直接可以对歌词操作:
lrc.innerHTML=lrcjson[i1].lrc;
Javascript
lrcjson = {"time":261.96,"lrc":"ごめんね 好きなの Answer to you"},{...} lrc = document.getElementById('lrc'); audio.ontimeupdate=function(e) { for(i1=0;i1<lrcjson.length;i1++) { if (audio.currentTime > lrcjson[i1].time) { lrc.innerHTML=lrcjson[i1].lrc; } } }
HTML:
<div class="jumbotron"> <h1 class="display-4">秋風のアンサー</h1> <p class="lead">Flower</p> <span class="lead" type="text" id="lrc"></span> <br /> <audio id="audio" src="mp3/Flower - 秋風のアンサー.mp3" controls style="width:100%"></audio> </div>
预览:
https://codepen.io/arsrna/full/vYxyqaK
文章已收录Github精选,欢迎Star: https://github.com/yehongzhi/learningSumma...
2020年对于云计算行业来说是突破性的一年,因为公共云供应商增加了收入,而疫情...
数据科学的普及迅速增长,导致创建了各种各样的工具和技术,为数据科学爱好者带...
云计算的变革时刻来到了,它起于成熟的市场格局,起于广阔的未来空间,起于技术...
根据WhistleOut最近发表的研究,该研究调查了10000名年龄在16至54岁之间的美国人...
怎么看 域名 过期时间?如果是自己的域名,可以直接在域名管理里面查看,可以看...
TOP云 (west.cn)4月26日消息,今年4月初,中国知名工具制造商chervon(泉峰控...
数据库需要比以往任何时候都支持更多的功能。 它们必须在混合和多声音环境中适应...
1. 接口描述 接口请求域名: cvm.tencentcloudapi.com 。 本接口 (StartInstance...
如何买 域名 和空间?网站是由网站程序,域名及 网站空间 组成的,无论是企业还...