Spotify and Apple Music make it incredibly easy to showcase your live listening habits on your website. YouTube Music? Not so much. After doing some setup you can do an API call and fetch your account's playing data but YouTube does not support any official APIs for this purpose. So I decided to build my own. In theory this works for any music app, even Spotify. Check out what I'm listening to at himanshubalani.com .
Hey but there are unofficial Chrome extensions you can use right? Right, but I use the app on my Android Phone. So I decided to build one for myself.
I develop apps in Flutter so I'll use it in this guide. But feel free to ask an AI agent of your choice to build the same for you in Kotlin or React Native taking this code as reference.
What we will build today
Prerequisites
Concepts
Since YouTube Music does not have any developer APIs we are going to use a workaround. When we play any media on our phone, there is always a notification stating what media is playing and from which application along with some controls like play/pause, next/previous. In our workaround, we will listen to this information and broadcast it to our real-time database and then we can fetch that data into our website or use it wherever we like.
Understanding the Notification Data
Before we jump into the code, let's break down what an Android media notification actually contains. When the Flutter package intercepts a notification, it gives us an event object with several key pieces of information. Here are the 5 parts we care about:
packageName: This is the unique identifier of the app that posted the notification (e.g., com.google.android.apps.youtube.music). We use this to filter out irrelevant notifications like messages or emails or updates so we only track our music player.
title: In a media notification, the title almost always maps to the Song Name.
content: The body text of the notification. For music apps, this usually contains the Artist Name (and sometimes the album name).
largeIcon: This is the image attached to the notification, which represents the Album Art. Because it is sent through the Android system tray, it is heavily compressed and down sampled as a byte array (Uint8List).
hasRemoved: A boolean (true/false) flag. If this is true, it means the notification was swiped away or the media session ended, which tells our app that the music has stopped playing.
Getting Started
Create a new Flutter app using your terminal or IDE:
flutter create yt_music_tracker
cd yt_music_tracker
Step 1: Install Dependencies
Open your pubspec.yaml file and add the required packages. We will need tools for Firebase, listening to notifications, and making HTTP requests. Run this in CLI:
flutter pub add firebase_core firebase_database firebase_auth notification_listener_service http url_launcher
Since Flutter needs to talk to the native Android OS to read notifications, we have to declare a special service in our Android manifest.
Open android/app/src/main/AndroidManifest.xml and add this <service> block inside the <application> tag:
<service android:label="notifications"
android:name="notification.listener.service.NotificationListener"
android:permission="android.permission.BIND_NOTIFICATION_LISTENER_SERVICE"
android:exported="true">
<intent-filter>
<action android:name="android.service.notification.NotificationListenerService" />
</intent-filter>
</service>
Check out this GitHub Gist to see and example of Android Manifest file and other code files.
Step 3: Set up Project in Firebase Console
Go to the Firebase Console and create a new project. Follow the instructions. In the end you may be asked to download google_services.json. Place the file in android/app folder.
Go to Console > Product Categories > Databases and Storage > Realtime Database. Enable Realtime Database in the Firebase console.
Enable Anonymous Authentication in Firebase Auth ( Console > Product Categories > Security > Authentication > Sign-in method > Add Provider). This ensures our app can securely write to the database without needing a full email/password login.
Update your Realtime Database Rules to allow your authenticated app to write, but anyone to read (so your website can fetch it). live_music is our endpoint at which data will be sent (or written) and then anyone can read from it (like your website).
{
"rules": {
"live_music": {
".read": true,
".write": "auth != null"
}
}
}
Step 4: Setup Firebase in Flutter app
These directions may change depending on when you're reading this blog. So always follow Get started with Firebase in your Flutter project docs. Follow the instructions given here. Make sure to add firebase_auth and firebase_database plugins in the final step. You'll have a firebase_options.dart with your app data in the end of this step.
Step 5: The Flutter App - Initialization
Open your main.dart file. We need to initialize Firebase and sign in anonymously before the app runs. Check out this GitHub Gist for full code.
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'firebase_options.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
await FirebaseAuth.instance.signInAnonymously();
runApp(const YTMusicTrackerApp());
}
class YTMusicTrackerApp extends StatelessWidget {
const YTMusicTrackerApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'YT Music Tracker',
theme: ThemeData.dark(useMaterial3: true),
home: const TrackerScreen(),
);
}
}
Step 6: Listening to Notifications
Next, we'll create the TrackerScreen widget. It needs to check if the user has granted "Notification Access" permission, and if so, start listening to the stream of incoming notifications.
To make sure we only track music, we will filter the notifications by the package name. (You can add as many Music apps you like, it is not limited to YouTube Music). This will only track music apps and not any other apps. Just search for package names on the web for your apps or look in app info in your phone.
class TrackerScreen extends StatefulWidget {
const TrackerScreen({super.key});
@override
State<TrackerScreen> createState() => _TrackerScreenState();
}
class _TrackerScreenState extends State<TrackerScreen> {
bool _hasPermission = false;
ServiceNotificationEvent? _currentTrack;
final List<String> ytMusicPackages = [
'com.google.android.apps.youtube.music', // Official YT Music
'au.com.shiftyjelly.pocketcasts', // PocketCasts
//You can add more here
];
@override
void initState() {
super.initState();
_checkPermissionAndListen();
}
Future<void> _checkPermissionAndListen() async {
bool isGranted = await NotificationListenerService.isPermissionGranted();
setState(() => _hasPermission = isGranted);
if (isGranted) _startListening();
}
Future<void> _requestPermission() async {
bool isGranted = await NotificationListenerService.requestPermission();
setState(() => _hasPermission = isGranted);
if (isGranted) _startListening();
}
// ... more code to come
}
Step 7: The High-Res Album Art Hack
Here is where things get interesting. When Android passes a notification to our app, the album art attached to it (largeIcon) is heavily compressed to save memory. It looks pixelated and terrible on a website.
The Fix: We take the Song Title and Artist Name from the notification and make a HTTP request to the free iTunes Search API. It returns ultra-high-resolution album art!
Future<String?> fetchHighResAlbumArt(String title, String artist) async {
try {
final cleanTitle = title.split('(')[0].trim();
final query = Uri.encodeComponent('$cleanTitle $artist');
final url = Uri.parse('https://itunes.apple.com/search?term=$query&entity=song&limit=1');
final response = await http.get(url);
if (response.statusCode == 200) {
final data = jsonDecode(response.body);
if (data['results'] != null && data['results'].isNotEmpty) {
String artUrl = data['results'][0]['artworkUrl100'];
return artUrl.replaceAll('100x100bb.jpg', '1000x1000bb.jpg');
}
}
} catch (e) {
debugPrint("Failed to fetch high-res art: $e");
}
return null;
}
We can also extract the dominant color of the album art so our website can adapt its theme dynamically. I've noticed inversePrimary always creates colors that contrast better with text, so I'm using that.
Color? _dominantColor;
Future<void> _getDominantColor(String imageUrl) async {
try {
final imageProvider = NetworkImage(imageUrl);
final colorScheme = await ColorScheme.fromImageProvider(provider: imageProvider);
setState(() {
_dominantColor = colorScheme.inversePrimary;
});
} catch (e) {
setState(() => _dominantColor = Colors.redAccent);
}
}
Step 8: Sending the Listener Data to Firebase
Now, let's write the core _startListening() logic. Whenever a notification arrives, we:
Check if it belongs to our target apps.
Fetch the high-res art.
Extract the dominant color.
Push all of this to Firebase Realtime Database.
String? _lastUploadedTitle;
DateTime? _lastFirebaseUpdate;
String? _highResArtUrl;
void _startListening() {
NotificationListenerService.notificationsStream.listen((event) async {
if (ytMusicPackages.contains(event.packageName)) {
if (event.hasRemoved ?? false) {
// Music paused or app swiped away
setState(() {
_currentTrack = null;
_highResArtUrl = null;
_dominantColor = Colors.redAccent;
});
FirebaseDatabase.instance.ref("live_music").update({"isPlaying": false});
} else {
// Music Playing!
setState(() {
_currentTrack = event;
_highResArtUrl = null;
});
if (event.title != null && event.content != null) {
String? url = await fetchHighResAlbumArt(event.title!, event.content!);
if (_currentTrack?.title == event.title) {
setState(() => _highResArtUrl = url);
if (url != null) {
await _getDominantColor(url);
} else {
setState(() => _dominantColor = Colors.redAccent);
}
updateLiveMusicOnFirebase(
event.title!,
event.content!,
url,
true,
_dominantColor,
);
}
}
}
}
});
}
void updateLiveMusicOnFirebase(String title, String artist, String? artUrl, bool isPlaying, Color? dominantColor) {
final now = DateTime.now();
// Prevent spamming Firebase by checking if it's the exact same song updated recently
final isSameSong = _lastUploadedTitle == title;
final isTooSoon = _lastFirebaseUpdate != null && now.difference(_lastFirebaseUpdate!).inMinutes < 2;
if (isSameSong && isTooSoon) return;
_lastFirebaseUpdate = now;
_lastUploadedTitle = title;
final colorHex = dominantColor != null
? '#${dominantColor.toARGB32().toRadixString(16).toUpperCase()}'
: null;
DatabaseReference ref = FirebaseDatabase.instance.ref("live_music");
ref.set({
"title": title,
"artist": artist,
"albumArt": artUrl,
"isPlaying": isPlaying,
"updatedAt": now.toIso8601String(),
"albumColor": colorHex,
});
}
Notice how I added a limit to sending data?
If you play/pause the same song, it blocks the update from sending again if it has been less than 2 minutes.
If a next song plays, isSameSong becomes false, which instantly bypasses the rate limit and sends the new song data immediately.
Note: For the UI code (_buildBody), you can render simple widgets showing _currentTrack.title, _currentTrack.content (Artist), and an Image.network using our _highResArtUrl. Feel free to get creative with your Flutter UI! I just used a simple column layout.
Check out this GitHub Gist to see complete code files and a sample HTML website with UI to see an example. Remember to change the FIREBASE_URL in gist with your firebase database URL.
How to use this on your Website
The beauty of Firebase Realtime Database is that any database path instantly becomes a standard JSON REST API just by adding .json to the end of the URL. You can find your URL in Firebase Console > Realtime Database > Data.
You don't need heavy Firebase Web SDKs on your portfolio. You can just do a standard HTTP fetch from your React, Vue, or Flutter Web app:
// Fetch this URL on your website
const response = await fetch('https://YOUR-PROJECT-ID-default-rtdb.firebaseio.com/live_music.json');
const musicData = await response.json();
console.log(`Now playing: ${musicData.title} by ${musicData.artist}`);
// Use musicData.albumColor to dynamically style your website's UI!
Fetching the JSON is only half the story, the fun part is turning it into something that actually looks alive on your website. I wanted a pill shape on my About page, it shows the album art, the song title and the artist with dynamic BG Color.
Here's a simple HTML/CSS/JS codeblock for it same idea as the pills you saw in the cover image above. It reads title, artist, albumArt, and albumColor straight from the Firebase endpoint and updates itself every 15 seconds.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Now playing — neobrutal</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&family=Roboto+Flex:wght@800;900&display=swap" rel="stylesheet">
<style>
*{box-sizing:border-box;}
body{
margin:0;
min-height:100vh;
background:#f2f0e9;
font-family:'Quicksand',sans-serif;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:48px;
padding:56px 20px;
}
.group{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.group-label{
font-family:'Roboto Flex',sans-serif;
font-weight:800;
font-size:11px;
letter-spacing:0.14em;
text-transform:uppercase;
color:#111;
opacity:0.45;
}
.music-icon{ display:block; }
.box-circles{
display:flex;
align-items:right;
gap:2px;
}
.box-circles span{
width:15px;
height:15px;
border-radius:50%;
border:2px solid #111;
background:rgba(255,255,255,0.8);
flex-shrink:0;
box-sizing:border-box;
}
/* ---- mobile card ---- */
.nb-card{
width:340px;
height:104px;
border-radius:18px;
border:2.5px solid #111;
display:flex;
overflow:hidden;
background:#1f7a8c;
color:#fff;
box-shadow:0px 0px 0 rgba(17,17,17,0.9);
transition:background 0.3s ease, color 0.3s ease;
}
.nb-art{
width:104px;
height:100%;
object-fit:cover;
flex:0 0 auto;
background:#0003;
border-right:2.5px solid #111;
display:block;
}
.nb-body{
flex:1 1 auto;
min-width:0;
padding:9px 12px;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.nb-top-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.nb-eyebrow{
font-weight:700;
font-size:11px;
letter-spacing:0.02em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.nb-title{
font-weight:700;
font-size:14px;
line-height:1.25;
margin:0;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.nb-artist{
font-weight:600;
font-size:11px;
margin:2px 0 0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
opacity:0.85;
}
.nb-bottom-row{ display:flex; align-items:center; justify-content:flex-end; gap:5px; }
.nb-bottom-row .music-label{
font-family:'Roboto Flex',sans-serif;
font-weight:900;
font-size:12px;
letter-spacing:0.02em;
}
/* ---- desktop pill ---- */
.nb-pill{
width:min(92vw,480px);
border-radius:16px;
border:2.5px solid #111;
background:#1f7a8c;
color:#111;
display:flex;
align-items:center;
gap:6px;
padding:4px 8px;
box-shadow:0px 0px 0 rgba(17,17,17,0.9);
transition:background 0.3s ease, color 0.3s ease;
}
.nb-pill .music-icon{ flex:0 0 auto; }
.nb-listening{
font-weight:700;
font-size:13px;
white-space:nowrap;
flex:0 0 auto;
}
.nb-thumb{
width:30px; height:30px; border-radius:8px;
object-fit:cover;
border:1.5px solid currentColor;
flex:0 0 auto;
}
.nb-track{
font-weight:700;
font-size:13px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
flex:1 1 auto;
min-width:0;
}
.nb-pill .box-circles{ flex:0 0 auto; margin-left:4px; }
.nb-card[data-state="loading"] .nb-title,
.nb-pill[data-state="loading"] .nb-track{
background:rgba(255,255,255,0.3);
border-radius:4px;
color:transparent;
}
</style>
</head>
<body>
<div class="group">
<span class="group-label">Mobile</span>
<div class="nb-card" id="nbCard" data-state="loading">
<img class="nb-art" id="nbArt" src="" alt="">
<div class="nb-body">
<div class="nb-top-row">
<span class="nb-eyebrow" id="nbEyebrow">Listening to</span>
<div class="box-circles">
<span></span>
</div>
</div>
<div>
<p class="nb-title" id="nbTitle">Loading…</p>
<p class="nb-artist" id="nbArtist"> </p>
</div>
<div class="nb-bottom-row">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 50 50">
<path d="M 25 3 C 12.85 3 3 12.85 3 25 C 3 37.15 12.85 47 25 47 C 37.15 47 47 37.15 47 25 C 47 12.85 37.15 3 25 3 z M 25 11 C 32.72 11 39 17.28 39 25 C 39 32.72 32.72 39 25 39 C 17.28 39 11 32.72 11 25 C 11 17.28 17.28 11 25 11 z M 25 13 C 18.383 13 13 18.383 13 25 C 13 31.617 18.383 37 25 37 C 31.617 37 37 31.617 37 25 C 37 18.383 31.617 13 25 13 z M 22.019531 18.501953 C 22.194031 18.505203 22.366984 18.552484 22.521484 18.646484 L 31.521484 24.146484 C 31.817484 24.327484 32 24.651 32 25 C 32 25.349 31.818484 25.671516 31.521484 25.853516 L 22.521484 31.353516 C 22.361484 31.450516 22.181 31.5 22 31.5 C 21.832 31.5 21.663719 31.456094 21.511719 31.371094 C 21.195719 31.194094 21 30.861 21 30.5 L 21 19.5 C 21 19.139 21.195719 18.805906 21.511719 18.628906 C 21.670219 18.540906 21.845031 18.498703 22.019531 18.501953 z"></path>
</svg>
<span class="music-label">Music</span>
</div>
</div>
</div>
</div>
<div class="group">
<span class="group-label">Desktop</span>
<div class="nb-pill" id="nbPill" data-state="loading">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 50 50">
<path d="M 25 3 C 12.85 3 3 12.85 3 25 C 3 37.15 12.85 47 25 47 C 37.15 47 47 37.15 47 25 C 47 12.85 37.15 3 25 3 z M 25 11 C 32.72 11 39 17.28 39 25 C 39 32.72 32.72 39 25 39 C 17.28 39 11 32.72 11 25 C 11 17.28 17.28 11 25 11 z M 25 13 C 18.383 13 13 18.383 13 25 C 13 31.617 18.383 37 25 37 C 31.617 37 37 31.617 37 25 C 37 18.383 31.617 13 25 13 z M 22.019531 18.501953 C 22.194031 18.505203 22.366984 18.552484 22.521484 18.646484 L 31.521484 24.146484 C 31.817484 24.327484 32 24.651 32 25 C 32 25.349 31.818484 25.671516 31.521484 25.853516 L 22.521484 31.353516 C 22.361484 31.450516 22.181 31.5 22 31.5 C 21.832 31.5 21.663719 31.456094 21.511719 31.371094 C 21.195719 31.194094 21 30.861 21 30.5 L 21 19.5 C 21 19.139 21.195719 18.805906 21.511719 18.628906 C 21.670219 18.540906 21.845031 18.498703 22.019531 18.501953 z"></path>
</svg>
<span class="nb-listening">listening to</span>
<img class="nb-thumb" id="nbThumb" src="" alt="">
<span class="nb-track" id="nbTrack">Loading…</span>
<div class="box-circles">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<script>
const FIREBASE_URL = "https://yt-music-tracker-default-rtdb.asia-southeast1.firebasedatabase.app/live_music.json"; //Replace this with your URL
const POLL_MS = 15000;
const nbCard = document.getElementById('nbCard');
const nbEyebrow = document.getElementById('nbEyebrow');
const nbArt = document.getElementById('nbArt');
const nbTitle = document.getElementById('nbTitle');
const nbArtist = document.getElementById('nbArtist');
const nbPill = document.getElementById('nbPill');
const nbThumb = document.getElementById('nbThumb');
const nbTrack = document.getElementById('nbTrack');
function parseArgb(hex){
if(!hex || typeof hex !== 'string') return null;
const clean = hex.replace('#','');
if(clean.length === 8){
return { r: parseInt(clean.slice(2,4),16), g: parseInt(clean.slice(4,6),16), b: parseInt(clean.slice(6,8),16) };
}
if(clean.length === 6){
return { r: parseInt(clean.slice(0,2),16), g: parseInt(clean.slice(2,4),16), b: parseInt(clean.slice(4,6),16) };
}
return null;
}
function luminance(r,g,b){ return (0.299*r + 0.587*g + 0.114*b) / 255; }
function applyBg(el, argbHex){
const c = parseArgb(argbHex) || { r:31, g:122, b:140 };
const bg = 'rgb(' + c.r + ',' + c.g + ',' + c.b + ')';
const textColor = luminance(c.r,c.g,c.b) < 0.5 ? '#ffffff' : '#111111';
el.style.background = bg;
el.style.color = textColor;
}
function escapeHtml(s){
return String(s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c]));
}
async function refresh(){
try{
const res = await fetch(FIREBASE_URL, {cache:'no-store'});
if(!res.ok) throw new Error('bad response');
const data = await res.json();
if(!data){ throw new Error('no data'); }
const t = data.title || 'Untitled';
const a = data.artist || 'Unknown artist';
nbCard.dataset.state = 'ok';
applyBg(nbCard, data.albumColor);
nbEyebrow.textContent = data.isPlaying ? 'Listening to' : 'Last played';
if(nbArt.src !== data.albumArt){ nbArt.src = data.albumArt || ''; }
nbTitle.textContent = t;
nbArtist.textContent = a;
nbPill.dataset.state = 'ok';
applyBg(nbPill, data.albumColor);
if(nbThumb.src !== data.albumArt){ nbThumb.src = data.albumArt || ''; }
nbTrack.textContent = t + ' by ' + a;
}catch(err){
nbCard.dataset.state = 'error';
nbTitle.textContent = 'Can\u2019t reach tracker';
nbArtist.textContent = 'Retrying\u2026';
nbPill.dataset.state = 'error';
nbTrack.textContent = 'Can\u2019t reach tracker \u2014 retrying\u2026';
}
}
refresh();
setInterval(refresh, POLL_MS);
</script>
</body>
</html>
Conclusion
And there you have it! A completely custom, free pipeline to broadcast your YouTube Music listening habits directly to your personal website. By combining Android's powerful Notification API with a clever iTunes search query, we bypassed the lack of an official Google API to get high-quality, real-time data.
Install the app on your phone, grant it notification access, throw on your favorite playlist, and share it with the world.
Bonus
Here are some features you can implement easily with AI. Put pubspec.yaml file and our main.dart file in an AI agent and you can get these features on one prompt:
Native Android. Port to Kotlin. Ask AI to build this in Kotlin for better battery life.
Add Background Service. Right now the app runs for a few minutes/hours and stops due to how android treats open apps and limited memory space. Ask AI to add flutter_background_service to this app so it runs all the time in the background.
Add package_selector. Add a dropdown in the Flutter app to select which apps are tracked for music notifications.
Got questions or ran into issues setting this up? Reach out via my Hashnode Profile Himanshu Balani or my email at hello@himanshubalani.com or find my socials here.
