Sound API Lab

A modern, neumorphic audio player web app with a custom vinyl-inspired interface, built using HTML, CSS, and JavaScript.

Features

• Custom-designed audio player card with neumorphic effects
• Animated spinning vinyl with visible grooves
• Prominent, vibrant gradient title
• Responsive layout for desktop and mobile
• Play, pause, and seek controls
• Volume and speed adjustment
• Keyboard shortcuts for playback
• Accessible and visually polished UI

Screenshots

Getting Started

1. Clone or Download this repository.
2. Open index.html in your web browser.
3. Place your audio files in the audio/ folder and update the playlist in script.js if needed.

File Structure

• index.html – Main HTML structure for the player
• style.css – All visual styles, including neumorphism and gradients
• script.js – Audio player logic and interactivity
• audio/ – Folder for audio tracks
• icons/ – SVG or PNG icons used in the UI

Design Notes

• Uses CSS custom properties for easy color and theme adjustments
• Neumorphic card and button effects for a soft, modern look
• Vinyl disc features animated grooves and a dynamic spinning effect
• Title uses a bold blue gradient for visual impact

Keyboard Shortcuts

• Space: Play/Pause
• Left/Right Arrow: Seek backward/forward
• Up/Down Arrow: Volume up/down

Customisation

• To change the colour theme, edit the CSS variables in style.css
• To add or remove tracks, update the playlist array in script.js

License

This project is for educational and personal use. Feel free to modify and adapt it for your needs.