My Lofi - Hi-Res Music Platform

A high-quality lofi and EDM music platform designed for coding and productivity, similar to FreeCodeCamp Radio but optimized for local use with better audio quality.

Features

• High-Quality Audio: Optimized for hi-res music playback
• Simple Controls: Play, pause, next, previous, shuffle
• Music History: Track recently played songs
• Clean UI: Minimalist design focused on the music experience
• Responsive Design: Works on desktop and mobile devices
• Local Storage: Saves your listening history

Getting Started

1. Open index.html in your web browser
2. Click the play button to start listening
3. Use the controls to navigate through the playlist
4. Your listening history will be automatically saved

Controls

• Play/Pause: Toggle music playback
• Previous: Go to previous track (or restart current if >3 seconds played)
• Next: Skip to next track
• Shuffle: Enable/disable random track selection
• Volume: Adjust playback volume
• Progress Bar: Click to seek to specific time
• Playlist: Click any track to play immediately

Customization

Streaming Sources

The platform automatically connects to various free streaming radio stations:

• LoFi Hip Hop Radio: ChilledCow style 24/7 lofi beats
• Chillhop Radio: Continuous chill hop and study music
• Focus Music Radio: Ambient and concentration music
• Deep Focus: Brain.fm style focus-enhancing audio
• Coding Radio: Electronic beats perfect for programming
• Synthwave Radio: Retro electronic and synthwave

Adding Your Own Streaming Sources

To add more radio stations, update the streamingSources array in script.js:

this.streamingSources = [
    {
        title: "Your Radio Station",
        artist: "Station Description",
        src: "https://stream-url.com/stream.mp3",
        type: "stream",
        genre: "Genre Name"
    },
    // Add more streams...
];

Supported Audio Formats

• MP3 (recommended for compatibility)
• WAV (for highest quality)
• FLAC (for lossless quality)
• OGG

Technical Details

• Frontend: Vanilla HTML5, CSS3, JavaScript
• Audio: HTML5 Audio API
• Storage: localStorage for history
• Responsive: CSS Grid and Flexbox

File Structure

My_Lofi/
├── index.html          # Main HTML structure
├── styles.css          # Styling and layout
├── script.js           # Audio player functionality
├── README.md           # This file
└── music/              # Your audio files (create this folder)

Browser Compatibility

• Chrome 60+
• Firefox 55+
• Safari 11+
• Edge 79+

License

Free to use and modify for personal projects.