如何解决如何使用音频文件设置可视化工具?
我按照教程使用麦克风中的音频设置了可视化工具。我想让它改为您可以使用音频文件中的音频。我已经尝试了几种方法,但都失败了。我不确定为什么它不起作用。
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 举报,一经查实,本站将立刻删除。