javascript - 使用 Howler.js 创建 JavaScript 波形可视化
问题描述
我正在尝试使用 howler.js生成波形( https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API )。我看到 dataArray 循环通过 draw 函数。然而它只画了一条直线,因为 v 变量总是返回 1。我基于一个非常常见的 MDN 示例的代码,这让我相信我获取咆哮数据的方式可能是不正确的。
HTML
<div id="play">play</div>
<canvas id="canvas"></canvas>
JS
let playing = false
const playBtn = document.getElementById('play')
const canvas = document.getElementById('canvas')
const canvasCtx = canvas.getContext('2d')
const WIDTH = canvas.width
const HEIGHT = canvas.height
let drawVisual = null
/*
files
https://s3-us-west-2.amazonaws.com/s.cdpn.io/481938/Find_My_Way_Home.mp3
*/
/*
streams
'http://rfcmedia.streamguys1.com/MusicPulse.mp3'
*/
let analyser = null
let bufferLength = null
let dataArray = null
const howler = new Howl({
html5: true,
format: ['mp3', 'aac'],
src:
'https://s3-us-west-2.amazonaws.com/s.cdpn.io/481938/Find_My_Way_Home.mp3',
onplay: () => {
analyser = Howler.ctx.createAnalyser()
Howler.masterGain.connect(analyser)
analyser.connect(Howler.ctx.destination)
analyser.fftSize = 2048
analyser.minDecibels = -90
analyser.maxDecibels = -10
analyser.smoothingTimeConstant = 0.85
bufferLength = analyser.frequencyBinCount
dataArray = new Uint8Array(bufferLength)
canvasCtx.clearRect(0, 0, WIDTH, HEIGHT)
const draw = () => {
drawVisual = requestAnimationFrame(draw)
analyser.getByteTimeDomainData(dataArray)
canvasCtx.fillStyle = '#000'
canvasCtx.fillRect(0, 0, WIDTH, HEIGHT)
canvasCtx.lineWidth = 2
canvasCtx.strokeStyle = 'limegreen'
canvasCtx.beginPath()
let sliceWidth = (WIDTH * 1.0) / bufferLength
let x = 0
for (let i = 0; i < bufferLength; i++) {
let v = dataArray[i] / 128.0
let y = (v * HEIGHT) / 2
if (i === 0) {
canvasCtx.moveTo(x, y)
} else {
canvasCtx.lineTo(x, y)
}
x += sliceWidth
}
canvasCtx.lineTo(canvas.width, canvas.height / 2)
canvasCtx.stroke()
}
draw()
}
})
playBtn.addEventListener('click', () => {
if (!playing) {
howler.play()
playing = true
}
})
解决方案
让它工作:
- 消除
html5: true
- 您的音频源存在 CORS 设置问题。您的存储桶 CORS 设置是什么?
Access to XMLHttpRequest at 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/481938/Find_My_Way_Home.mp3' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
CORS 问题导致您dataArray
充满 128 基本上意味着即使播放音乐也没有声音。
有了这个,我让你的可视化器工作了。(您可以在 chrome 上绕过 CORS "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security
)
推荐阅读
- algorithm - Root 方法在 Quick-Union 中如何工作?
- github - 我忘了'git push'
- arrays - 满 BUFFER 容量的循环队列
- c# - 显示 RabbitMQ 消息而不使用它们
- pgadmin-4 - 在mac上首次安装PG Admin 4错误
- python - Bert 使用 Transformer 的管道和 encode_plus 函数
- python - GroupBy 一个数据框记录并使用 PySpark 显示所有列
- amazon-web-services - 通过乘以 s3 Bucket 触发的 aws sqs 的策略是什么
- c++ - 在 Windows 上使用 C++ 访问最大输入延迟
- javascript - 单击后如何将链接添加到谷歌饼图切片并将该变量发送到新页面