An html file with which you can open a modern graphic of a radio "device" with online stations.
You don't need to install anything on your device, phone or PC. Just two clicks for PC and one click for phone on the file and the radio starts.
Languages Used: HTML5, CSS3, JavaScript (with Web Audio API)
This web application provides an interactive platform for listening to online radio stations directly from your browser — no external apps needed. The interface is modern, fluid, and includes dynamic visual effects and a real-time audio visualizer.
- Animated background – a moving gradient creates an energetic, modern atmosphere.
- Clean, responsive design – all elements are centered and styled with shadows, rounded corners, and transparency.
- CSS animations – the title performs a 3D “coin flip” rotation, and the station name fades in smoothly when changed.
- Interactive buttons – each button reacts visually on hover and click with light and depth effects.
- Quick station switching: The “⏮ Previous Radio” and “Next Radio ⏭” buttons let users browse through available stations easily.
- Playback control: Users can seek backward or forward by 10 seconds.
- Dynamic station list: The list of stations is generated automatically, and users can switch stations with a single click.
- Current station display: The app updates the station name in real time and highlights the active one in the list.
Using the Web Audio API, the app draws an audio waveform visualizer (oscilloscope) on a <canvas> element that moves with the music in real time.
This transforms the listening experience into something both visual and interactive, similar to what professional music players offer.
- HTML5 – for structure and the
<audio>playback element - CSS3 – for styling, gradients, and animations
- JavaScript (ES6) – for logic, station management, and audio processing
- Web Audio API – for waveform visualization and live rendering
The app includes a curated selection of popular Romanian and international radio stations, such as:
- Pro FM
- Digi FM
- Radio Paradise
- SomaFM (various channels)
- Radio Hot
- Radio Intens (traditional music)
- GitHub integration – a direct, elegant link to the author’s GitHub profile.
- Subtle hover effects – for icons and links to create smooth user feedback.
- Browser-friendly audio context handling – ensures playback works properly even with modern browser security policies that restrict autoplay.
The goal of this project is to demonstrate how modern web technologies — design, animation, and interactivity — can work together to create a fully functional, elegant, and user-friendly multimedia experience. It serves as both an educational and practical example of how to combine HTML, CSS, and JavaScript for real-world applications.
The “Online Radio Player” project is a great example of creative front-end development. It merges modern aesthetics, smooth interactivity, and audio technology into a single, enjoyable user experience — all within one HTML file.
!!! Some streaming radio stations may be inaccessible after a period of time due to the authors giving up the station or changing the address/access path. !!!
What is the idea with this HTML? I'll tell you... The problem is that most phones have wired headphones that require the antenna through the headphone wire..! Now, with this HTML there is NO need for these wired headphones for the antenna. Now if you look at the phones, there is no more radio! Look! It is NO MORE!!!
Author: Sorinesu Adrian