javascript - Safari 网络音频可视化工具适用于 mp3 文件，但不适用于流

Question

我正在尝试流式传输音频并通过 Canvas 将其可视化，但是当我需要让它使用连续流时，它似乎只能使用静态文件(在本例中为 mp3)。

使用 getByteFrequencyData 时，bufferArray 看起来充满了 0，或者使用 getByteTimeDomainData 时，bufferArray 充满了 128。

重要说明

1. 音频源并非来自实际的 MP3 文件，而是定期更新的缓冲流，由于专有原因，我无法共享实际的 URL，但它看起来像这样，例如“http://somedomain/stream ” 。 MP3 格式实际上是在 header 中传递的。

2. 无法使用 fetch 或其他 XHR 请求，因为 URL 上线后需要可共享。

3. 无法更改 header 格式

请参阅以下代码片段。

示例文件静态 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()
    })
}

Answer 1

您可能想考虑使用Media Source Extensions ，它允许您在流式传输时读取和解码文件的 block 。 This MSE MP3 tutorial可能也有用。该教程引用了 XHR，但您也可以使用 fetch() 和 Streams API 来播放音频