How I build lofi.radio with only CloudFlare

Geert Jan Sloos 🌎 — Fri, 07 Jul 2023 03:42:34 +0000

How It Started

The idea came from current lo-fi websites (and my love for lo-fi music) but most websites were complex or rely on Youtube for their music. Additionally, some had no remarkable domain names. lofi.radio stands out for its simplicity and clean page.

Using only CloudFlare for hosting
The biggest challenge I gave myself was to make it without hosting (php/mysql), I ended up with CloudFlare Pages & Cloudflare Worker (serverless) and also CloudFlare DNS/Caching + Email Routing.

In daily life I am not a developer, so I had a little help from ChatGPT also used MidJourney to create the logo/icon.

Music Player

The Music Player I build with https://howlerjs.com/ because it has many features and it quitte simple to work with it (and even Google and Disney using it.)

Show the current song

I added a simple function to showcase the current song effortlessly, while also removing any spaces to ensure it is consistently displayed in a clear and easily readable manner.

function updateSongInfo() {
  var currentSong = playlist[currentTrack];
  var songTitle = currentSong.substring(currentSong.lastIndexOf('/') + 1, currentSong.lastIndexOf('.'));
  songTitle = decodeURIComponent(songTitle.replace(/\+/g, ' '));
  document.getElementById('song-button').innerText = songTitle;
}

// Update the time and song info every second
setInterval(function() {
  updateTime();
  updateSongInfo();
}, 1000);

Show the current time

To prevent losing track of time while being occupied, I have implemented a function that automatically refreshes the local time every minute. This way, you can stay updated with the current time without any interruptions, ensuring you stay on schedule and manage your tasks effectively.

function formatTime(date) {
  var hours = date.getHours();
  var minutes = date.getMinutes();
  return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0');
}

function updateTime() {
  var currentTime = new Date();
  document.getElementById('time-button').innerText = formatTime(currentTime);
}

Show Listeners with CloudFlare Analytics

The most challenging aspect was demonstrating how many people are tuning in to lofi.radio. I began researching solutions, but using Google Analytics, No-code, and Javascript wasn't an option.

Eventually, I choose to use the CloudFlare API to gather Web Analytics data and display it using Javascript. To accomplish this, I set up a CloudFlare Worker and used GraphQL to retrieve the data:

const query =
    query {
      viewer {
        zones(filter: { zoneTag: "xxxx" }) {
          httpRequests1dGroups(filter: { date: "${today}" }, limit: 1) {
            uniq {
              uniques

Music

Most important is of course the music, I download the tracks from https://pixabay.com/en/music/ and then upload it on DigitalOcean Spaces (S3) I could have used CloudFlare for this, but since I have a lot of data transfer at DigitalOcean, streaming it there makes more sense.

Final Words

I hope you like my post and lofi.music I still thinking to add more features like Notes, Timer, Pomodoro and Scenes, but for now I get some rest 🤗

Do not forget to check out https://lofi.radio 👀

DEV Community: Geert Jan Sloos 🌎