Music Button on bottom right corner below social icons in Section 1

[virajchandra51]

• Design a small music icon below social icons in section 1 of the website. (Welcome to Codutsava Section).
• Link this button with a simple On/Off symbol, and use colors imported from theme. (index.css)
• Link this button to an eerie halloween spooky music of 6-8 seconds playing in loop. Save this music in assets.
• Initially the music is ON.
• When the user clicks the button, the music stops and vice versa.
• Design according to your imagination. Use Codepen or any other resource for better understanding of state.
• Submit SS/Video of the component in working condition.
• Use good naming convention for CSS classes.
• Avoid usage of any external library, except if some is being used to play the music.

[rishabhpathak359]

I want to work on this issue.

[virajchandra51]

https://www.youtube.com/watch?v=fnNJxufg1f4

@rishabhpathak359

Try to see if you can use this. Clip it to only 10-15 sec. The music should not be larger than 1MB in size. Use this or anything like this, don't go for too spooky or horror.

[rishabhpathak359]

i have a doubt, u have mentioned that music is initially ON but as far as i know it is not possible to autoplay an audio intill and unless user interacts with DOM right?

[virajchandra51]

you can create an useEffect call to turn the state of music play button to ON initially.

[rishabhpathak359]

@virajchandra51 sir did that but to play an audio as the component mounts user's interaction with the DOM is necessary even if the state is initially On the audio is not playing initially automatically,browser blocks it.

[virajchandra51]

Okay, I think the policies for auto play have been changed. Let it be OFF initially, we will connect the state to the preloader of the website with some ENTER button like Codeutsava6.0 , so that music starts playing. Till then, we can just go with initial OFF state.

[virajchandra51]

See if you can change the state of the music with a simple mouse movement check. The user is 99% bound to scroll or maybe change his mouse position by some points, maybe we can bind it to that.

[rishabhpathak359]

@virajchandra51 yes that can work but again only if user has tapped somewhere on screen no matter where and then scroll then state of music can be changed (again that DOM interaction thing)

[virajchandra51]

even if the user has not tapped, maybe we can listen to mouseMove, and bind it to that.

[virajchandra51]

Open a PR, I'll see what we can do.