需求模拟-歌词显示正则（五）

最新推荐文章于 2022-10-24 21:54:23 发布

luckybing~

最新推荐文章于 2022-10-24 21:54:23 发布

阅读量293

点赞数

CC 4.0 BY-SA版权

分类专栏：正则表达式

本文链接：https://blog.csdn.net/Luckyzhoufangbing/article/details/112646090

正则表达式专栏收录该内容

5 篇文章

订阅专栏

（一）需求

随着歌曲的播放，页面中显示当前演唱句子的歌词

（二）思路以及代码

html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>歌词匹配</title>
  <style>
    #lyricWrapper {
      color: grey;
      font-size: 20px;
      margin-top: 20px;
      margin-left: 50px;
    }
  </style>
</head>
<body>
  <!-- 音频播放 -->
  <audio src="./1.mp3" id="audio" controls></audio>
  <!-- 歌词显示 -->
  <div id='lyricWrapper'>
    <span id='lyric'></span>
  </div>
  <script src='./index.js'></script>
</body>
</html>

js:

// lrc 歌词网 去找这种带播放时间的歌词
// https://www.22lrc.com/
var lrcStr = `
[00:00.00] 作曲 : 花粥
[00:01.00] 作词 : 花粥
[00:10.43]
[00:11.12]在夜半三更过天桥从来不敢回头看
[00:15.86]白日里是车水马龙此时脚下是忘川
[00:21.30]我独自走过半山腰山间野狗来作伴
[00:25.19]层林尽染百舸流秋风吹过鬼门关
[00:29.81]一瞬三年五载 品粗茶 食淡饭
[00:34.49]六界八荒四海 无人与我来叫板
[00:39.19]人间荒唐古怪 竹林外 有书斋
[00:43.78]匿于此地畅快 偏来者不善善者不来
[00:50.85]是我装模作样在瞎掰
[00:55.18]还是他们本就心怀鬼胎
[00:57.82]有人不知悔改 迷雾中混淆黑白
[01:02.46]在情怀里市侩 旁人不敢来拆穿
[01:07.17]看似时来运转 实则在顶风作案
[01:11.73]待曲终又人散 这一出还有谁在围观
[01:16.79]在凡尘修炼二十载听闻水能滴石穿
[01:21.07]帝王豪杰风云变幻敌不过桑田沧海
[01:25.85]我不关心谁的江山只眷恋两小无猜
[01:30.36]兴风作浪不稀罕只身固守峨眉山
[01:35.14]一瞬三年五载 品粗茶 食淡饭
[01:39.73]六界八荒四海 无人与我来叫板
[01:44.33]人间荒唐古怪 竹林外 有书斋
[01:49.11]匿于此地畅快 偏来者不善善者不来
[01:56.00]是我装模作样在瞎猜
[02:00.39]还是他们本就心怀鬼胎
[02:03.15]有人不知悔改 迷雾中混淆黑白
[02:07.73]在情怀里市侩 旁人不敢来拆穿
[02:12.39]看似时来运转 实则在顶风作案
[02:17.06]待曲终又人散 这一出还有谁在围观
[02:21.82]静悄悄配唠唠叨叨
[02:24.00]随便瞧瞧我凑凑热闹
[02:26.34]客串也别太潦草
[02:28.70]吃的生蚝要蘸个酱料
[02:31.00]悄悄你唠唠叨叨
[02:33.30]随便瞧瞧你凑的热闹
[02:35.68]听到你做个记号
[02:37.84]请装进书包别四处招摇
[02:40.29]有人迷途知返
[02:45.08]便是苦尽甘来
[02:50.00]一瞬三年五载
[02:54.15]这曲终又人散
[03:33.63]
[03:33.95]
[03:34.13]
[03:34.31]
[03:34.48]
[03:34.82]www.22lrc.com ★ 小当午丶 制作
[03:35.25]联系QQ:11066086
`
var oAudio = document.getElementById('audio')
var oSpan = document.getElementById('lyric')

/* 
  timeupdate 事件在音频/视频（audio/video）的播放位置发生改变时触发。
  该事件可以在以下情况被调用:
  播放音频/视频（audio/video）
  移动音频/视频（audio/video）播放位置
*/

oAudio.addEventListener('timeupdate', function () {
  // duration：自带属性 duration 属性返回当前音频/视频的总长度，以秒计
  // currentTime：设置或返回音频/视频中的当前播放位置（以秒计）
  var currentTime = oAudio.currentTime
  // 当前播放秒数 0.149732
  // 当前播放秒数 0.397664
  // 当前播放秒数 0.648529
  // console.log('当前播放秒数', currentTime)
  var minutes = parseInt(currentTime / 60) < 10 ? `0${parseInt(currentTime / 60)}` : parseInt(currentTime / 60)
  var seconds = parseInt(currentTime % 60) < 10 ? `0${parseInt(currentTime % 60)}` : parseInt(currentTime % 60)
  var currentTime = `${minutes}:${seconds}`
  // (.+) 用括号括起来 索引1拿到
  var regStr = `\\[${currentTime}\\.\\d{2}\\](.+)`
  var reg = new RegExp(regStr)
  if (reg.exec(lrcStr)) {
    oSpan.innerHTML = reg.exec(lrcStr)[1]
  }
})

可以看出每秒钟执行4次