原生js實(shí)現(xiàn)鼠標(biāo)滑過(guò)播放音符方法詳解

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

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

概念說(shuō)明

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

使用方法

復(fù)制下方代碼到自己的js文件，修改target為對(duì)應(yīng)的元素選擇器即可。

(function (AudioContext) {
    if (!AudioContext) {
        return
    }
    var target = '.menu li' // 設(shè)置觸發(fā)音樂(lè)的元素選擇器
    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)