读取歌词文本并按时间显示歌词

这篇博客介绍了如何使用Node.js读取歌词文本,并按照时间格式(分钟:秒.毫秒)来显示歌词内容。通过fs模块读取文件,然后利用正则表达式解析歌词时间戳,最后使用setTimeout函数按时间顺序输出歌词。
摘要由CSDN通过智能技术生成

//第一种

var fs = require('fs');


fs.readFile('./lry.txt',function (err,data) {
    if (err) {
        throw err;
    }

    (function iterator(i){

        var line = data.toString().split('\n');

        // console.log(line.length);

        // [02:53.60] 我想一起越过所有困难和阻挡
        var reg = /\[(\d{2}):(\d{2})\.(\d{2})\]\s(.*)/;

        if (i == line.length) {
            return;
        }
        if (reg.exec(line[i])) {
            var arr = reg.exec(line[i]);
            var min = parseFloat(arr[1]);
            var second = parseFloat(arr[2]);
            var msec = parseFloat(arr[3]);
            var content = arr[4];

            // console.log(arr[0]);

            time = min * 60 * 1000
### 回答1: JavaScript 可以通过以下步骤来解析 LRC 歌词并匹配时间显示在页面: 1. 使用 JavaScript 的 `fetch` 函数或者 XMLHttpRequest 对象获取 LRC 歌词文件的内容。 2. 使用正则表达式或者其他方法将 LRC 歌词文件内容按照行分割成一个数组,每一行对应一句歌词。 3. 对于每一行歌词,使用正则表达式或者其他方法提取出歌词内容和时标签。 4. 将时标签转换为可以用来匹配的时,可以使用 JavaScript 的 `Date` 对象进行转换。 5. 使用 JavaScript 定时器(如 `setInterval` 函数)不断地获取当前时,并与 LRC 歌词中的时进行比较。 6. 当当前时与 LRC 歌词中的时匹配时,将对应的歌词内容显示在页面上。 例如,下面是一个简单的代码示例,它可以使用 JavaScript 加载 LRC 歌词文件,并解析出时标签和歌词内容: ``` fetch('lyrics.lrc') .then(response => response.text()) .then(text => { // 将 LRC 歌词文件内容按行分割成数组 const lines = text.split('\n'); // 遍历每一行歌词 for (const line of lines) { // 使用正则表达式提取时标签和歌词内容 const match = line. ### 回答2: 通过JavaScript解析lrc歌词并匹配时,我们可以实现歌词同步显示在页面上。首先,我们需要将lrc歌词文件读取为字符串。可以使用XMLHttpRequest对象创建一个HTTP请求,然后使用open()和send()方法来发送请求并获取歌词文件的内容。 当我们获取到歌词文件的内容后,我们需要将其分行解析。可以使用split()方法,根据换行符"\n"将文件内容分割成一行一行的数组。然后,我们遍历数组,对每一行进行解析。 解析每一行时,我们可以使用正则表达式来提取歌词中的时文本信息。正则表达式可以匹配类似"[00:48.666]我曾经跨过山和大海"的歌词格式。我们可以使用exec()方法来获取匹配的结果,并提取时文本。 获取到时文本后,我们可以将时转换成毫秒级的时戳,并保存在一个数组中。同时,我们也保存歌词文本在另一个数组中。 接下来,在页面中创建一个可显示歌词的区域。可以使用HTML中的<div>元素来显示歌词。通过脚本查找到这个<div>元素,并为其设置一个id。然后,使用getElementById()方法获取这个元素的引用。 为了实现同步显示歌词,我们可以使用定时器来不断更新歌词的显示。通过setInterval()方法来实现定时器,可以设定一个时隔来不断刷新。在每个时隔内,我们可以获取当前歌曲播放的时,并与歌词戳进行匹配。 匹配到当前时对应的歌词后,我们可以将其显示在页面上。通过innerHTML属性设置<div>元素的内容,将匹配到的歌词文本赋值给innerHTML属性即可。 总结起来,通过JavaScript解析lrc歌词文件,并使用定时器来匹配当前播放时对应的歌词,再通过innerHTML属性将歌词文本显示在页面上,我们就能够实现lrc歌词的显示和同步播放的功能。这样,用户在听歌的同时还能够看到当前播放的歌词,更加深入地体验音乐的情感。 ### 回答3: JavaScript可以通过解析LRC歌词文件,并将其与当前播放时进行匹配,然后将匹配到的歌词显示在页面上。 要实现这个功能,我们可以首先将LRC歌词文件读取为一个字符串,然后通过字符串分割和正则表达式来提取每一行的时歌词内容。 首先,我们需要将LRC歌词文件读取为一个字符串: ```javascript // 假设LRC歌词文件已经在某个元素中定义了一个“data-lrc”属性 let lrcString = document.getElementById("lrcElement").dataset.lrc; ``` 接下来,我们可以通过字符串的分割和正则表达式来提取每一行的时歌词内容: ```javascript // 将歌词按行分割为数组 let lines = lrcString.split('\n'); // 创建一个存储时歌词的数组 let lyrics = []; // 遍历每一行歌词 for (let line of lines) { // 匹配时的正则表达式 let timeRegExp = /\[(\d{2}):(\d{2})\.(\d{2})\]/g; // 匹配所有时标签 let timeTags = line.match(timeRegExp); // 匹配歌词内容 let text = line.replace(timeRegExp, '').trim(); // 将时歌词内容存入数组 for (let timeTag of timeTags) { let time = timeTag.replace('[', '').replace(']', ''); let [minutes, seconds, milliseconds] = time.split(':'); let totalMilliseconds = parseInt(minutes) * 60 * 1000 + parseInt(seconds) * 1000 + parseInt(milliseconds); lyrics.push({ time: totalMilliseconds, text: text }); } } ``` 最后,我们可以使用当前的播放时歌词数组进行比较,并将匹配到的歌词显示在页面上: ```javascript // 假设当前播放时为playTime let playTime = 5000; // 遍历歌词数组,找到与当前播放时匹配的歌词 for (let i = 0; i < lyrics.length; i++) { if (lyrics[i].time <= playTime && playTime < lyrics[i+1].time) { // 显示匹配到的歌词内容 document.getElementById("lyricsElement").innerText = lyrics[i].text; break; } } ``` 通过以上的步骤,我们能够解析LRC歌词文件并在页面上匹配并显示与当前播放时相对应的歌词内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值