-
Stand-alone version: https://neumorphic-music-player.netlify.app/
-
Initial codepen version: https://codepen.io/smoothdev35/pen/WNvqjpL
I do not own any rights to the music used in this demo.
This is a stand-alone integration with html, scss and 100% vanilla javascript of a popular design by Filip Legierski. I tried to reproduce the refined neumorphic styles as faithfully as possible, down to the button interactions.
As for functionality, I wanted to be able to use the slider to change the song position in time and reflect both text outputs and audio object changes in real-time. And since the design comes with two directly related screens, I wanted the change in one screen to reflect on the other (no matter which first received the interaction).
Compared to the codepen version, the code you see in the repo comes with a few improvements to make the whole thing steadily responsive and more accurate in reflecting quick song navigation on ui indicators.
Except for the music, feel free to use the code as you please!