Rakesh9100 / Click-The-Edible-Game

A well-designed interesting game made using HTML, CSS, and JS where you can play with your favourite edible and click it to get the most scores.

https://click-the-edible-game.netlify.app

Apache License 2.0

32 stars 69 forks source link

[Bug] Autoplay Issue with Background Music in JavaScript #205

Closed Tholkappiar closed 9 months ago

Tholkappiar commented 9 months ago

Description

Autoplay Issue with Background Music in JavaScript

Problem Description

When attempting to manage background music for a game using JavaScript, an issue arises related to the autoplay policy in browsers. The error message is:

Steps to Reproduce

visit the website
Got to console , which also reduces the performance significantly .

Kindly Assign this issue to me, Thank you.

Screenshots

Screenshot from 2024-01-15 00-52-28

Checklist

[X] I have checked the existing issues.
[X] I follow Contributing Guidelines of this project.
[X] I am a IWOC'24 contributor.
[ ] I am a JWOC'24 contributor.
[ ] I am a SWOC'24 contributor.

Code of Conduct

[X] I agree to follow this project's "Code of Conduct".

Rakesh9100 commented 9 months ago

Go ahead @Tholkappiar

Tholkappiar commented 9 months ago

Due to the browser policy the error is occurring , the user have to perform some events like onclick to eradicate this error ! so I propose the implementation of popup at the very start of the page , to enable or disable the sound for the game , this also gives the user control over the game at the beginning , any other ideas or proposes , feel free to ask . Thank you !

Rakesh9100 commented 9 months ago

Can you implement the logic as to autoplay the sound when the website shows up, I know the browser handling error is occurring but still is there a way or logic @Tholkappiar

Tholkappiar commented 9 months ago

Hello Maintainer ,

After long research , there is no way to manipulate the browser policies logically or legally !

Modern browsers restrict autoplay of audio without user interaction.
While the Web Audio API provides powerful audio manipulation, it does not bypass autoplay restrictions for regular audio elements.

Solutions :

Consider a user-initiated action, like clicking a button, to trigger audio playback.

If all considerable , Kindly Assign this issue to me ! Thank you.

Rakesh9100 commented 9 months ago

I don't think we need any extra button as on one click sound is turning on @Tholkappiar

Tholkappiar commented 9 months ago

So any other ideas or suggestions , or leave the errors to occur in the back !?

Rakesh9100 commented 9 months ago

Can you specify what exactly the errors are occurring in the backend @Tholkappiar

Tholkappiar commented 9 months ago

The error is occuring because of the browser policy which blocks the sounds which are automatically played when opening the website to ensure to avoid unexpected high sounds ! So , the sound can be enabled after the user interaction until , there will no sounds ! And also mousemove events don't work here . Consider a user-initiated action, like clicking a button, to trigger audio playback.Thank you. @Rakesh9100

Rakesh9100 commented 9 months ago

Okay go ahead @Tholkappiar