亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

音樂歌詞同步實(shí)現(xiàn)指南

mmy123456 / 1579人閱讀

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

有道友問了我這個問題，所以在這寫了下思路
首先，我默認(rèn)你至少已經(jīng)了解了h5的audio標(biāo)簽的相關(guān)屬性，直入正題
audio使用指南
audio標(biāo)簽
audio之HTML 事件屬性

old歌詞

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

現(xiàn)在以此歌詞為例，對該歌詞進(jìn)行如下處理：

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

將每句歌詞的時間tag和內(nèi)容分離

將時間轉(zhuǎn)換為分鐘

new 歌詞

通過下面簡單的正則轉(zhuǎn)化

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

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

分離出來后我們要做的其實(shí)就很簡單了
將分離出來的[時間,內(nèi)容]與當(dāng)前的音樂播放時間對比，設(shè)置當(dāng)前序號，根據(jù)序號將對應(yīng)顯示的歌詞高亮，同時調(diào)整視圖區(qū)top，給予用戶視覺上的滾動效果。

沒圖沒真相，來來來

具體實(shí)現(xiàn)代碼，關(guān)注我的網(wǎng)易云音樂實(shí)踐，這里我就不多寫了，提供思路，僅供參考，如果有更加優(yōu)雅的實(shí)現(xiàn)方式，非常希望你能@我

網(wǎng)易云音樂移動版（期待你的star）

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

源碼地址

項目預(yù)覽（web端在chrome調(diào)試模式下效果更佳）

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

廣告結(jié)束

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/86985.html

相關(guān)文章

  • 音樂歌詞同步實(shí)現(xiàn)指南

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

    yy736044583 評論0 收藏0

  • HTML5移動端音樂播放器（啟蒙篇）

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

    Lin_R 評論0 收藏0

  • 用 TS + Vue 重寫 APlayer HTML5 音樂播放器

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

    BingqiChen 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<