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

Question

I am trying to stream audio and visualize it via canvas, however it appears to only work with a static file (mp3 in this case) when I need to get it to work with a continuous stream.

It looks as the bufferArray is full of zeros using getByteFrequencyData, or 128 using getByteTimeDomainData.

Important Notes

1. It is not an actual MP3 file the audio source is coming from but a buffer stream that is updated periodically, for proprietary reasons I can not share the actual URL, but it would look like this for example " http://somedomain/stream ". The format MP3 is actually delivered in the headers.

2. Cannot use fetch or other XHR request as the URL needs to be sharable when it goes live.

3. Cannot change header format

Please see the following code snippets.

Example files static mp3 file: https://s3-us-west-2.amazonaws.com/s.cdpn.io/481938/Find_My_Way_Home.mp3 stream endpoint: 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

You may want to look into using Media Source Extensions , which allows you to read and decode chunks of the file while it streams. This MSE MP3 tutorial may be useful too. That tutorial references XHR, but you could also use fetch() with the streams API to play the audio