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

資訊專欄INFORMATION COLUMN

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

yy736044583 / 3193人閱讀

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

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

old歌詞

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

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

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

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

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

new 歌詞

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

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

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

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

沒(méi)圖沒(méi)真相，來(lái)來(lái)來(lái)

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

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

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

源碼地址

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

針對(duì)segmenfault類app暫時(shí)無(wú)法有效預(yù)覽的問(wèn)題，建議粘貼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://www.ezyhdfw.cn/yun/111980.html

相關(guān)文章

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

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

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

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

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

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

  • 用 TS + Vue 重寫(xiě) APlayer HTML5 音樂(lè)播放器

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<