5

I have a code that plays audio files which downloads from S3. On the page user sees carousel with picture and word that he should pronounce and hear a audio with correct pronounciation. The problem is in Safari, it block auto-play of audio file on window load. I know that Safari block auto play by default and in setting Auto-Play: Stop Media with Sound is enabled. When I go to the page, Safari block autoplay of audio file and page stop to load and 'freez' and AudioContext state is 'suspended' if to call resume() on any user action click on document for example, state changes to 'running', but if i click next slide, the next function will call source.stop() to stop audio playing if audio was playing, the source is a bufferSource(AudioContext.createBufferSource()) and it throw error 'InvalidStateError' screenshot with error

Why this error occurred ? If state is in 'running' not 'suspended'. Also in coursel exist 3 button to play audio again, record audio and play recorded audio and after resume all work, but when the stop function called the error shown.

3 Answers 3

7

If you see "InvalidStateError: The object is in an invalid state in Safari (or in other browsers with a different message) when working with AudioBufferSourceNodes it is likely because you called stop() or start() on a node that has finished playing.

Quote from MDN:

An AudioBufferSourceNode can only be played once; after each call to start(), you have to create a new node if you want to play the same sound again. Fortunately, these nodes are very inexpensive to create, and the actual AudioBuffers can be reused for multiple plays of the sound. Indeed, you can use these nodes in a "fire and forget" manner: create the node, call start() to begin playing the sound, and don't even bother to hold a reference to it. It will automatically be garbage-collected at an appropriate time, which won't be until sometime after the sound has finished playing.

2

Safari will throw that error for multiple reasons including the following:

  • Calling stop() on an item that hasn't started playing yet. This may be your issue.
  • Telling it to stop at an invalid time, like stop(0) instead of stop(ctx.currentTime).
1

I'm seeing this error occur in another odd case. We have a test framework that tests our web pages by loading them quickly, one after the other. Each page dynamically loads its resources (images, sounds, etc), and reports back to the framework when all resources have completed loading. We concurrently load up to 10 resources at one time. For audio files, not only does it retrieve the file, but it creates and initializes the audio object so it is ready for playback. Some of these pages contain the same audio files.

It seems that, even after navigating to another page, cached audio files can be in some state that if another page initializes that audio file too soon, it will throw this error. So it appears that not only are audio files cached by the browser, but somehow the object or state is also cached / reused or the file is locked in some way while the previous page's instance is released.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.