需求模擬-歌詞顯示 正則（五）
阿新 • • 發佈：2021-01-15
技術標籤：正則表示式
（一）需求
隨著歌曲的播放，頁面中顯示當前演唱句子的歌詞
（二）思路以及程式碼
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次
執行圖：
