专栏首页Ar-Sr-Na【教程】纯前端做一个歌词显示的音乐播放器
原创

【教程】纯前端做一个歌词显示的音乐播放器

节目: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的网站

在线Excel、CSV转JSON格式-BeJSON.com

转换完毕,接下来就是匹配歌词然后播放了

匹配音频和歌词时间点

这部分我想了很久,一直没办法找到方法,现在有个问题,我想让每句播放的时候来个动画,但是现在刷新频率太快,各位大佬支个招吧

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

Powered by Ar-Sr-Na(www.arsrna.cn

到此,教程结束 未经允许禁止转载!

原创声明,本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

登录 后参与评论
0 条评论

相关文章

  • Winform零基础入门教程-实现音乐播放器的歌词显示功能

    本人计划写一部关于C#学习入门的一整套教程,现在已经到达第二部分,基础语法教程已经写完毕。目录:http://www.jianshu.com/p/d1add12...

    做全栈攻城狮
  • 基于Qt的网络音乐播放器(五)实现歌词滚动显示

    先说一下大体思路: json解析出来的lyrics歌词(字符串形式:[00:18.26]毕竟我们深爱过\r\n[00:21.74]有你陪的日子里)中每句和每句...

    花狗Fdog
  • Lily_music 网页音乐播放器 -可搜索(附歌词联动播放效果解说)

    这是我今年(2018)年初的小项目,当时也是手贱,不想用别的播放器,想着做一个自己的网页播放器,有个歌曲列表、可关键词搜索、歌词滚动播放的效果,于是乎,就做了这...

    Krry
  • 在线听歌房源码 - MKOnlineMusicPlayer V2.21

    Youngxj
  • MKOnlinePlayer在线音乐播放器

    MKOnlineMusicPlayer 是一款开源的基于 Meting 的在线音乐播放器。具有音乐搜索、播放、下载、歌词同步显示、个人网易云音乐播放列表同步等功...

    行云博客
  • 自制 h5 音乐播放器 可搜索

    有好几天没有发表博客了,这也是因为一直开发音乐和完善我的博客项目,好不容易抽出时间总结一下这几天所做的东西,还这么多课,实则匆忙

    Krry
  • 听音乐不过瘾?自制一个音乐播放器!【附带函数源码】

    其实C#除了在游戏开发上具有显著优势以外,在winform交互页面设计和web网站开发上也是独树一帜的。

    灰小猿
  • VUE---爬虫播放器(四)---功能实现--vue3

    axiosFun文件(可以忽略) api.js中的axios直接为import {axios} from ‘axios’

    代码哈士奇
  • WordPress添加音乐播放器(纯代码实现)

    为WordPress网站添加一个音乐播放器,网上大部分的教程都是使用各种插件,有的插件还需要花钱买授权,用着不爽。本文用纯代码为网站添加音乐播放器,安全可靠,可...

    子润先生
  • iOS-QQ音乐播放器的简单实现

    xx_Cc
  • [vue全家桶]每个人都能做的网易云音乐

    本文作者:IMWeb 小前端 原文出处:IMWeb社区 未经同意,禁止转载 仿网易云音乐(webapp) 项目地址 (project address)...

    IMWeb前端团队
  • [vue全家桶]每个人都能做的网易云音乐

    api来源 感谢binaryify让我能用喜欢的东西做一个属于自己的播放器!

    IMWeb前端团队
  • Winform零基础入门教程-开发美女音乐播放器软件 程序员

    这是小白学习软件开发系列课程,旨在帮助对电脑编程感兴趣的朋友学习并熟悉电脑编程软件开发C#技术。其中基础部分已经讲解完毕,可以查看:电脑编程入门(10)-C#面...

    做全栈攻城狮
  • 制作一个考场标准时钟 | JavaScript+CSS+HTML

    首行加入:<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/b...

    Ar-Sr-Na
  • iOS开发常用之摄像照相视频音频处理

    GuangdongQi

扫码关注云+社区

领取腾讯云代金券