Bug 212125

You can test this behavior at the following website: www.waveplayer.info
This seems to happen in every version of Safari, in both mobile and desktop environments, while it works just fine in any other browser, including Chrome in both mobile and desktop devices.

How to reproduce the issue:
– when pressing play, the player starts playing back and the waveform animation works as expected
– when pressing pause and then play again, the waveform animation restarts as expected but the audio is muted and there is no way to get it back until reloading the page

There are no errors reported in the browser console.

None of the following actions solves the issue:
– setting the audio element volume;
– setting the GainNode level;
– resuming the AudioContext

The only possible solution I could find was avoiding to disconnect the ScriptProcessorNode.
This solution might degrade the user performance since it would keep the onAudioProcess callback running, even when the audio element is not playing.

The following class will give you a rough idea of how my audio player works. Please note that the player is much more complex than this, but this is the main workflow and it works perfectly fine in every browser except Safari.
Please also note that this problem is not related to bug#211394 because it only happens in Safari (211394 occurs in every browser under iOS13) but in every environment (any version of Safari in both mobile and desktop environments).

class MyAudioPlayer {

    constructor() {
        this.audio = new Audio()
        this.audioCtx = new (window.AudioContext || window.webkitAudioContext)()

        this.source = this.audioCtx.createMediaElementSource(this.audio)
        this.source.connect(this.gain)
        this.gain.connect(this.audioCtx.destination)

        this.scriptProcessor = this.audioCtx.createScriptProcessor(2048, 1, 1)
        this.scriptProcessor.onaudioprocess = this.onAudioProcess.bind(this)
    }

    onAudioProcess() {
        // a function using the getByteFrequencyData function of the analyser
        // to analyze the audio streaming from the source
    }

    createAnalyser() {
        this.analyser = this.audioCtx.createAnalyser()
        this.source.connect(this.analyser)
        this.analyser.connect(this.scriptNode)
    }

    destroyAnalyser() {
        this.analyser = this.audioCtx.createAnalyser()
        this.source.connect(this.analyser)
        this.analyser.connect(this.scriptNode)
    }

    play() {
        this.audio.play()
        this.source.connect(this.scriptNode)
        this.scriptProcessor.connect( this.audioCtx.destination )
        this.createAnalyser()
    }

    pause() {
        this.audio.pause()
        this.source.disconnect(this.scriptNode)
        this.scriptProcessor.disconnect( this.audioCtx.destination )
        this.destroyAnalyser()
    }
}