Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 

Repository files navigation

Mixy.ca — Search. Press Play. Free Music.

Mixy

Search. Press Play. Free Music.

Search SoundCloud playlists and tracks, browse community Top-50,
open the tracklist, and press play — on any device. 100% free forever.

Live site Mixy Radio Privacy Buy Me a Coffee

→ Open Mixy · → Switch to radio


What is Mixy?

Mixy is a minimal online music player. No accounts. No clutter. Open the site, search or pick from Top-50, press play, listen.

Default station: Deep House — DJ Denis Lop on SoundCloud.

Mixy does not host audio files. Playback uses the official SoundCloud Widget. Mixy is not an official SoundCloud product.


Features

Search — Playlist

Tap the Mixy title (search) → Playlist. Type at least 2 characters, hit Search, and tap a result. That SoundCloud playlist loads in the player right away. Recent searches are remembered in your browser only.

Search — Track

Same search panel → Track. Find individual SoundCloud tracks (full tracks, not short previews). Tap a result to play it in Mixy.

Top-50 (community favorites)

Same search panel → Top-50. A live ranking of playlists and tracks that listeners mark with the heart (Favorite) button.

  • Playing a playlist and tapping ♥ → the whole playlist goes into Top-50
  • Playing a single track (from Track search) and tapping ♥ → that track goes into Top-50
  • Ranked by votes (one vote per visitor per item)
  • Filter by name or artist, tap a row, and it plays

No Google Sheet — Top-50 is stored on the Mixy server (MySQL) and updates automatically when people favorite.

Favorite (heart)

On the player controls (right of Next): tap the heart to add the current playlist or track to Top-50. The heart fills when your vote is recorded.

Tracklist

Hamburger / list control opens the full tracklist for the loaded playlist. Jump to any track, see preview-only labels when SoundCloud only allows a snippet.

Switch to radio

In the search panel, Switch to radio opens radio.mixy.ca — Mixy’s live radio sister site.

Listening stats

Public counters on the site footer and at mixy.ca/stats — minutes listened, visits, countries, platforms, referrers (first-party, no third-party analytics SaaS for the public board).


How to use the player

Control What it does
Play / Pause Start or pause the current track
Previous / Next Jump to the previous or next track in the playlist
♥ Favorite Add current playlist (or single track) to community Top-50
Tracklist Open the playlist track list and jump to a track
Progress bar Seek within the current track
Mixy (title) Opens search — Playlist, Track, or Top-50
Switch to radio Opens radio.mixy.ca
Status line Shows Loading, Ready, Playing, Paused, or Error

If something goes wrong

  • Playlist unavailable — use Try again, or Open on SoundCloud to listen on SoundCloud directly.
  • Playlist / Track search needs at least 2 characters. Recent searches are remembered in your browser only.

Tips

  • Browsers block autoplay with sound — you start playback with Play.
  • Works on phone and desktop; no app install required.

How it works

┌─────────────────────────────────────┐
│  mixy.ca — custom player UI         │
│  cover, title, controls, search, ♥  │
└───────────────┬─────────────────────┘
                │
                ▼
┌─────────────────────────────────────┐
│  SoundCloud Widget (hidden iframe)  │
│  Official play / pause / seek API   │
└───────────────┬─────────────────────┘
                │
                ▼
┌─────────────────────────────────────┐
│  SoundCloud CDN — actual audio      │
└─────────────────────────────────────┘

Search / Top-50 / Favorite:
  Playlist / Track → /api/search     → SoundCloud API
  Top-50           → /api/djs        → MySQL Top-50 by votes
  Favorite (♥)     → /api/favorite   → upsert + vote → Top-50
  1. The page shows a custom UI (brand, artwork, transport, favorite, search).
  2. A SoundCloud Widget iframe loads the playlist (or track) and streams audio.
  3. The UI talks to the Widget API (ready, play, pause, progress, next, prev).
  4. Playlist and track search go through a small server API so SoundCloud credentials stay on the server.
  5. Favorite writes to MySQL; Top-50 reads the same tables, ordered by votes (limit 50).

Project structure (overview)

This GitHub repo is a public showcase (docs only). The live product is at mixy.ca.

Piece Role
Static frontend Next.js app exported to static files (out/), hosted on the web root
Player UI Custom React interface over the SoundCloud Widget
Default playlist Configured SoundCloud set URL (Deep House — DJ Denis Lop)
Search API Node.js app (/api/search, /api/djs, /api/favorite, /api/track-access, …)
Top-50 Community favorites in MySQL — heart button → automatic ranking
Radio Sister site radio.mixy.ca
Stats First-party listen / visit aggregates at /stats
SEO Open Graph, sitemap, robots, JSON-LD
Legal Privacy · Terms

Stack

  • Frontend: Next.js (App Router), React, TypeScript, Tailwind CSS
  • Playback: SoundCloud Widget JavaScript API
  • Search: SoundCloud API via secure server-side client credentials
  • Top-50: MySQL (top50_items / top50_votes) via Mixy API
  • Hosting: Static site + cPanel Node.js API
  • Analytics: Google Analytics 4 + first-party public stats

Links


Built and managed by Denis Lop
Music powered by SoundCloud

About

Mixy — One Playlist. Press Play. Free Music. Live at https://mixy.ca

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors