music

Inspiration

The project was born from a simple desire: to eliminate the jarring interruptions in standard music apps and create a continuous, immersive experience.

The Healing Aesthetic: A dark-blue, cozy bedtime theme featuring a cute "Koala" mascot swaying gently to the rhythm.

Seamless Flow: Inspired by Apple's glassmorphism design, featuring smooth micro-interactions and an uninterrupted global audio player.

What it does

How we built it

1. The StackFrontend: Built with Taro + NutUI for cross-platform rendering. I implemented a global state machine to keep the audio stream completely seamless during page transitions.Backend: Powered by Spring Boot and MyBatis-Plus, using a single-table nested category model to handle complex music genres efficiently.DevOps: Fully containerized with Docker & Docker Compose, fronted by Nginx, and secured via Cloudflare Zero-Trust edge tunnels.2. Math Modeling: Audio-Visual SyncTo map the raw audio decibels ($dB$) to the visual scaling scale ($S$) of the swaying mascot, I used a logistic sigmoid function:$$S(dB) = S_{min} + \frac{S_{max} - S_{min}}{1 + e^{-\alpha (dB - dB_{threshold})}}$$This keeps the micro-interactions delicate in quiet segments and prevents visual clipping during loud beats. ## Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for music

Built With

• css3
• docker
• python
• taro