[lyric] lyric歌词文件格式--转载以及我的看法

 LRC 歌词格式介绍
        LRC是一种歌词档案格式,含有用作将歌词与声音/影像档案作同步处理的时间
标签time tag。

        LRC 歌词是一种包含着"[*:*]"形式的“标签(tag)”的、基于纯文本的歌词专用格式。
最早由郭祥祥先生(Djohan)提出并在其程序中得到应用。这种歌词文件既可以用来
实现卡拉OK功能(需要专门程序),又能以普通的文字处理软件查看、编辑。当然,
实际操作时通常是用专门的LRC歌词编辑软件进行高效编辑的。以下具体介绍LRC格
式中的"标签"。

时间标签(Time-tag)

形式为"[mm:ss]"或"[mm:ss.fff]"(分钟数:秒数)。
数字须为非负整数,比如"[12:34.5]"是有效的,而"[0x0C:-34.5]"无效。 它可以
位于某行歌词中的任意位置。一行歌词可以包含多个时间标签(比如歌词中的迭句
部分)。
根据这些时间标签,用户端程序会按顺序依次高亮显示歌词,从而实现卡拉OK功能。
另外,标签无须排序。

标识标签(ID-tags)

其格式为"[标识名:值]"。大小写等价。以下是预定义的标签.

[ar:艺人名]
[ti:曲名]
[al:专辑名]
[by:编者(指编辑LRC歌词的人)]
[offset:时间补偿值] 其单位是毫秒,正值表示整体提前,负值相反。这是用于总体调整显示快慢的。

 

       简单的说,就是时间和歌词的组合。parse出来之后就容易了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
本来在做项目,看到酷我音乐盒的歌词显示挺有趣的,模仿做了一个不完整的。 (只有滚动显示,没有节奏显示)。 原理: (1)定义一个派生自CStatic类的CKaraokeLyricCtrl类(歌词控件),自绘制风格 ; (2)准备一个背景位图(保存在CKaraokeLyricCtrl::m_dcBK中); (3)设置两个计数器(ID分别为1和2),启动自绘制,1用来显示节奏(未实现,只 有框架),2用来滚动歌词; (4)自绘制函数中,将绘制的滚动歌词和背景位图混合,然后输出到屏幕上。滚动 歌词的绘制使用GDI+的Graphics::DrawString函数,歌词文本的大小、位置、字体和 透明度均自动计算和变化,模仿酷我音乐盒的形式。 以上功能均封闭实现在CKaraokeLyricCtrl类中。该类可以直接使用(见下边的使用步骤)。 使用步骤: (1)CKaraokeLyric::InitInstance中启动GDI+; (2)在CKaraokeLyricView::OnInitialUpdate中,创建歌词控件 (CKaraokeLyricCtrl类),其大小和CKaraokeLyricView视图相同,即覆盖了后者; (3)在菜单项响应中,使用CKaraokeLyricCtrl::ReadLyric读取歌词文件,再使用 CKaraokeLyricCtrl::Start即可启动歌词的滚动显示 未实现部分:(歌词的节拍显示) 虽然没有实现,但思路大致是:在后台先用另外一种颜色绘制当前突出显示的歌词(即字体最大的一行歌词),根据歌曲节奏,将还未唱出部分全部涂黑,然后和屏幕上的当前行突出歌词进行混合。
如果你想通过 `${music.lyric}` 来获取歌词并实现歌词滚动,可以将 HTML 模板中的歌词部分修改成以下代码: ```html <div id="lyrics"> <!-- 使用模板语法获取歌词 --> <p v-for="(line, index) in music.lyric.split('\n')" :key="index">{{ line }}</p> </div> ``` 在这个代码中,我们使用了 Vue.js 的模板语法 `v-for` 来遍历歌词文本中的每一行,并将它们分别显示在一个 `p` 元素中。由于歌词文本中的每一行都是以换行符 `\n` 分隔的,因此我们使用 `split('\n')` 方法将歌词文本分割成一个行数组,然后再通过 `v-for` 遍历这个数组,并将每一行渲染成一个 `p` 元素。这个代码还使用了 `:key="index"` 来指定每个 `p` 元素的唯一标识,以提高渲染性能。 当你需要动态更新歌词时,可以通过 JavaScript 来修改 `music.lyric` 的值,然后 Vue.js 会自动重新渲染歌词部分。例如,你可以在播放器的 `timeupdate` 事件处理函数中,根据当前播放时间动态显示对应的歌词行: ```js player.addEventListener('timeupdate', function() { // 计算当前播放时间对应的歌词行 var currentTime = this.currentTime; var lines = music.lyric.split('\n'); for (var i = 0; i < lines.length; i++) { var match = lines[i].match(/^\[(\d{2}):(\d{2})\.(\d{2})\](.*)$/); if (match && match[1] && match[2] && match[3] && match[4]) { var time = parseInt(match[1]) * 60 + parseInt(match[2]) + parseInt(match[3]) / 100; if (currentTime >= time && (!lines[i + 1] || currentTime < parseInt(lines[i + 1].match(/^\[(\d{2}):(\d{2})\.(\d{2})\]/)[1]) * 60 + parseInt(lines[i + 1].match(/^\[(\d{2}):(\d{2})\.(\d{2})\]/)[2]) + parseInt(lines[i + 1].match(/^\[(\d{2}):(\d{2})\.(\d{2})\]/)[3]) / 100)) { // 当前播放时间对应的歌词行 var currentLine = i; break; } } } // 滚动到当前歌词行 var lyrics = document.querySelector('#lyrics'); var currentElement = lyrics.querySelectorAll('p')[currentLine]; if (currentElement) { lyrics.scrollTop = currentElement.offsetTop - lyrics.offsetTop; } }); ``` 在这个代码中,我们监听播放器的 `timeupdate` 事件,然后根据当前播放时间计算出对应的歌词行。具体地,我们首先将歌词文本分割成行数组,并使用正则表达式 `^\[(\d{2}):(\d{2})\.(\d{2})\](.*)$` 匹配每一行的时间标记和歌词文本,如果匹配成功,则将时间标记解析成秒数,并判断当前播放时间是否在该行和下一行之间。如果当前播放时间对应的歌词行发生变化,我们就将滚动条滚动到该行,以便用户看到当前播放的歌词

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值