原生js實現(xiàn)鼠標滑過播放音符方法詳解

更新時間：2023年08月02日 09:05:35 作者：若海

本文使用原生js的AudioContext接口實現(xiàn)一個劃過菜單播放天空之城的鼠標特效,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

概念說明

AudioContext接口表示由鏈接在一起的音頻模塊構(gòu)建的音頻處理圖，每個模塊由一個AudioNode表示。音頻上下文控制它包含的節(jié)點的創(chuàng)建和音頻處理或解碼的執(zhí)行。簡單地說，AudioContext創(chuàng)建了一條無限長的時間軸，時間軸上分布著聲音信息（可以理解為頻譜），并且不可以停止。我們可以通過時間點改編這些信息，從而控制頻率、音色等等。
按照第一國際音高，從低8dao，到高8dao的頻率約等于（加粗標出了基準點）[130,147,165,175,196,220,246,262,294,330,349,392,440,494,523,587,659,698,784,880,988,1047]

使用方法

復制下方代碼到自己的js文件，修改target為對應的元素選擇器即可。

(function (AudioContext) {
    if (!AudioContext) {
        return
    }
    var target = '.menu li' // 設置觸發(fā)音樂的元素選擇器
    var notes = '? ? ? ? ? ‖ ? ? § ∮'.split(' ')
    var sheet = '880 987 1046 987 1046 1318 987 659 659 880 784 880 1046 784 659 659 698 659 698 1046 659 1046 1046 1046 987 698 698 987 987 880 987 1046 987 1046 1318 987 659 659 880 784 880 1046 784 659 698 1046 987 1046 1174 1174 1174 1046 1046 880 987 784 880 1046 1174 1318 1174 1318 1567 1046 987 1046 1318 1318 1174 784 784 880 1046 987 1174 1046 784 784 1396 1318 1174 659 1318 1046 1318 1760 1567 1567 1318 1174 1046 1046 1174 1046 1174 1567 1318 1318 1760 1567 1318 1174 1046 1046 1174 1046 1174 987 880 880 987 880'.split(' ')
    var ctx, dom, i = 0, play = function (ev) {
        if (dom) {
            return
        }
        // 播放音節(jié)
        sheet[i] || (i = 0)
        ctx || (ctx = new AudioContext())
        var c = ctx.createOscillator(),
            l = ctx.createGain(),
            m = ctx.createGain()
        c.connect(l)
        l.connect(m)
        m.connect(ctx.destination)
        m.gain.setValueAtTime(1, ctx.currentTime)
        c.type = 'sine'
        c.frequency.value = sheet[i++]
        l.gain.setValueAtTime(0, ctx.currentTime)
        l.gain.linearRampToValueAtTime(1, ctx.currentTime + 0.01)
        c.start(ctx.currentTime)
        l.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 1)
        c.stop(ctx.currentTime + 1)
        // 顯示音符
        var x = ev.pageX,
            y = ev.pageY - 5,
            d = Math.round(7 * Math.random())
        dom = document.createElement('b')
        dom.textContent = notes[d]
        dom.style.zIndex = '99999'
        dom.style.top = y - 100 + 'px'
        dom.style.left = x + 'px'
        dom.style.position = 'absolute'
        dom.style.color = '#FF6EB4'
        document.body.appendChild(dom)
        dom.animate([{ top: y + 'px' }, { opacity: 0 }], { duration: 500 })
        setTimeout(() => {
            dom.remove(), dom = null
        }, 500)
        // 阻止冒泡
        ev.stopPropagation()
    }
    document.querySelectorAll(target).forEach(function (el) {
        el.addEventListener('mouseenter', play)
    })
})(window.AudioContext || window.webkitAudioContext)