如何使用音频文件设置可视化工具？

问题描述

我按照教程使用麦克风中的音频设置了可视化工具。我想让它改为您可以使用音频文件中的音频。我已经尝试了几种方法，但都失败了。我不确定为什么它不起作用。

HTML 文件

  <canvas id="visualizer"></canvas>
  <script src="practice.js"></script>

JS文件

const visualizer = document.getElementById('visualizer')

const context = new AudioContext()
const analyserNode = new AnalyserNode(context,{ fftSize: 256 })

setupContext()
drawVisualizer()

async function setupContext() {
    const audio = await getAudio()
    if (context.state === 'suspended') {
    await context.resume()
    }
    const source = context.createmediastreamsource(audio)
    source
    .connect(analyserNode)
    .connect(context.destination)
}

function getAudio() {
    // this my way
    const audio = new Audio("funky.mp3")
    return audio

    // this the original 
    // return navigator.mediaDevices.getUserMedia({
    //     audio: true
    // })
}

function drawVisualizer() {
    requestAnimationFrame(drawVisualizer)

    const bufferLength = analyserNode.frequencyBinCount
    const dataArray = new Uint8Array(bufferLength)
    analyserNode.getByteFrequencyData(dataArray)
    const width = visualizer.width
    const height = visualizer.height
    const barWidth = width / bufferLength

    const canvasContext = visualizer.getContext('2d')
    canvasContext.clearRect(0,width,height)

    dataArray.forEach((item,index) => {
    const y = item / 255 * height / 2
    const x = barWidth * index

    canvasContext.fillStyle = `hsl(${y / height * 400},100%,50%)`
    canvasContext.fillRect(x,height - y,barWidth,y)
    })
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）