@JulianKoehler
Posted
Wow this one is insane! I am really hyped about your animations and sound effects, did you use react-reveal for that? Did you manage to play an audio once the timer is expired on mobile browsers? Unfortunately I already heard that mobile browsers only support audio on user events so the soundeffect when the timer ran out won't play. Would you mind having a look around my code on this project? You seem to have experience.
Hey @JulianKoehler 👋🏻
Thanks a lot for the hype 🔥 I really appreciate it!
Unfortunately, there's no way to play any sound on mobile devices. I research the topic quite a lot, because I wanted to make this a progressive web app. The only solution, which I'm not sure if it works or not, is to use a complex sound API such as Howler.JS, where you have more options for customization. I was too lazy to do that, for such a small project 🙃
What comes to animations, I used framer-motion. It's a pretty cool and modern library for React animations.
Lastly, I took a look at your code, it looks good, though I have a couple of suggestions. If you're using a sound effect of any sort, you should also include a mute button for accessibility. Some users may not want to have a sound effect at all. What I liked in your project is that you included a prompt to confirm an action before switching to the next timer. Also, you used localStorage to save the user's setting, which is pretty cool. Other than that, it looked great, nice work 👨🏻💻 Cheers 👾
@JulianKoehler
Posted
@kens-visuals Thanks man! Really appreciate your comment and your suggestions.
Framer Motions looks awesome, will definitely check this one out and include it in one of my future projects!
Funny enough, I could find a solution on stack overflow for audio support on mobile browsers. Though it's a bit "hacky". You use the play() method once, then right after the pause() method and THEN you set a timeout with the play() method again and with that I am having the alarm sound on mobile browsers. Not sure if this will work forever but at least for now it did its job =)
Cheers 👾
