Resume context in Chrome >= 71

[thijstriemstra]

The following warning appears in Chrome >= 71 on wavesurfer-js.org:

webaudio.js:76 The AudioContext was not allowed to start.
It must be resumed (or created) after a user gesture on the page.

https://goo.gl/7K7WLu

[nsomaru]

Is there any solution or workaround to this? Works fine in Firefox but refuses to play in Chrome.

[thijstriemstra]

Yeah, see the link; https://goo.gl/7K7WLu Basically create an AudioContext on a user gesture, like button press, and pass that to wavesurfer using audioContext parameter.

[sundayz]

Any idea why Chrome emits this warning when creating the web audio audiocontext?

Wavesurfer isn't set to autoplay... there's no audio playing on my page at startup. It always waits for the user to click buttons. But now even if you try to call wavesurfer.play() after a button press it won't start anymore.

Is it enough to call .resume() on the audiocontext before wavesurfer.play()? Or do I have to re-create the AudioContext object?

To make matters worse, the warning doesn't show on localhost, but it shows on the live website.

[marizuccara]

Hi, I do this and I have not any warning on console.

[thijstriemstra]

@sundayz did you check https://goo.gl/7K7WLu?

[sundayz]

Thanks guys. Calling wavesurfer.backend.ac.resume() myself before wavesurfer.play() works. I'm not sure why it doesn't work without me doing it, since if I look at the code inside WebAudio.play(), WaveSurfer should be calling resume() for me.

[marizuccara]

Maybe is better to do it from the outside, because when the Promise from the resuming of the AudioContext is returned, you could want do do more stuffs, instead of only call play.

[sundayz]

https://github.com/katspaugh/wavesurfer.js/blob/master/src/webaudio.js#L684

It is resumed here but doesn’t seem to work 🤔 maybe because it’s inside a Promise...? It works when you resume it before calling play

[marizuccara]

It should play only when audioContext is resumed, that is, when the Promise returned from resume method is solved

[em-rad]

I've gotten the waveform to show and get rid of Chrome's (Version 84.0.4147.105) autoplay error when:

1. I have a button to handle wavesurfer.playPause()
2. The waveform div is position:relative

[X-Raym]

Same issue there. Can't this be fixed from wavesurfer.js side ?

[sundayz]

I think Chrome wants resume to be called directly in the click handler so it knows for sure the user is the one who started the audio, but play() is a Promise, so resume is not called inside the click handler. This is just a theory.

[X-Raym]

@katspaugh is this solved?

[katspaugh]

Reopened.

[gabrielboeker]

the script is not working for me either. while it is loading properly and inserting various elements in the DOM, the player does not show up and chrome states the things already mentioned here. None of the solutions mentioned here worked for me.

[entonbiba]

seems chrome is following ios safari method as well now,

[katspaugh]

Closing because in v7 there's no web audio backend.

[X-Raym]

@katspaugh webaudio backend was mostmy used to be able to not wait for full sound to be downloaded to press play in the middle of it (or start). Is this avlaible without it now ?

[katspaugh]

It downloads the complete audio file in both cases. One positive difference from v6 though is that the media element receives the same downloaded data as source, so the file is fetched only once. Please see #2762 for more details.

[X-Raym]

@katspaugh oh so it will be full HTML5 MediaElement... Interesting, I'll keep on eye on v7 official, especially cause it seems to fix old bugs like double downloads. Thx!

[X-Raym]

Hi, I still have the issue, in wavesurfer 7.0.6, at page init,

Here is a stripped down version on my init.js, https://gist.github.com/X-Raym/4ac1a331adf5ef3a126e0c3ea4bee240

I don't see what is wrong.

In Firefox also there is a console log message: in french:

Un AudioContext n’a pas pu démarrer automatiquement. Il doit être créé ou repris après un geste de l’utilisateur sur la page.

and in Brave (chrome):

wavesurfer_7.0.6.min.js The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu

How to fix this?

Thx!

PS: I'll open a new issue if requested

[X-Raym]

Note: brave traceroute goes up to this function in the minified version of wavesurfer 7.0.6

    "function" == typeof SuppressedError && SuppressedError;
    const e = {
        decode: function(e, i) {
            return t(this, void 0, void 0, (function*() {
                const t = new AudioContext({⚠
                    sampleRate: i
                })
                  , s = t.decodeAudioData(e);
                return s.finally((()=>t.close())),
                s
            }
            ))
        },

I have added warning sign at the error line

[katspaugh]

@X-Raym thanks, I'll open a new issue for this.

[thijstriemstra]

Closing because in v7 there's no web audio backend.

This has nothing to do with that.

is this solved?

No it's not.

thanks, I'll open a new issue for this.

Why is this ticket not sufficient?

[katspaugh]

@thijstriemstra thanks for your input. I’ve made a new issue to not disturb you with notifications on this one.