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