Я пытаюсь транслировать аудио и визуализировать его с помощью canvas, однако, похоже, он работает только с файлом stati c (в данном случае mp3), когда мне нужно заставить его работать с непрерывным потоком.
Похоже, что bufferArray заполнен нулями, используя getByteFrequencyData, или 128, используя getByteTimeDomainData.
Важные замечания
Это это не реальный MP3-файл, из которого исходит источник звука, а буферный поток, который периодически обновляется, по частным причинам я не могу поделиться фактическим URL-адресом, но он будет выглядеть, например, следующим образом "http://somedomain/stream ». Формат MP3 фактически доставляется в заголовках.
Невозможно использовать выборку или другой XHR-запрос, так как URL-адрес должен быть доступным для совместного использования при запуске.
Невозможно изменить формат заголовка
См. Следующие фрагменты кода.
Файлы примеров stati c mp3-файл: https://s3-us-west-2.amazonaws.com/s.cdpn.io/481938/Find_My_Way_Home.mp3 конечная точка потока: http://rfcmedia.streamguys1.com/MusicPulse.mp3
HTML
<button id="btn">Start</button>
<canvas id="canvas" style="background:black;width:512px;height:255px;"></canvas>
JS
window.onload = () => {
document.getElementById('btn').addEventListener('click', () => {
const audio = new Audio()
audio.autoplay = false
audio.crossOrigin = 'anonymous'
audio.src = 'http://rfcmedia.streamguys1.com/MusicPulse.mp3'
const player = document.getElementById('audio_player')
const canvas = document.getElementById('canvas')
const canvasCtx = canvas.getContext('2d')
const audioContext = new (window.AudioContext ||
window.webkitAudioContext)()
const analyser = audioContext.createAnalyser()
analyser.connect(audioContext.destination)
const audioSourceNode = audioContext.createMediaElementSource(audio)
audioSourceNode.connect(analyser)
const data = new Uint8Array(analyser.frequencyBinCount)
const render = () => {
analyser.getByteFrequencyData(data)
canvasCtx.clearRect(0, 0, canvas.width, canvas.height)
const center = canvas.height / 2
let diff = 10
let shape = {
x: diff,
y1: center,
y2: center
}
for (let i = 0; i < data.length; i++) {
let height = data[i] / 2
if (height) {
shape.y1 = center - height
shape.y2 = center + height
const { x, y1, y2 } = shape
const lingrad = canvasCtx.createLinearGradient(0, 0, 0, 180)
lingrad.addColorStop(0, '#5d8db6')
lingrad.addColorStop(0.515, '#5d8db6')
lingrad.addColorStop(0.52, '#fff')
lingrad.addColorStop(0.53, '#fff')
lingrad.addColorStop(0.535, 'rgba(93, 141, 182, 0.6)')
lingrad.addColorStop(1, 'rgba(93, 141, 182, 0.6)')
canvasCtx.beginPath()
canvasCtx.moveTo(x, y1)
canvasCtx.quadraticCurveTo(x - diff, center, x, y2)
canvasCtx.moveTo(x, y1)
canvasCtx.quadraticCurveTo(x + diff, center, x, y2)
canvasCtx.closePath()
canvasCtx.fillStyle = lingrad
canvasCtx.fill()
shape.x = x + 8
}
}
requestAnimationFrame(render)
}
requestAnimationFrame(render)
audio.play()
})
}