Shoka主题：实现音乐音效可视化

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

      "visualizer": function() {

        visualizer.toggle()

      },

      if(isToolPlayer) {

        visualizer.available = d !== "none"

        visualizer.syncState()

      }

    pause: function() {

      this.playRequested = false

      source.pause()

      if(isToolPlayer)

        visualizer.setPlaying(false)

      document.title = originTitle

    },

    stop: function() {

      this.playRequested = false

      source.pause();

      source.currentTime = 0;

      if(isToolPlayer)

        visualizer.setPlaying(false)

      document.title = originTitle;

    destroy: function() {

      // The tool player survives PJAX. Explicit teardown releases visual work

      // only; its Web Audio graph may also be the audible playback route.

      visualizer.destroy()

    }

  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()

      }

    },

  var visualizer = {

    el: null,

    ctx: null,

    enabled: isToolPlayer && store.get('_PlayerVisualizer') === 'on',

    available: false,

    playing: false,

    raf: null,

    stopTimer: null,

    audioContext: null,

    analyser: null,

    analyserSource: null,

    mediaStream: null,

    frequencyData: null,

    timeData: null,

    levels: [],

    audioEnergy: 0,

    bassEnergy: 0,

    energyBase: 0,

    impactEnergy: 0,

    signalReady: false,

    playingSince: 0,

    lastAnalyserAttempt: 0,

    analyserType: 'fallback',

    lastDiagnosticUpdate: 0,

    motionUnsubscribe: null,

    destroyed: false,

    motionReduced: function() {

      return window.ShokaMotion && typeof window.ShokaMotion.reduced === 'function'

        ? window.ShokaMotion.reduced()

        : !!(document.documentElement.dataset && document.documentElement.dataset.motion === 'reduce') ||

          !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches)

    },

    bindMotion: function() {

      if(!isToolPlayer || this.motionUnsubscribe || this.destroyed)

        return

      var that = this

      var refresh = function() { that.syncState() }

      if(window.ShokaMotion && typeof window.ShokaMotion.subscribe === 'function') {

        this.motionUnsubscribe = window.ShokaMotion.subscribe(refresh)

      } else {

        var query = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)')

        document.addEventListener('shoka:display-change', refresh)

        if(query && query.addEventListener) query.addEventListener('change', refresh)

        else if(query && query.addListener) query.addListener(refresh)

        this.motionUnsubscribe = function() {

          document.removeEventListener('shoka:display-change', refresh)

          if(query && query.removeEventListener) query.removeEventListener('change', refresh)

          else if(query && query.removeListener) query.removeListener(refresh)

        }

      }

      this.syncState()

    },

    ensureCanvas: function() {

      if(!isToolPlayer)

        return false

      var waves = $('#waves')

      if(!waves)

        return false

      if(!this.el) {

        this.el = waves.child('.music-visualizer')

        if(!this.el) {

          this.el = waves.createChild('canvas', {

            className: 'music-visualizer'

          })

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

        }

        this.ctx = this.el.getContext('2d')

      }

      return !!this.ctx

    },

    syncButton: function() {

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

        return

      var button = controller.btns.visualizer

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

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

      button.attr('title', this.enabled && this.motionReduced()

        ? '音效可视化已开启，减弱动效下暂停；点击关闭'

        : this.enabled ? '关闭音效可视化' : '开启音效可视化')

    },

    syncState: function() {

      if(!isToolPlayer || this.destroyed)

        return

      var waves = $('#waves')

      var reducedMotion = this.motionReduced()

      var active = this.enabled && this.available && this.playing && !reducedMotion

      this.syncButton()

      if(active && this.ensureCanvas()) {

        waves.addClass('visualizer-enabled visualizer-playing')

        this.start()

        this.setupAnalyser()

      } else {

        waves && waves.removeClass('visualizer-enabled visualizer-playing')

        if(reducedMotion) this.stop()

        else this.stopSoon()

      }

    },

    toggle: function() {

      if(!isToolPlayer)

        return

      this.enabled = !this.enabled

      if(this.enabled) {

        this.signalReady = false

        store.set('_PlayerVisualizer', 'on')

      } else {

        store.del('_PlayerVisualizer')

      }

      this.syncState()

      showtip(this.enabled ? '音效可视化已开启' : '音效可视化已关闭')

    },

    setPlaying: function(status) {

      if(!isToolPlayer)

        return

      this.playing = !!status

      if(this.playing) {

        this.playingSince = Date.now()

      } else {

        this.audioEnergy = 0

        this.bassEnergy = 0

        this.energyBase = 0

        this.impactEnergy = 0

      }

      this.syncState()

    },

    setupAnalyser: function() {

      if(this.destroyed || this.motionReduced() || this.analyser || !source || !this.enabled || !this.playing)

        return

      var AudioContext = window.AudioContext || window.webkitAudioContext

      if(!AudioContext)

        return

      this.lastAnalyserAttempt = Date.now()

      try {

        if(!this.audioContext)

          this.audioContext = new AudioContext()

        if(this.audioContext.state === 'suspended')

          this.audioContext.resume().catch(function() {})

        var analyser = this.audioContext.createAnalyser()

        analyser.fftSize = 512

        analyser.smoothingTimeConstant = .56

        // The audio element is created with anonymous CORS before its src is set,

        // so cross-origin songs with ACAO headers can provide real PCM samples.

        // MediaElementSource remains attached when src changes and must be reused.

        try {

          this.analyserSource = this.audioContext.createMediaElementSource(source)

          this.analyserSource.connect(analyser)

          analyser.connect(this.audioContext.destination)

          this.analyserType = 'media-element'

        } catch(error) {}

        // captureStream is a compatibility fallback. Some browsers end its

        // audio track when src changes, therefore it must not be the first choice.

        var streamMethod = source.captureStream || source.mozCaptureStream

        if(!this.analyserSource && streamMethod) {

          this.mediaStream = streamMethod.call(source)

          var stream = this.mediaStream

          if(stream && stream.getAudioTracks && stream.getAudioTracks().length) {

            this.analyserSource = this.audioContext.createMediaStreamSource(stream)

            this.analyserSource.connect(analyser)

            this.analyserType = 'media-stream'

          }

        }

        if(this.analyserSource) {

          this.analyser = analyser

          this.frequencyData = new Uint8Array(analyser.frequencyBinCount)

          this.timeData = new Uint8Array(analyser.fftSize)

        }

      } catch(error) {

        this.analyser = null

        this.analyserSource = null

        this.analyserType = 'fallback-' + (error && error.name ? error.name.toLowerCase() : 'error')

      }

    },

    resize: function() {

      if(!this.el || !this.ctx)

        return null

      var rect = this.el.getBoundingClientRect()

      if(!rect.width || !rect.height)

        return null

      var dpr = Math.min(window.devicePixelRatio || 1, 2)

      var width = Math.round(rect.width * dpr)

      var height = Math.round(rect.height * dpr)

      if(this.el.width !== width || this.el.height !== height) {

        this.el.width = width

        this.el.height = height

        this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0)

      }

      return {

        width: rect.width,

        height: rect.height

      }

    },

    getLevel: function(index, count, time) {

      var target = 0

      var volume = source && !source.muted ? source.volume : 0

      if(this.analyser && this.frequencyData) {

        var ratio = (index + 1) / count

        var bin = Math.min(this.frequencyData.length - 1, Math.floor(Math.pow(ratio, 1.45) * this.frequencyData.length * .72))

        var previousBin = Math.max(0, bin - 1)

        var nextBin = Math.min(this.frequencyData.length - 1, bin + 1)

        var rawLevel = Math.max(0, (this.frequencyData[previousBin] + this.frequencyData[bin] * 2 + this.frequencyData[nextBin]) / 4 - 3)

        var bandEnergy = Math.pow(rawLevel / 225, .72)

        target = Math.min(1.35, bandEnergy * .92 + this.audioEnergy * .32 + this.bassEnergy * .28 + this.impactEnergy * .45) * volume

      }

      if(!this.signalReady && this.playing && volume > 0 && Date.now() - this.playingSince > 500) {

        var phase = time * (3.4 + index % 5 * .12) + index * .72

        var beat = Math.pow(Math.max(0, Math.sin(time * 3.7)), 6) * .34

        target = (.12 + (Math.sin(phase) + 1) * .13 + beat) * volume

      }

      if(!this.playing || volume === 0)

        target = .025 + (Math.sin(time * 1.25 + index * .38) + 1) * .012

      var current = this.levels[index] || 0

      var easing = target > current ? .46 : .14

      current += (target - current) * easing

      this.levels[index] = current

      return current

    },

    draw: function() {

      if(this.destroyed || this.motionReduced()) {

        this.stop()

        return

      }

      var that = this

      var size = this.resize()

      if(!size || !this.ctx) {

        this.raf = window.requestAnimationFrame(function() {

          that.draw()

        })

        return

      }

      var ctx = this.ctx

      var width = size.width

      var height = size.height

      var count = width < 600 ? 34 : 56

      var time = performance.now() / 1000

      var levels = []

      if(this.playing && !this.analyser && Date.now() - this.lastAnalyserAttempt > 900)

        this.setupAnalyser()

      if(this.analyser && this.frequencyData) {

        this.analyser.getByteFrequencyData(this.frequencyData)

        if(this.timeData)

          this.analyser.getByteTimeDomainData(this.timeData)

        var signalTotal = 0

        var signalPeak = 0

        var signalEnd = Math.floor(this.frequencyData.length * .72)

        var bassEnd = Math.max(5, Math.floor(this.frequencyData.length * .09))

        var bassTotal = 0

        for(var signalIndex = 2; signalIndex < signalEnd; signalIndex++) {

          var signalValue = this.frequencyData[signalIndex]

          signalTotal += signalValue

          signalPeak = Math.max(signalPeak, signalValue)

          if(signalIndex < bassEnd)

            bassTotal += signalValue

        }

        var signalAverage = signalTotal / Math.max(1, signalEnd - 2)

        var bassAverage = bassTotal / Math.max(1, bassEnd - 2) / 255

        var squareTotal = 0

        if(this.timeData) {

          for(var timeIndex = 0; timeIndex < this.timeData.length; timeIndex++) {

            var sample = (this.timeData[timeIndex] - 128) / 128

            squareTotal += sample * sample

          }

        }

        var rms = this.timeData ? Math.sqrt(squareTotal / this.timeData.length) : signalAverage / 255

        var energyTarget = Math.min(1, rms * 3.15 + bassAverage * .72)

        var energyRise = Math.max(0, energyTarget - this.audioEnergy)

        var bassRise = Math.max(0, bassAverage - this.bassEnergy)

        this.energyBase += (energyTarget - this.energyBase) * (energyTarget > this.energyBase ? .028 : .014)

        var impactTarget = Math.min(1.2, Math.max(0, energyTarget - this.energyBase) * 2.8 + energyRise * 3.6 + bassRise * 5.2)

        var impactEase = impactTarget > this.impactEnergy ? .64 : .055

        var energyEase = energyTarget > this.audioEnergy ? .42 : .11

        var bassEase = bassAverage > this.bassEnergy ? .5 : .14

        this.audioEnergy += (energyTarget - this.audioEnergy) * energyEase

        this.bassEnergy += (bassAverage - this.bassEnergy) * bassEase

        this.impactEnergy += (impactTarget - this.impactEnergy) * impactEase

        if(signalPeak > 12 && (signalAverage > 1.5 || rms > .008))

          this.signalReady = true

      }

      if(Date.now() - this.lastDiagnosticUpdate > 500) {

        var waves = $('#waves')

        if(waves) {

          waves.attr('data-visualizer-source', this.analyserType)

          waves.attr('data-visualizer-reactive', this.signalReady ? 'true' : 'false')

          waves.attr('data-visualizer-energy', this.audioEnergy.toFixed(3))

          waves.attr('data-visualizer-bass', this.bassEnergy.toFixed(3))

          waves.attr('data-visualizer-impact', this.impactEnergy.toFixed(3))

        }

        this.lastDiagnosticUpdate = Date.now()

      }

      ctx.clearRect(0, 0, width, height)

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

        var level = this.getLevel(i, count, time)

        var edge = Math.sin(Math.PI * (i + .5) / count)

        levels.push(level * (.52 + edge * .72))

      }

      var layers = [

        { baseline: .86, amplitude: .66, phase: .2, speed: 1.18, alpha: .28, line: 1.5 },

        { baseline: .68, amplitude: .82, phase: 1.7, speed: 1.42, alpha: .38, line: 2 },

        { baseline: .5, amplitude: .98, phase: 3.1, speed: 1.66, alpha: .5, line: 2.6 }

      ]

      var trace = function(points) {

        ctx.beginPath()

        ctx.moveTo(points[0][0], points[0][1])

        for(var pointIndex = 0; pointIndex < points.length - 1; pointIndex++) {

          var previous = points[pointIndex - 1] || points[pointIndex]

          var current = points[pointIndex]

          var next = points[pointIndex + 1]

          var following = points[pointIndex + 2] || next

          var control1X = current[0] + (next[0] - previous[0]) / 6

          var control1Y = current[1] + (next[1] - previous[1]) / 6

          var control2X = next[0] - (following[0] - current[0]) / 6

          var control2Y = next[1] - (following[1] - current[1]) / 6

          ctx.bezierCurveTo(control1X, control1Y, control2X, control2Y, next[0], next[1])

        }

      }

      layers.forEach(function(layer, layerIndex) {

        var points = []

        var reactive = that.signalReady && that.playing

        var audioMotion = reactive ? that.audioEnergy : 0

        var bassMotion = reactive ? that.bassEnergy : 0

        var impactMotion = reactive ? that.impactEnergy : 0

        // Keep the horizontal travel calm and continuous. Audio energy changes

        // the height, while only adding a very small bounded phase offset.

        var phaseTime = time * layer.speed * .48 + bassMotion * .16 + impactMotion * .1

        for(var index = 0; index < count; index++) {

          var x = index / (count - 1) * width

          var oscillation = Math.sin(index * .42 + phaseTime + layer.phase)

          var sharpness = 1 + layerIndex * .04

          var sharpOscillation = Math.sign(oscillation) * Math.pow(Math.abs(oscillation), sharpness)

          var bandMotion = reactive

            ? Math.max(0, levels[index] - .12) * 1.28

            : levels[index] * .72

          var response = Math.min(1.55, bandMotion + audioMotion * .36 + bassMotion * (.2 + layerIndex * .07) + impactMotion * .86)

          var pulse = reactive ? .68 + audioMotion * .82 + impactMotion * 1.18 : 1

          var energy = (reactive ? .006 : .028) + response * pulse * 1.02

          var room = sharpOscillation >= 0 ? layer.baseline - .085 : .915 - layer.baseline

          var amplitudeScale = Math.min(.9, .08 + energy * layer.amplitude * .27)

          var displacement = room * amplitudeScale * Math.abs(sharpOscillation)

          var detailStrength = reactive ? Math.min(.012, .002 + audioMotion * .009 + impactMotion * .009) : .005

          var detail = Math.sin(index * .12 - phaseTime * .55 + layer.phase) * height * detailStrength

          var y = height * (layer.baseline - Math.sign(sharpOscillation) * displacement) + detail

          y = Math.max(height * .055, Math.min(height * .945, y))

          points.push([x, y])

        }

        var gradient = ctx.createLinearGradient(0, 0, width, 0)

        gradient.addColorStop(0, 'rgba(86, 184, 255, .08)')

        gradient.addColorStop(.18, 'rgba(63, 224, 238, .94)')

        gradient.addColorStop(.43, 'rgba(118, 142, 255, .98)')

        gradient.addColorStop(.66, 'rgba(190, 101, 255, .98)')

        gradient.addColorStop(.84, 'rgba(255, 98, 181, .94)')

        gradient.addColorStop(1, 'rgba(255, 199, 91, .08)')

        ctx.save()

        ctx.globalCompositeOperation = 'lighter'

        trace(points)

        ctx.lineTo(width, height)

        ctx.lineTo(0, height)

        ctx.closePath()

        ctx.globalAlpha = layer.alpha

        ctx.fillStyle = gradient

        ctx.fill()

        trace(points)

        ctx.globalAlpha = Math.min(1, layer.alpha + .34)

        ctx.strokeStyle = gradient

        ctx.lineWidth = layer.line

        ctx.shadowColor = layerIndex === 2 ? 'rgba(202, 108, 255, .78)' : 'rgba(72, 210, 255, .55)'

        ctx.shadowBlur = 12 + layerIndex * 5

        ctx.stroke()

        ctx.restore()

      })

      this.raf = window.requestAnimationFrame(function() {

        that.draw()

      })

    },

    start: function() {

      var that = this

      window.clearTimeout(this.stopTimer)

      this.stopTimer = null

      if(this.destroyed || this.motionReduced() || this.raf || !this.ensureCanvas())

        return

      this.raf = window.requestAnimationFrame(function() {

        that.draw()

      })

    },

    stop: function() {

      window.clearTimeout(this.stopTimer)

      this.stopTimer = null

      if(this.raf !== null) window.cancelAnimationFrame(this.raf)

      this.raf = null

      if(this.ctx && this.el)

        this.ctx.clearRect(0, 0, this.el.width, this.el.height)

      // Do not pause the audio, suspend its context or disconnect its analyser.

    },

    stopSoon: function() {

      var that = this

      window.clearTimeout(this.stopTimer)

      this.stopTimer = window.setTimeout(function() {

        that.stopTimer = null

        if(!that.destroyed && !that.motionReduced() && that.enabled && that.available && that.playing)

          return

        that.stop()

      }, 650)

    },

    destroy: function() {

      this.destroyed = true

      if(this.motionUnsubscribe) this.motionUnsubscribe()

      this.motionUnsubscribe = null

      this.stop()

      var waves = isToolPlayer && $('#waves')

      waves && waves.removeClass('visualizer-enabled visualizer-playing')

    }

  }

    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

    },

    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'

      })

    t.player.options.mode = store.get('_PlayerMode') || t.player.options.mode

    // 初始化button、controls以及click事件

    buttons.create()

    // 初始化audio or video

    source = t.createChild(t.player.options.type, events);

    // Web Audio may only analyse cross-origin media when anonymous CORS is set

    // before src. Current Meting audio redirects return ACAO for Origin requests.

    if(isToolPlayer && t.player.options.type === 'audio')

      source.crossOrigin = 'anonymous'

  init(config)

  visualizer.bindMotion()