How I Built the TikTok Version of Spotify

Adrian Krywiak
3 min readApr 13, 2024

--

I’m Adrian, a tech enthusiast who loves blending the latest trends into innovative applications. Ever find yourself lost in the rhythm of your favourite Spotify playlist but craving more interaction? That’s exactly where my journey began. Let’s dive into how I transformed Spotify’s passive listening experience into an active, engaging adventure inspired by TikTok’s dynamic scrollable content.

Demo

Demo Video

The Lightbulb Moment

While vibing to some tunes on Spotify, a thought struck me: “Why must music be a background activity?” In a world dominated by interactive platforms like TikTok, why not make music listening as engaging as scrolling through videos? This sparked the idea of creating an app where music doesn’t just play in the background but plays a leading role in social interaction and discovery.

Engineering the Experience

Choosing the right tools was crucial. I opted for Python for its robust data handling and analysis capabilities and Flutter for creating a slick, responsive mobile UI. Here’s how the magic happened:

Data with AI

  1. Data Tuning: I tapped into Spotify’s vast library, pulling audio features from 20,000 songs using LibRosa, a Python library adept at audio analysis. I extracted key features like tempo, tonality, and energy to understand each song’s vibe and essence. After that, I utilized the powerful Youtube API, gathered the peak moments of people watching the specific YouTube version of the Spotify song, and saved it into the database.
  2. Machine Learning: The real game-changer was integrating a machine learning model using Scikit-learn’s Nearest Neighbors algorithm. By comparing song features, the app suggests tracks that resonate with the user’s current mood, much like a friend who knows your taste in music. This AI model isn’t just innovative; it’s like your personal DJ.
Web Server Handling the Recommend Endpoint

Backend Composition

Using Flask, I orchestrated three primary endpoints:

  • /songs: This endpoint acts like a music library, offering detailed song information and streaming functionality.
  • /randomIt’s all about surprises here! This endpoint dishes out a random track each time, perfect for when you’re feeling adventurous.
  • /recommend: The show's star uses AI to suggest songs, ensuring you’re always just a beat away from discovering your next favourite track.
Example output from the /random endpoint.

Frontend:

Flutter helped me craft an immersive UI where users swipe through song clips, interact with them, and explore new tunes based on sophisticated AI recommendations. Integrating social features is after my playlist, allowing users to like tracks and share their musical journey with friends — adding a new layer of connectivity.

The Road Ahead

I’m tuning up the app to include more complex AI algorithms for deeper musical understanding and to introduce social features like shared playlists and reposting. This isn’t just about listening to music; it’s about experiencing it together. Building this app was quite complex, and every line of code and UI element had to sync. The experience expanded my skills beyond Python and Flutter, diving deeper into AI and user engagement strategies.

Hey there! I’m Adrian. When I’m not busy convincing my friends that AI won’t take over the world (or will it?), I’m deep-diving into the mesmerizing world of computer vision. I mean, who wouldn’t want computers to recognize a cat from a croissant, right? Some call it a passion, others an obsession, but it’s just Tuesday for me. Are you curious about my other ‘weird’ tech hobbies, or do you want a virtual coffee chat? Hit me up on LinkedIn! If you’re into AI or robots, check out my website.

--

--