【教程】純前端做一個歌詞顯示的音樂播放器
節(jié)目：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
原理及實現(xiàn)：
音樂播放
通過html5的<audio>屬性進行播放
這里為了方便不開發(fā)進度條和控制進度的工具，直接用各個瀏覽器渲染的audio標簽
并且寬度設(shè)置為100%
<audio id="audio" src="mp3/Flower - 秋風(fēng)のアンサー.mp3" controls style="width:100%"></audio>
注意，audio要指定一個id，方便后續(xù)獲取
歌曲顯示
自己設(shè)置好
為了美觀，我用Bootstrap的jumbotrom大塊屏
<div class="jumbotron">
<h1 class="display-4">秋風(fēng)のアンサー</h1>
<p class="lead">Flower</p>
</div>
歌詞顯示（核心部分）
預(yù)設(shè)置：
因為LRC是timelrc 的格式，js不能讀取，但js有個很相似的格式：json，因此我們可以把lrc轉(zhuǎn)為json，類似于：
預(yù)設(shè)置：
因為LRC是timelrc 的格式，js不能讀取，但js有個很相似的格式：json，因此我們可以把lrc轉(zhuǎn)為json，類似于：
所以先要處理lrc
用sublime打開lrc
鼠標對準第一個中括號，按住中鍵不放，指針將會一直沿著你鼠標的方向選擇，滑到最底部選中所有時間
Ctrl+C復(fù)制，在Excel里粘貼
最好留兩個單元格計算
分鐘單元格輸入函數(shù)：=LEFT(C2,2)；C2是你的LRC時間所在單元格，下同
秒數(shù)單元格輸入函數(shù)：=RIGHT(C2,5)
這樣分秒就分離了
然后將分鐘+秒變成js能讀取的時間
輸入函數(shù)：=分鐘單元格*60+秒鐘單元格
鼠標在單元格右下角下拖快速填充到底
同樣用Sublime，在第一個"]"右中括號那里按住中鍵選擇（注意最好選擇進中鍵，不然對于有些空行的歌詞會復(fù)制不了）
粘貼進Excel
然后替換 ] 為 空
復(fù)制具有時間和歌詞的兩列，去到Excel轉(zhuǎn)json的網(wǎng)站
在線Excel、CSV轉(zhuǎn)JSON格式-BeJSON.com
轉(zhuǎn)換完畢，接下來就是匹配歌詞然后播放了
匹配音頻和歌詞時間點
這部分我想了很久，一直沒辦法找到方法，現(xiàn)在有個問題，我想讓每句播放的時候來個動畫，但是現(xiàn)在刷新頻率太快，各位大佬支個招吧
html里添加個顯示歌詞的元素，我用span，并且用Bootstrap的字體
<span id="lrc" class="lead"></span>
注意，文本要指定一個id，方便后續(xù)獲取
js里有個操作，currentTime
給歌詞json賦值
獲取音頻和文字控件：
要匹配音頻和歌詞時間點，就要不斷判斷和遍歷歌詞數(shù)組
遍歷數(shù)組可以這樣來：
判斷音頻與對應(yīng)歌詞
直接用audio.currentTime與上述遍歷數(shù)組查找lrcjsoni1.time是行不通的，因為他們的時間點不可能完全精確，有0.01ms的誤差都不行
所以只能用模糊搜索
當(dāng) 當(dāng)前時間大于數(shù)組里某個數(shù)組的時間大小時，判定就是該數(shù)組，通過該數(shù)組就能獲取到時間和歌詞從而顯示
當(dāng)音頻播放時不斷執(zhí)行事件：
遍歷歌詞的同時不斷查找匹配歌詞
播放的時候不斷查找，不斷遍歷數(shù)組
如果你用console輸出，就會看到速度非?？欤圆贿m合在html創(chuàng)建元素或者document.write，只能用innerHTML不斷刷新元素
前面已經(jīng)講到獲取歌詞元素了，所以直接可以對歌詞操作：
總代碼
Javascript
HTML：
<div?class="jumbotron">?? ?<h1?class="display-4">秋風(fēng)のアンサー</h1>?? ?<p?class="lead">Flower</p>?? ?<span?class="lead"?type="text"?id="lrc"></span>?? ?<br?/>?? ?<audio id="audio"?src="mp3/Flower - 秋風(fēng)のアンサー.mp3"?controls style="width:100%"></audio></div>
