成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

mmy123456 / 1529人閱讀

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

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

old歌詞

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

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

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

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

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

new 歌詞

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

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

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

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

沒圖沒真相，來來來

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

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

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

源碼地址

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

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

廣告結(jié)束

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86985.html

相關(guān)文章

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

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

    yy736044583 評(píng)論0 收藏0

  • HTML5移動(dòng)端音樂播放器（啟蒙篇）

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

    Lin_R 評(píng)論0 收藏0

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

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

    BingqiChen 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<