Music discovery websites continue to be popular in 2026. Many developers want to build platforms that allow users to search songs, browse artists, view album artwork, and listen to preview clips directly from Spotify.
Spotify provides an official API that makes this possible without violating copyright rules or Spotify’s terms of service. Using the Spotify Web API, developers can legally access music metadata, artist information, playlists, album artwork, and available audio previews.
In this complete tutorial, you’ll learn how to build a professional Spotify Music Search & Preview website using:
- HTML
- CSS
- JavaScript
- Node.js
- Spotify Web API
- Ubuntu VPS
- Nginx
- SSL (Let’s Encrypt)
By the end of this guide, you’ll have a fully working music search website hosted on your own VPS.
What We Are Building
The website will allow users to:
- Search Spotify songs
- View album artwork
- See artist names
- View album details
- Listen to available preview clips
- Open songs directly in Spotify
Features:
✓ Responsive Design
✓ Spotify API Integration
✓ Search Functionality
✓ Audio Preview Player
✓ Modern UI
✓ VPS Deployment
✓ HTTPS Security
Prerequisites
Before starting, you’ll need:
- Spotify Developer Account
- Ubuntu VPS
- Node.js Installed
- Basic HTML Knowledge
- Domain Name (Optional)
Create Spotify Developer Application
Visit Spotify Developer Dashboard:
https://developer.spotify.com
Login using your Spotify account.
Create a new application.
Spotify will provide:
- Client ID
- Client Secret
Keep these credentials secure.
Project Structure
spotify-search/
├── public/
│ ├── index.html
│ ├── style.css
│ └── app.js
│
├── server.js
├── package.json
└── .env
Initialize Node Project
Create project folder:
mkdir spotify-search
cd spotify-search
Initialize npm:
npm init -y
Install Dependencies
npm install express axios dotenv cors
Package purposes:
- Express = Web Server
- Axios = API Requests
- Dotenv = Environment Variables
- CORS = Browser Access
Create Environment File
Create:
.env
Add:
CLIENT_ID=YOUR_SPOTIFY_CLIENT_ID
CLIENT_SECRET=YOUR_SPOTIFY_CLIENT_SECRET
Never upload this file publicly.
Create HTML Interface
Create:
public/index.html
<!DOCTYPE html>
<html>
<head>
<title>Spotify Search</title>
<link rel="stylesheet"
href="style.css">
</head>
<body>
<div class="container">
<h1>Spotify Music Search</h1>
<div class="search-box">
<input
type="text"
id="searchInput"
placeholder="Search songs">
<button onclick="searchSongs()">
Search
</button>
</div>
<div id="results"></div>
</div>
<script src="app.js"></script>
</body>
</html>
Design Modern UI with CSS
Create:
public/style.css
body{
background:#121212;
font-family:Arial;
color:white;
margin:0;
}
.container{
max-width:1200px;
margin:auto;
padding:20px;
}
h1{
text-align:center;
}
.search-box{
display:flex;
justify-content:center;
gap:10px;
}
input{
width:60%;
padding:12px;
border:none;
border-radius:5px;
}
button{
padding:12px 25px;
cursor:pointer;
border:none;
border-radius:5px;
}
#results{
display:grid;
grid-template-columns:
repeat(auto-fill,minmax(250px,1fr));
gap:20px;
margin-top:30px;
}
.card{
background:#1e1e1e;
padding:15px;
border-radius:10px;
}
.card img{
width:100%;
border-radius:10px;
}
audio{
width:100%;
margin-top:10px;
}
Create Backend Server
Create:
server.js
require("dotenv").config();
const express = require("express");
const axios = require("axios");
const cors = require("cors");
const app = express();
app.use(cors());
app.use(express.static("public"));
let accessToken = "";
async function getToken(){
const response =
await axios.post(
"https://accounts.spotify.com/api/token",
"grant_type=client_credentials",
{
headers:{
"Content-Type":
"application/x-www-form-urlencoded"
},
auth:{
username:
process.env.CLIENT_ID,
password:
process.env.CLIENT_SECRET
}
}
);
accessToken =
response.data.access_token;
}
getToken();
app.get("/search",
async(req,res)=>{
const q = req.query.q;
try{
const response =
await axios.get(
"https://api.spotify.com/v1/search",
{
params:{
q,
type:"track",
limit:20
},
headers:{
Authorization:
`Bearer ${accessToken}`
}
}
);
res.json(response.data);
}catch(error){
res.status(500)
.send(error.message);
}
});
app.listen(3000,()=>{
console.log(
"Server Running"
);
});
Create Frontend Search Logic
Create:
public/app.js
async function searchSongs(){
const query =
document.getElementById(
"searchInput"
).value;
const response =
await fetch(
`/search?q=${query}`
);
const data =
await response.json();
let html = "";
data.tracks.items.forEach(
track=>{
html += `
<div class="card">
<img src="${
track.album.images[0].url
}">
<h3>${track.name}</h3>
<p>
${track.artists[0].name}
</p>
<audio controls>
<source
src="${track.preview_url}">
</audio>
<br><br>
<a
target="_blank"
href="${track.external_urls.spotify}">
Open In Spotify
</a>
</div>
`;
});
document.getElementById(
"results"
).innerHTML = html;
}
Run the Website Locally
node server.js
Open:
http://localhost:3000
Search for any song.
You should now see:
- Album artwork
- Song title
- Artist name
- Preview player
- Spotify link
Deploy on Ubuntu VPS
Update server:
sudo apt update
sudo apt upgrade -y
Install Node.js
curl -fsSL
https://deb.nodesource.com/setup_22.x
| sudo -E bash -
sudo apt install nodejs -y
Upload Project Files
Using SCP:
scp -r spotify-search
root@SERVER_IP:/var/www/
Install PM2
PM2 keeps your application online.
npm install -g pm2
Start app:
pm2 start server.js
Enable startup:
pm2 startup
pm2 save
Install Nginx
sudo apt install nginx -y
Configure Nginx
server {
listen 80;
server_name
yourdomain.com;
location / {
proxy_pass
http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header
X-Real-IP $remote_addr;
}
}
Enable Website
sudo ln -s
/etc/nginx/sites-available/spotify
/etc/nginx/sites-enabled/
Restart:
sudo systemctl restart nginx
Enable HTTPS SSL
Install Certbot:
sudo apt install certbot
python3-certbot-nginx
Generate SSL:
sudo certbot --nginx
Follow prompts.
Your website will become:
https://yourdomain.com
SEO Optimization Tips
- Add Meta Descriptions
- Create XML Sitemap
- Optimize Images
- Enable Compression
- Use HTTPS
- Add Open Graph Tags
- Use Structured Data
Security Best Practices
- Never expose Client Secret
- Store secrets in .env
- Enable HTTPS
- Rate-limit API requests
- Use firewall protection
- Keep Node packages updated
Possible Future Features
- User Accounts
- Playlists
- Favorite Songs
- Dark/Light Theme
- Artist Pages
- Genre Filters
- Trending Songs
- Search History
Final Verdict
Building a Spotify Music Search & Preview website is an excellent project for learning API integration, frontend development, backend development, and VPS deployment. By combining HTML, CSS, JavaScript, Node.js, and Spotify’s official API, you can create a professional music discovery platform that remains fully compliant with Spotify’s policies while delivering a great user experience.
