MACRO NEPAL
Music Recommendation System – Content-Based Filtering HTML, CSS, JavaScript, PHP, and MySQL
awiskar acharya
February 20, 2026
2:31 pm

PROJECT OVERVIEW

A lightweight music recommendation system that suggests songs based on genre, artist, mood, and user preferences using content-based filtering.

Key Features

  • User registration and profile
  • Song browsing and searching
  • Personalized recommendations based on liked songs
  • Playlist creation
  • Mood-based filtering
  • Artist similarity matching

DATABASE SCHEMA (Simple)

CREATE DATABASE music_recommendation;
USE music_recommendation;
-- Users table
CREATE TABLE users (
id INT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(50) UNIQUE NOT NULL,
email VARCHAR(100) UNIQUE NOT NULL,
password_hash VARCHAR(255) NOT NULL,
favorite_genre VARCHAR(50),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
-- Artists table
CREATE TABLE artists (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100) NOT NULL,
genre VARCHAR(50),
bio TEXT,
image_url VARCHAR(255)
);
-- Songs table
CREATE TABLE songs (
id INT PRIMARY KEY AUTO_INCREMENT,
title VARCHAR(200) NOT NULL,
artist_id INT,
album VARCHAR(100),
genre VARCHAR(50),
mood VARCHAR(50),
duration INT, -- in seconds
release_year YEAR,
audio_url VARCHAR(255),
image_url VARCHAR(255),
plays INT DEFAULT 0,
FOREIGN KEY (artist_id) REFERENCES artists(id) ON DELETE CASCADE,
INDEX idx_genre (genre),
INDEX idx_mood (mood)
);
-- User song interactions (likes)
CREATE TABLE user_likes (
id INT PRIMARY KEY AUTO_INCREMENT,
user_id INT,
song_id INT,
liked_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
FOREIGN KEY (song_id) REFERENCES songs(id) ON DELETE CASCADE,
UNIQUE KEY unique_like (user_id, song_id)
);
-- Playlists
CREATE TABLE playlists (
id INT PRIMARY KEY AUTO_INCREMENT,
user_id INT,
name VARCHAR(100) NOT NULL,
description TEXT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
);
-- Playlist songs
CREATE TABLE playlist_songs (
id INT PRIMARY KEY AUTO_INCREMENT,
playlist_id INT,
song_id INT,
added_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (playlist_id) REFERENCES playlists(id) ON DELETE CASCADE,
FOREIGN KEY (song_id) REFERENCES songs(id) ON DELETE CASCADE
);
-- Recommendations cache
CREATE TABLE recommendations (
id INT PRIMARY KEY AUTO_INCREMENT,
user_id INT,
song_id INT,
score DECIMAL(5,2),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
FOREIGN KEY (song_id) REFERENCES songs(id) ON DELETE CASCADE
);
-- Insert sample data
INSERT INTO artists (name, genre, bio) VALUES
('The Weeknd', 'Pop', 'Canadian singer-songwriter'),
('Taylor Swift', 'Pop', 'American singer-songwriter'),
('Drake', 'Hip Hop', 'Canadian rapper'),
('Adele', 'Soul', 'British singer'),
('Ed Sheeran', 'Pop', 'English singer-songwriter');
INSERT INTO songs (title, artist_id, genre, mood, duration, release_year) VALUES
('Blinding Lights', 1, 'Pop', 'Energetic', 200, 2019),
('Save Your Tears', 1, 'Pop', 'Melancholic', 210, 2020),
('Shake It Off', 2, 'Pop', 'Happy', 219, 2014),
('Blank Space', 2, 'Pop', 'Sarcastic', 231, 2014),
('God\'s Plan', 3, 'Hip Hop', 'Inspirational', 198, 2018),
('One Dance', 3, 'Hip Hop', 'Dance', 173, 2016),
('Hello', 4, 'Soul', 'Sad', 295, 2015),
('Rolling in the Deep', 4, 'Soul', 'Angry', 228, 2010),
('Shape of You', 5, 'Pop', 'Romantic', 233, 2017),
('Perfect', 5, 'Pop', 'Romantic', 264, 2017);

BACKEND IMPLEMENTATION

config.php

<?php
session_start();
$host = 'localhost';
$dbname = 'music_recommendation';
$username = 'root';
$password = '';
try {
$pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
die("Connection failed: " . $e->getMessage());
}
function isLoggedIn() {
return isset($_SESSION['user_id']);
}
?>

User.php

<?php
class User {
private $pdo;
public function __construct($pdo) {
$this->pdo = $pdo;
}
public function register($username, $email, $password, $genre = '') {
$hash = password_hash($password, PASSWORD_DEFAULT);
$stmt = $this->pdo->prepare("INSERT INTO users (username, email, password_hash, favorite_genre) VALUES (?, ?, ?, ?)");
return $stmt->execute([$username, $email, $hash, $genre]);
}
public function login($username, $password) {
$stmt = $this->pdo->prepare("SELECT * FROM users WHERE username = ? OR email = ?");
$stmt->execute([$username, $username]);
$user = $stmt->fetch();
if ($user && password_verify($password, $user['password_hash'])) {
$_SESSION['user_id'] = $user['id'];
$_SESSION['username'] = $user['username'];
return true;
}
return false;
}
public function likeSong($userId, $songId) {
$stmt = $this->pdo->prepare("INSERT IGNORE INTO user_likes (user_id, song_id) VALUES (?, ?)");
return $stmt->execute([$userId, $songId]);
}
public function unlikeSong($userId, $songId) {
$stmt = $this->pdo->prepare("DELETE FROM user_likes WHERE user_id = ? AND song_id = ?");
return $stmt->execute([$userId, $songId]);
}
public function getLikedSongs($userId) {
$stmt = $this->pdo->prepare("
SELECT s.*, a.name as artist_name 
FROM user_likes l
JOIN songs s ON l.song_id = s.id
JOIN artists a ON s.artist_id = a.id
WHERE l.user_id = ?
ORDER BY l.liked_at DESC
");
$stmt->execute([$userId]);
return $stmt->fetchAll();
}
}
?>

MusicRecommender.php (Core Algorithm)

<?php
class MusicRecommender {
private $pdo;
public function __construct($pdo) {
$this->pdo = $pdo;
}
// Content-based filtering algorithm
public function getRecommendations($userId, $limit = 10) {
// Get user's liked songs
$likedSongs = $this->getUserLikedSongs($userId);
if (empty($likedSongs)) {
// If no likes, recommend popular songs
return $this->getPopularSongs($limit);
}
// Build user profile from liked songs
$userProfile = $this->buildUserProfile($likedSongs);
// Get all songs not liked by user
$candidates = $this->getCandidateSongs($userId);
// Calculate similarity scores
$recommendations = [];
foreach ($candidates as $song) {
$score = $this->calculateSimilarity($userProfile, $song);
if ($score > 0.3) { // Threshold
$recommendations[] = [
'song' => $song,
'score' => $score
];
}
}
// Sort by score descending
usort($recommendations, function($a, $b) {
return $b['score'] <=> $a['score'];
});
// Cache recommendations
$this->cacheRecommendations($userId, array_slice($recommendations, 0, $limit));
return array_slice($recommendations, 0, $limit);
}
private function buildUserProfile($likedSongs) {
$profile = [
'genres' => [],
'moods' => [],
'artists' => []
];
foreach ($likedSongs as $song) {
// Count genre occurrences
if ($song['genre']) {
$profile['genres'][$song['genre']] = 
($profile['genres'][$song['genre']] ?? 0) + 1;
}
// Count mood occurrences
if ($song['mood']) {
$profile['moods'][$song['mood']] = 
($profile['moods'][$song['mood']] ?? 0) + 1;
}
// Count artist occurrences
if ($song['artist_id']) {
$profile['artists'][$song['artist_id']] = 
($profile['artists'][$song['artist_id']] ?? 0) + 1;
}
}
// Normalize (convert counts to weights)
$total = count($likedSongs);
foreach ($profile['genres'] as &$count) {
$count = $count / $total;
}
foreach ($profile['moods'] as &$count) {
$count = $count / $total;
}
foreach ($profile['artists'] as &$count) {
$count = $count / $total;
}
return $profile;
}
private function calculateSimilarity($userProfile, $song) {
$weights = [
'genre' => 0.4,
'mood' => 0.3,
'artist' => 0.3
];
$score = 0;
// Genre similarity
if ($song['genre'] && isset($userProfile['genres'][$song['genre']])) {
$score += $userProfile['genres'][$song['genre']] * $weights['genre'];
}
// Mood similarity
if ($song['mood'] && isset($userProfile['moods'][$song['mood']])) {
$score += $userProfile['moods'][$song['mood']] * $weights['mood'];
}
// Artist similarity
if ($song['artist_id'] && isset($userProfile['artists'][$song['artist_id']])) {
$score += $userProfile['artists'][$song['artist_id']] * $weights['artist'];
}
return $score;
}
private function getUserLikedSongs($userId) {
$stmt = $this->pdo->prepare("
SELECT s.* FROM user_likes l
JOIN songs s ON l.song_id = s.id
WHERE l.user_id = ?
");
$stmt->execute([$userId]);
return $stmt->fetchAll();
}
private function getCandidateSongs($userId) {
$stmt = $this->pdo->prepare("
SELECT s.*, a.name as artist_name 
FROM songs s
JOIN artists a ON s.artist_id = a.id
WHERE s.id NOT IN (
SELECT song_id FROM user_likes WHERE user_id = ?
)
");
$stmt->execute([$userId]);
return $stmt->fetchAll();
}
private function getPopularSongs($limit) {
$stmt = $this->pdo->prepare("
SELECT s.*, a.name as artist_name 
FROM songs s
JOIN artists a ON s.artist_id = a.id
ORDER BY s.plays DESC
LIMIT ?
");
$stmt->execute([$limit]);
return $stmt->fetchAll();
}
private function cacheRecommendations($userId, $recommendations) {
// Clear old cache
$stmt = $this->pdo->prepare("DELETE FROM recommendations WHERE user_id = ?");
$stmt->execute([$userId]);
// Insert new recommendations
$stmt = $this->pdo->prepare("INSERT INTO recommendations (user_id, song_id, score) VALUES (?, ?, ?)");
foreach ($recommendations as $rec) {
$stmt->execute([$userId, $rec['song']['id'], $rec['score']]);
}
}
public function searchSongs($query) {
$stmt = $this->pdo->prepare("
SELECT s.*, a.name as artist_name 
FROM songs s
JOIN artists a ON s.artist_id = a.id
WHERE s.title LIKE ? OR a.name LIKE ? OR s.genre LIKE ?
LIMIT 20
");
$search = "%$query%";
$stmt->execute([$search, $search, $search]);
return $stmt->fetchAll();
}
}
?>

API Endpoints

api/login.php

<?php
require_once '../config.php';
require_once '../User.php';
header('Content-Type: application/json');
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
echo json_encode(['success' => false, 'message' => 'Method not allowed']);
exit;
}
$user = new User($pdo);
$data = json_decode(file_get_contents('php://input'), true);
if ($user->login($data['username'], $data['password'])) {
echo json_encode(['success' => true, 'user' => $_SESSION['username']]);
} else {
echo json_encode(['success' => false, 'message' => 'Invalid credentials']);
}
?>

api/register.php

<?php
require_once '../config.php';
require_once '../User.php';
header('Content-Type: application/json');
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
echo json_encode(['success' => false, 'message' => 'Method not allowed']);
exit;
}
$user = new User($pdo);
$data = json_decode(file_get_contents('php://input'), true);
if ($user->register($data['username'], $data['email'], $data['password'], $data['genre'] ?? '')) {
echo json_encode(['success' => true]);
} else {
echo json_encode(['success' => false, 'message' => 'Registration failed']);
}
?>

api/recommendations.php

<?php
require_once '../config.php';
require_once '../MusicRecommender.php';
header('Content-Type: application/json');
if (!isLoggedIn()) {
echo json_encode(['success' => false, 'message' => 'Not logged in']);
exit;
}
$recommender = new MusicRecommender($pdo);
$recommendations = $recommender->getRecommendations($_SESSION['user_id'], $_GET['limit'] ?? 10);
echo json_encode(['success' => true, 'recommendations' => $recommendations]);
?>

api/like.php

<?php
require_once '../config.php';
require_once '../User.php';
header('Content-Type: application/json');
if (!isLoggedIn()) {
echo json_encode(['success' => false, 'message' => 'Not logged in']);
exit;
}
$user = new User($pdo);
$data = json_decode(file_get_contents('php://input'), true);
if ($user->likeSong($_SESSION['user_id'], $data['song_id'])) {
echo json_encode(['success' => true]);
} else {
echo json_encode(['success' => false]);
}
?>

api/search.php

<?php
require_once '../config.php';
require_once '../MusicRecommender.php';
header('Content-Type: application/json');
$recommender = new MusicRecommender($pdo);
$results = $recommender->searchSongs($_GET['q'] ?? '');
echo json_encode(['success' => true, 'results' => $results]);
?>

FRONTEND IMPLEMENTATION

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Recommender</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.navbar {
background: rgba(255,255,255,0.95);
padding: 1rem 2rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: #667eea;
}
.nav-links a {
margin-left: 2rem;
text-decoration: none;
color: #333;
transition: color 0.3s;
}
.nav-links a:hover {
color: #667eea;
}
.container {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
}
.hero {
background: white;
border-radius: 20px;
padding: 3rem;
text-align: center;
margin-bottom: 2rem;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
.hero h1 {
font-size: 2.5rem;
color: #333;
margin-bottom: 1rem;
}
.hero p {
color: #666;
font-size: 1.2rem;
margin-bottom: 2rem;
}
.search-box {
max-width: 600px;
margin: 0 auto;
display: flex;
gap: 0.5rem;
}
.search-box input {
flex: 1;
padding: 1rem;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 1rem;
transition: border-color 0.3s;
}
.search-box input:focus {
outline: none;
border-color: #667eea;
}
.search-box button {
padding: 0 2rem;
background: #667eea;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background 0.3s;
}
.search-box button:hover {
background: #5a67d8;
}
.section-title {
font-size: 1.8rem;
color: white;
margin-bottom: 1.5rem;
}
.song-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.song-card {
background: white;
border-radius: 15px;
padding: 1.5rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s, box-shadow 0.3s;
cursor: pointer;
}
.song-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.song-title {
font-size: 1.2rem;
font-weight: bold;
color: #333;
margin-bottom: 0.5rem;
}
.song-artist {
color: #667eea;
font-weight: 600;
margin-bottom: 0.5rem;
}
.song-meta {
display: flex;
justify-content: space-between;
color: #666;
font-size: 0.9rem;
margin: 1rem 0;
}
.song-genre, .song-mood {
background: #f0f0f0;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
}
.song-actions {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
}
.btn {
flex: 1;
padding: 0.75rem;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: background 0.3s;
}
.btn-primary {
background: #667eea;
color: white;
}
.btn-primary:hover {
background: #5a67d8;
}
.btn-secondary {
background: #48bb78;
color: white;
}
.btn-secondary:hover {
background: #38a169;
}
.btn-outline {
background: transparent;
border: 2px solid #667eea;
color: #667eea;
}
.btn-outline:hover {
background: #667eea;
color: white;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal.active {
display: flex;
}
.modal-content {
background: white;
border-radius: 20px;
padding: 2rem;
max-width: 400px;
width: 90%;
}
.modal h2 {
margin-bottom: 1.5rem;
color: #333;
}
.modal input {
width: 100%;
padding: 0.75rem;
margin-bottom: 1rem;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
}
.modal input:focus {
outline: none;
border-color: #667eea;
}
.loading {
text-align: center;
padding: 2rem;
color: white;
}
.loading-spinner {
border: 4px solid rgba(255,255,255,0.3);
border-top: 4px solid white;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto 1rem;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.message {
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
display: none;
}
.message.success {
background: #c6f6d5;
color: #22543d;
display: block;
}
.message.error {
background: #fed7d7;
color: #742a2a;
display: block;
}
@media (max-width: 768px) {
.hero h1 {
font-size: 2rem;
}
.song-grid {
grid-template-columns: 1fr;
}
.nav-links a {
margin-left: 1rem;
}
}
</style>
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<div class="logo">🎵 MusicRecommender</div>
<div class="nav-links">
<a href="#" onclick="showHome()">Home</a>
<a href="#" onclick="showRecommendations()">Recommendations</a>
<a href="#" onclick="showLiked()">Liked Songs</a>
<a href="#" id="authLink" onclick="showLoginModal()">Login</a>
</div>
</div>
</nav>
<div class="container">
<!-- Hero Section -->
<div class="hero" id="heroSection">
<h1>Discover Your Next Favorite Song</h1>
<p>Personalized music recommendations based on your taste</p>
<div class="search-box">
<input type="text" id="searchInput" placeholder="Search songs, artists, or genres...">
<button onclick="searchSongs()">Search</button>
</div>
</div>
<!-- Message Display -->
<div id="message" class="message"></div>
<!-- Content Sections -->
<div id="homeSection">
<h2 class="section-title">Popular Songs</h2>
<div id="popularSongs" class="song-grid">
<div class="loading">
<div class="loading-spinner"></div>
Loading songs...
</div>
</div>
</div>
<div id="recommendationsSection" style="display: none;">
<h2 class="section-title">Recommended For You</h2>
<div id="recommendationsList" class="song-grid"></div>
</div>
<div id="likedSection" style="display: none;">
<h2 class="section-title">Your Liked Songs</h2>
<div id="likedList" class="song-grid"></div>
</div>
<div id="searchResultsSection" style="display: none;">
<h2 class="section-title">Search Results</h2>
<div id="searchResults" class="song-grid"></div>
</div>
</div>
<!-- Login Modal -->
<div class="modal" id="loginModal">
<div class="modal-content">
<h2>Login</h2>
<input type="text" id="loginUsername" placeholder="Username or Email">
<input type="password" id="loginPassword" placeholder="Password">
<button class="btn btn-primary" style="width: 100%; margin-bottom: 1rem;" onclick="login()">Login</button>
<p style="text-align: center;">Don't have an account? <a href="#" onclick="showRegisterModal()">Register</a></p>
</div>
</div>
<!-- Register Modal -->
<div class="modal" id="registerModal">
<div class="modal-content">
<h2>Register</h2>
<input type="text" id="regUsername" placeholder="Username">
<input type="email" id="regEmail" placeholder="Email">
<input type="password" id="regPassword" placeholder="Password">
<input type="text" id="regGenre" placeholder="Favorite Genre (optional)">
<button class="btn btn-primary" style="width: 100%;" onclick="register()">Register</button>
</div>
</div>
<script>
// State
let currentUser = null;
let currentAudio = null;
// Check if user is logged in on load
document.addEventListener('DOMContentLoaded', function() {
checkAuth();
loadPopularSongs();
});
function checkAuth() {
fetch('api/check_auth.php')
.then(response => response.json())
.then(data => {
if (data.logged_in) {
currentUser = data.user;
document.getElementById('authLink').innerHTML = 'Logout';
document.getElementById('authLink').onclick = logout;
}
});
}
function showLoginModal() {
document.getElementById('loginModal').classList.add('active');
}
function showRegisterModal() {
document.getElementById('loginModal').classList.remove('active');
document.getElementById('registerModal').classList.add('active');
}
function hideModals() {
document.getElementById('loginModal').classList.remove('active');
document.getElementById('registerModal').classList.remove('active');
}
function login() {
const username = document.getElementById('loginUsername').value;
const password = document.getElementById('loginPassword').value;
fetch('api/login.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, password })
})
.then(response => response.json())
.then(data => {
if (data.success) {
hideModals();
currentUser = data.user;
document.getElementById('authLink').innerHTML = 'Logout';
document.getElementById('authLink').onclick = logout;
showMessage('Login successful!', 'success');
loadRecommendations();
} else {
showMessage('Login failed: ' + data.message, 'error');
}
});
}
function register() {
const username = document.getElementById('regUsername').value;
const email = document.getElementById('regEmail').value;
const password = document.getElementById('regPassword').value;
const genre = document.getElementById('regGenre').value;
fetch('api/register.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, email, password, genre })
})
.then(response => response.json())
.then(data => {
if (data.success) {
hideModals();
showMessage('Registration successful! Please login.', 'success');
} else {
showMessage('Registration failed: ' + data.message, 'error');
}
});
}
function logout() {
fetch('api/logout.php')
.then(() => {
currentUser = null;
document.getElementById('authLink').innerHTML = 'Login';
document.getElementById('authLink').onclick = showLoginModal;
showMessage('Logged out successfully', 'success');
showHome();
});
}
function loadPopularSongs() {
fetch('api/popular_songs.php')
.then(response => response.json())
.then(data => {
if (data.success) {
displaySongs(data.songs, 'popularSongs');
}
});
}
function loadRecommendations() {
if (!currentUser) {
showMessage('Please login to see recommendations', 'error');
return;
}
document.getElementById('recommendationsList').innerHTML = '<div class="loading"><div class="loading-spinner"></div>Loading recommendations...</div>';
fetch('api/recommendations.php')
.then(response => response.json())
.then(data => {
if (data.success) {
displaySongs(data.recommendations.map(r => r.song), 'recommendationsList');
}
});
}
function loadLikedSongs() {
if (!currentUser) {
showMessage('Please login to see liked songs', 'error');
return;
}
fetch('api/liked_songs.php')
.then(response => response.json())
.then(data => {
if (data.success) {
displaySongs(data.songs, 'likedList');
}
});
}
function searchSongs() {
const query = document.getElementById('searchInput').value;
if (!query) return;
document.getElementById('searchResults').innerHTML = '<div class="loading"><div class="loading-spinner"></div>Searching...</div>';
document.getElementById('searchResultsSection').style.display = 'block';
document.getElementById('homeSection').style.display = 'none';
document.getElementById('recommendationsSection').style.display = 'none';
document.getElementById('likedSection').style.display = 'none';
fetch(`api/search.php?q=${encodeURIComponent(query)}`)
.then(response => response.json())
.then(data => {
if (data.success) {
displaySongs(data.results, 'searchResults');
}
});
}
function displaySongs(songs, containerId) {
const container = document.getElementById(containerId);
if (!container) return;
if (!songs || songs.length === 0) {
container.innerHTML = '<p style="color: white; text-align: center;">No songs found</p>';
return;
}
container.innerHTML = '';
songs.forEach(song => {
const card = createSongCard(song);
container.appendChild(card);
});
}
function createSongCard(song) {
const card = document.createElement('div');
card.className = 'song-card';
card.innerHTML = `
<div class="song-title">${song.title}</div>
<div class="song-artist">${song.artist_name}</div>
<div class="song-meta">
<span class="song-genre">${song.genre || 'Various'}</span>
<span class="song-mood">${song.mood || 'Various'}</span>
</div>
<div class="song-actions">
<button class="btn btn-primary" onclick="playSong(${song.id}, '${song.title}', '${song.artist_name}')">
▶ Play
</button>
${currentUser ? `
<button class="btn btn-secondary" onclick="likeSong(${song.id})">
❤ Like
</button>
` : ''}
</div>
`;
return card;
}
function playSong(id, title, artist) {
// In a real app, this would play audio
alert(`Now playing: ${title} by ${artist}`);
// Increment play count
fetch('api/play.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ song_id: id })
});
}
function likeSong(songId) {
fetch('api/like.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ song_id: songId })
})
.then(response => response.json())
.then(data => {
if (data.success) {
showMessage('Song liked!', 'success');
}
});
}
function showHome() {
document.getElementById('homeSection').style.display = 'block';
document.getElementById('recommendationsSection').style.display = 'none';
document.getElementById('likedSection').style.display = 'none';
document.getElementById('searchResultsSection').style.display = 'none';
}
function showRecommendations() {
if (!currentUser) {
showMessage('Please login to see recommendations', 'error');
return;
}
document.getElementById('homeSection').style.display = 'none';
document.getElementById('recommendationsSection').style.display = 'block';
document.getElementById('likedSection').style.display = 'none';
document.getElementById('searchResultsSection').style.display = 'none';
loadRecommendations();
}
function showLiked() {
if (!currentUser) {
showMessage('Please login to see liked songs', 'error');
return;
}
document.getElementById('homeSection').style.display = 'none';
document.getElementById('recommendationsSection').style.display = 'none';
document.getElementById('likedSection').style.display = 'block';
document.getElementById('searchResultsSection').style.display = 'none';
loadLikedSongs();
}
function showMessage(text, type) {
const msg = document.getElementById('message');
msg.className = `message ${type}`;
msg.textContent = text;
setTimeout(() => {
msg.style.display = 'none';
}, 3000);
}
// Close modals when clicking outside
window.onclick = function(event) {
if (event.target.classList.contains('modal')) {
hideModals();
}
}
</script>
</body>
</html>

Additional API Endpoints

api/check_auth.php

<?php
session_start();
header('Content-Type: application/json');
echo json_encode([
'logged_in' => isset($_SESSION['user_id']),
'user' => $_SESSION['username'] ?? null
]);
?>

api/logout.php

<?php
session_start();
session_destroy();
header('Content-Type: application/json');
echo json_encode(['success' => true]);
?>

api/popular_songs.php

<?php
require_once '../config.php';
header('Content-Type: application/json');
$stmt = $pdo->query("
SELECT s.*, a.name as artist_name 
FROM songs s
JOIN artists a ON s.artist_id = a.id
ORDER BY s.plays DESC
LIMIT 10
");
$songs = $stmt->fetchAll();
echo json_encode(['success' => true, 'songs' => $songs]);
?>

api/liked_songs.php

<?php
require_once '../config.php';
require_once '../User.php';
header('Content-Type: application/json');
if (!isset($_SESSION['user_id'])) {
echo json_encode(['success' => false, 'message' => 'Not logged in']);
exit;
}
$user = new User($pdo);
$songs = $user->getLikedSongs($_SESSION['user_id']);
echo json_encode(['success' => true, 'songs' => $songs]);
?>

api/play.php

<?php
require_once '../config.php';
header('Content-Type: application/json');
$data = json_decode(file_get_contents('php://input'), true);
$stmt = $pdo->prepare("UPDATE songs SET plays = plays + 1 WHERE id = ?");
$stmt->execute([$data['song_id']]);
echo json_encode(['success' => true]);
?>

PROJECT STRUCTURE

music-recommendation/
│
├── index.html              # Main frontend
├── config.php              # Database configuration
├── User.php                # User class
├── MusicRecommender.php    # Recommendation algorithm
│
├── api/
│   ├── login.php
│   ├── register.php
│   ├── logout.php
│   ├── check_auth.php
│   ├── recommendations.php
│   ├── like.php
│   ├── liked_songs.php
│   ├── search.php
│   ├── popular_songs.php
│   └── play.php
│
└── database/
└── schema.sql          # Database schema

INSTALLATION GUIDE

1. Setup Database

mysql -u root -p
CREATE DATABASE music_recommendation;
USE music_recommendation;
SOURCE database/schema.sql;

2. Configure Database

Edit config.php with your database credentials:

$host = 'localhost';
$dbname = 'music_recommendation';
$username = 'root';
$password = 'your_password';

3. Run the Application

  • Place files in your web server directory (e.g., htdocs for XAMPP)
  • Access via http://localhost/music-recommendation

ALGORITHM EXPLANATION

Content-Based Filtering Steps:

  1. User Profile Creation
  • Analyze user's liked songs
  • Extract genres, moods, artists
  • Calculate preference weights
  1. Similarity Calculation
   Score = (GenreMatch × 0.4) + (MoodMatch × 0.3) + (ArtistMatch × 0.3)
  1. Recommendation Generation
  • Compare all unliked songs with user profile
  • Sort by similarity score
  • Return top matches
  1. Cold Start Handling
  • If user has no likes, recommend popular songs
  • Ask for favorite genre during registration

FEATURES SUMMARY

✅ User Authentication - Register/Login system
✅ Content-Based Algorithm - Genre, mood, artist matching
✅ Song Search - Search by title, artist, genre
✅ Like/Unlike Songs - Build user preference profile
✅ Personalized Recommendations - Based on user taste
✅ Play Tracking - Popular songs based on plays
✅ Responsive Design - Works on all devices
✅ RESTful API - Clean separation of concerns

This concise implementation provides a complete music recommendation system with all core features while keeping the code minimal and easy to understand.

Category : SOURCE CODE

Leave a Reply

Your email address will not be published. Required fields are marked *


Macro Nepal Helper