音樂歌詞同步實現指南

yy736044583 發布于2019-08-29 12:33 / 3101人閱讀

摘要：有道友問了我這個問題，所以在這寫了下思路首先，我默認你至少已經了解了的標簽的相關屬性，直入正題使用指南標簽之事件屬性歌詞一般的說，文件由時間的標簽組成，如截圖所示現在以此歌詞為例，對該歌詞進行如下處理以行為單位拆分每一句歌詞將每句歌詞的時間

有道友問了我這個問題，所以在這寫了下思路
首先，我默認你至少已經了解了h5的audio標簽的相關屬性，直入正題
audio使用指南
audio標簽
audio之HTML 事件屬性

old歌詞

一般的說，lyric文件由時間的tag標簽組成，如截圖所示

現在以此歌詞為例，對該歌詞進行如下處理：

以行為單位拆分每一句歌詞

將每句歌詞的時間tag和內容分離

將時間轉換為分鐘

new 歌詞

通過下面簡單的正則轉化

      let pattern = /[d{2}:d{2}.d{2}]/g;
      while (!pattern.test(lines[0])) {
        lines = lines.slice(1);
      }

我們可以得到如下新歌詞數組（看著你們急不可耐的神情，我就不在乎這樣的展示方式了）

分離出來后我們要做的其實就很簡單了
將分離出來的[時間,內容]與當前的音樂播放時間對比，設置當前序號，根據序號將對應顯示的歌詞高亮，同時調整視圖區top，給予用戶視覺上的滾動效果。

沒圖沒真相，來來來

具體實現代碼，關注我的網易云音樂實踐，這里我就不多寫了，提供思路，僅供參考，如果有更加優雅的實現方式，非常希望你能@我

網易云音樂移動版（期待你的star）

api來源(感謝Binaryify不斷更新的網易云音樂接口，這也將是這個項目不斷拓展下去的堅實依托)

源碼地址

項目預覽（web端在chrome調試模式下效果更佳）

針對segmenfault類app暫時無法有效預覽的問題，建議粘貼http://118.89.226.181:8080到手機其他瀏覽器體驗

廣告結束

GPU云服務器云服務器 html實現歌詞同步歌詞同步 js帶歌詞音樂播放器 html實現音樂

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111980.html

音樂歌詞同步實現指南

摘要：有道友問了我這個問題，所以在這寫了下思路首先，我默認你至少已經了解了的標簽的相關屬性，直入正題使用指南標簽之事件屬性歌詞一般的說，文件由時間的標簽組成，如截圖所示現在以此歌詞為例，對該歌詞進行如下處理以行為單位拆分每一句歌詞將每句歌詞的時間有道友問了我這個問題，所以在這寫了下思路首先，我默認你至少已經了解了h5的audio標簽的相關屬性，直入正題audio使用指南audio標簽aud...

mmy123456 2019-08-21 11:40 評論0 收藏0
HTML5移動端音樂播放器（啟蒙篇）

摘要：前些天偷臺風的閑暇時寫了一個移動端音樂播放器，作為練手項目。有的歌詞周杰倫算什么男人格式是時間點時間歌詞創建映射首先以將歌詞字符串分割成以時間點文字的數組，但由于這樣分割之后最后一個元素是空的，所以用刪除最后一個元素。這段時間公司一直在做一個PC的教育類單頁應用，龐大復雜，涉及非常多H5的知識，音頻就是其中的一部分。前些天偷臺風的閑暇時寫了一個移動端音樂播放器，作為練手項目。在線地...

Lin_R 2019-08-20 11:58 評論0 收藏0
用 TS + Vue 重寫 APlayer HTML5 音樂播放器

摘要：簡介是一款簡潔漂亮的音樂播放器在我第一次看到這款播放器顏值的時候讓我眼前一亮，我非常崇拜那些能設計出好看界面的設計師但是在用過之后發現還是有不足的地方這是我曾經提過的用了一段時間，很喜歡簡潔的，提一些其他可改進的建議我認為有必要提供動態管理簡介 @DIYgod/APlayer 是一款簡潔漂亮的 HTML5 音樂播放器 (〃?ω?) 在我第一次看到這款播放器顏值的時候讓我眼前一亮，我...

BingqiChen 2019-08-20 18:15 評論0 收藏0