DOMException: play() failed because the user didn't interact with the document first

JavaScript
1

I have to play beep sound on response. I have written code for this but it is not working when I manually refresh the browser page. It is showing error “DOMException: play() failed because the user didn’t interact with the document first”.

I’m calling $scope.sound function on ng-init on a template. It works in another browser like IE, Microsoft EDGE, etc. but not work on Google Chrome. Anybody from the community, please help me with this issue.

    $scope.sound = function () {
        if ($scope.totalQueueList) {
            var audio = new Audio();
            audio.src = 'rest/assets/images/beep.mp3';
            // when the sound has been loaded, execute your code
            audio.oncanplaythrough = (event) => {
                var playedPromise = audio.play();
                if (playedPromise) {
                    playedPromise.catch((e) => {
                        console.log(e)
                        if (e.name === 'NotAllowedError' || e.name === 'NotSupportedError') {
                            console.log(e.name);
                        }
                    }).then(() => {

                    });
                }
            }
        }
    }
2

later versions of chrome have disabled autoplay. You can see more here:

4

You are going to have to give us more information on exactly what you are trying to do. For example, a link to your code or at least post the relevant code section here (and be sure to put 3 backticks before and after the code so it formats properly here).