Shoka主题：实现桌面歌词展示效果

    controls: ['mode', 'lyrics', 'backward', 'play-pause', 'forward', 'visualizer', 'volume'],

      "lyrics": function() {

        lyrics.toggle()

      }

  var lyrics = {

    el: null,

    overlay: null,

    data: null,

    cache: {},

    pending: {},

    index: 0,

    currentText: '',

    enabled: isToolPlayer && store.get('_PlayerLyrics') !== 'off',

    ensureOverlay: function() {

      if(!isToolPlayer)

        return null

      if(!this.overlay) {

        this.overlay = $('#music-lyrics-overlay')

        if(!this.overlay) {

          this.overlay = BODY.createChild('div', {

            id: 'music-lyrics-overlay',

            className: 'music-lyrics-overlay',

            innerHTML: '<span></span>'

          })

          this.overlay.attr('role', 'status')

          this.overlay.attr('aria-live', 'polite')

          this.overlay.attr('aria-hidden', 'true')

        }

      }

      return this.overlay

    },

    syncButton: function() {

      if(!isToolPlayer || !controller.btns.lyrics)

        return

      var button = controller.btns.lyrics

      button.toggleClass('active', this.enabled)

      button.attr('aria-pressed', this.enabled ? 'true' : 'false')

      button.attr('title', this.enabled ? '关闭桌面歌词' : '开启桌面歌词')

    },

    syncOverlay: function() {

      if(!isToolPlayer)

        return

      var overlay = this.ensureOverlay()

      if(!overlay)

        return

      var visible = this.enabled && !!this.currentText && source && !source.paused

      overlay.child('span').textContent = this.currentText || ''

      overlay.toggleClass('show', visible)

      overlay.attr('aria-hidden', visible ? 'false' : 'true')

    },

    toggle: function() {

      if(!isToolPlayer)

        return

      this.enabled = !this.enabled

      if(this.enabled)

        store.del('_PlayerLyrics')

      else

        store.set('_PlayerLyrics', 'off')

      this.syncButton()

      this.syncOverlay()

      showtip(this.enabled ? '桌面歌词已开启' : '桌面歌词已关闭')

    },

    setCurrent: function(index) {

      if(!this.el || !this.data || !this.data[index])

        return

      var current = this.el.getElementsByClassName('current')[0]

      var lines = this.el.getElementsByTagName('p')

      current && current.removeClass('current')

      if(lines[index]) {

        lines[index].addClass('current')

        var y = -(index-1)

        this.el.style.transform = 'translateY('+y+'rem)'

        this.el.style.webkitTransform = 'translateY('+y+'rem)'

      }

      this.index = index

      this.currentText = this.data[index][1]

      this.syncOverlay()

    },

    create: function(box) {

      var current = playlist.current()

      var that = this

      var raw = playlist.current().lrc || ''

      this.data = []

      this.currentText = ''

      // Do not keep the previous song's seekable lyric lines while fetching.

      box.textContent = ''

      this.syncOverlay()

      var callback = function(body) {

        if(current !== playlist.current() || !box.isConnected)

          return;

        that.data = that.parse(body)

        that.el = box.createChild('div', {

          className: 'inner'

        }, 'replace')

        that.data.forEach(function(line, index) {

          var lyricLine = that.el.createChild('p', { className: index === 0 ? 'current' : '', textContent: line[1] })

          lyricLine.dataset.time = String(line[0])

        })

        that.index = 0

        if(that.data.length)

          that.setCurrent(0)

        else

          that.syncOverlay()

      }

      if(raw.startsWith('http'))

        this.fetch(raw, callback)

      else

        callback(raw)

    },

    update: function(currentTime) {

      if(!this.data || !this.data.length)

        return

      if (this.index > this.data.length - 1 || currentTime < this.data[this.index][0] || (!this.data[this.index + 1] || currentTime >= this.data[this.index + 1][0])) {

        for (var i = 0; i < this.data.length; i++) {

          if (currentTime >= this.data[i][0] && (!this.data[i + 1] || currentTime < this.data[i + 1][0])) {

            this.setCurrent(i)

            break

          }

        }

      }

    },

    parse: function(lrc_s) {

      if (lrc_s) {

          lrc_s = lrc_s.replace(/([^\]^\n])\[/g, function(match, p1){return p1 + '\n['});

          const lyric = lrc_s.split('\n');

          var lrc = [];

          const lyricLen = lyric.length;

          for (var i = 0; i < lyricLen; i++) {

              // match lrc time

              const lrcTimes = lyric[i].match(/\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/g);

              // match lrc text

              const lrcText = lyric[i]

                  .replace(/.*\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/g, '')

                  .replace(/<(\d{2}):(\d{2})(\.(\d{2,3}))?>/g, '')

                  .replace(/^\s+|\s+$/g, '');

              if (lrcTimes) {

                  // handle multiple time tag

                  const timeLen = lrcTimes.length;

                  for (var j = 0; j < timeLen; j++) {

                      const oneTime = /\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/.exec(lrcTimes[j]);

                      const min2sec = oneTime[1] * 60;

                      const sec2sec = parseInt(oneTime[2]);

                      const msec2sec = oneTime[4] ? parseInt(oneTime[4]) / ((oneTime[4] + '').length === 2 ? 100 : 1000) : 0;

                      const lrcTime = min2sec + sec2sec + msec2sec;

                      lrc.push([lrcTime, lrcText]);

                  }

              }

          }

          // sort by time

          lrc = lrc.filter(function(item){return item[1]});

          lrc.sort(function(a, b){return a[0] - b[0]});

          return lrc;

      } else {

          return [];

      }

    },

    fetch: function(url, callback) {

      var that = this

      var key = utils.lyricCacheKey(url)

      if(Object.prototype.hasOwnProperty.call(this.cache, key)) {

        callback(this.cache[key])

        return

      }

      try {

        var stored = store.get(key)

        if(stored !== null) {

          this.cache[key] = stored

          callback(stored)

          return

        }

      } catch (error) {}

      if(!this.pending[key]) {

        var sources = utils.lyricSources(url)

        var request = function(index) {

          if(index >= sources.length)

            return Promise.resolve('')

          return utils.fetchWithTimeout(sources[index], 4500, 'text').then(function(body) {

            if(!body.trim()) throw new Error('Empty lyrics')

            return body

          }).catch(function() {

            return request(index + 1)

          })

        }

        this.pending[key] = request(0).then(function(body) {

          delete that.pending[key]

          if(body) {

            that.cache[key] = body

            try {

              store.set(key, body)

            } catch (error) {}

          }

          return body

        })

      }

      this.pending[key].then(callback)

    }

  }

      this.el.innerHTML = '<div class="cover"><div class="disc"><img class="blur" alt="" decoding="async" /></div></div>'

      + '<div class="info"><h4 class="title"></h4><span></span>'

      + '<div class="lrc"></div></div>'

      this.el.querySelector('.info > .title').textContent = current.name

      this.el.querySelector('.info > span').textContent = current.artist

      lyrics.create(this.el.child('.lrc'))

    drag: function(e) {

      e.preventDefault()

      var current = playlist.current().el

      var thumbMove = function(e) {

        e.preventDefault()

        var percentage = progress.percent(e, current)

        progress.update(percentage)

        lyrics.update(percentage * source.duration);

      };

      var thumbUp = function(e) {

        e.preventDefault()

        current.removeEventListener(utils.nameMap.dragEnd, thumbUp)

        current.removeEventListener(utils.nameMap.dragMove, thumbMove)

        var percentage = progress.percent(e, current)

        progress.update(percentage)

        t.player.seek(percentage * source.duration)

        source.disableTimeupdate = false

        progress.seeking(false)

      };

      source.disableTimeupdate = true

      progress.seeking(true)

      current.addEventListener(utils.nameMap.dragMove, thumbMove)

      current.addEventListener(utils.nameMap.dragEnd, thumbUp)

    }

  }

  var controller = {

    el: null,

    btns: {},

    step: 'next',

    create: function () {

      if(!t.player.options.controls)

        return

      var that = this

      t.player.options.controls.forEach(function(item) {

        if(that.btns[item])

          return;

        var opt = {

          onclick: function(event){

            that.events[item] ? that.events[item](event) : t.player.options.events[item](event)

          }

        }

        switch(item) {

          case 'volume':

            opt.className = ' ' + (source.muted ? 'off' : 'on')

            opt.innerHTML = '<div class="bar"></div>'

            opt['on'+utils.nameMap.dragStart] = that.events['volume']

            opt.onclick = null

            break;

          case 'mode':

            opt.className = ' ' + t.player.options.mode

            break;

          default:

            opt.className = ''

            break;

        }

        opt.className = item + opt.className + ' btn'

        that.btns[item] = that.el.createChild('div', opt)

        if(item === 'visualizer' || item === 'lyrics') {

          that.btns[item].tabIndex = 0

          that.btns[item].attr('role', 'button')

          that.btns[item].addEventListener('keydown', function(event) {

            if(event.key === 'Enter' || event.key === ' ') {

              event.preventDefault()

              event.currentTarget.click()

            }

          })

        }

      })

      that.btns['volume'].bar = that.btns['volume'].child('.bar')

      if(isToolPlayer) {

        lyrics.syncButton()

        visualizer.syncButton()

      }

    },

    onplay: function() {

      t.parentNode.addClass('playing')

      visualizer.setPlaying(true)

      lyrics.syncOverlay()

      showtip(this.attr('title'), true)

      NOWPLAYING = t

    },

    onpause: function() {

      t.parentNode.removeClass('playing')

      visualizer.setPlaying(false)

      lyrics.syncOverlay()

      NOWPLAYING = null

    },

    ontimeupdate: function() {

      if(!this.disableTimeupdate) {

        progress.update(this.currentTime / this.duration)

        lyrics.update(this.currentTime)

      }

    },

    t.player.options = Object.assign(option, config);

    if(!isToolPlayer && t.player.options.controls)

      t.player.options.controls = t.player.options.controls.filter(function(item) {

        return item !== 'visualizer' && item !== 'lyrics'

      })