Make your own music downloader website

#webdev #productivity #development #softwaredevelopment

How I Built My Music Downloader Site

Disclaimer: Services described in this post are in courtesies of
the Service providers, codes described in this post may be used only for educational purposes

Creating my music downloader site was an exciting and educational journey. I leveraged the Spotify API and Pytube to build a seamless experience for users who want to discover and download music. Here’s a detailed walkthrough of how I achieved this.
Backend Development

Integrating Spotify API

The first step was to integrate the Spotify API to fetch tracks and preview music. Setting up the Spotify component was straightforward:

Register your application: Sign up on the Spotify Developer Dashboard and create a new application to get your API credentials.
Get an access token: Use the credentials to request an access token. This token will authenticate your API requests.
Fetch tracks: Use the access token to query the Spotify API and fetch tracks based on user search inputs. Spotify's rich API provides detailed information including track previews, album art, and links to Spotify.

Here's a quick code snippet on how you can achieve this:

python

import requests

# Define the API endpoint and access token
SPOTIFY_API_URL = 'https://api.spotify.com/v1/search'
access_token = 'YOUR_ACCESS_TOKEN'

def search_spotify(query):
    headers = {
        'Authorization': f'Bearer {access_token}'
    }
    params = {
        'q': query,
        'type': 'track'
    }
    response = requests.get(SPOTIFY_API_URL, headers=headers, params=params)
    return response.json()

Creating the API Endpoint

Once I had the data from Spotify, I created an endpoint using Flask to serve this data to my frontend:

python

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/search', methods=['GET'])
def search():
    query = request.args.get('query')
    results = search_spotify(query)
    return jsonify(results)

if __name__ == '__main__':
    app.run(debug=True)

Implementing the Download Option with Pytube

The next challenge was to enable downloading the music. I used Pytube to fetch music from YouTube based on the track title and artist:

python

from pytube import YouTube
from io import BytesIO

def download_youtube_audio(query):
    # Find the YouTube video using the query
    yt = YouTube(f'https://www.youtube.com/results?search_query={query}')
    video = yt.streams.filter(only_audio=True).first()

    # Download the audio to a BytesIO buffer
    buffer = BytesIO()
    video.stream_to_buffer(buffer)
    buffer.seek(0)

    return buffer

By saving the audio in a buffer (using BytesIO), I was able to transport this buffer through the API endpoint, thus overcoming the challenge of file directory dependency.

Here’s how the Flask endpoint looked for handling the download:

python

@app.route('/download', methods=['GET'])
def download():
    track_title = request.args.get('track_title')
    artist = request.args.get('artist')
    query = f"{track_title} {artist}"
    audio_buffer = download_youtube_audio(query)

    return send_file(audio_buffer, as_attachment=True, download_name=f"{track_title}.mp3", mimetype='audio/mpeg')

Frontend Integration

On the Frontend, when a user searches for a music track, an API request is sent to my backend API which queries the Spotify API. The results, including music images, previews, and direct Spotify links, are displayed to the user.

When the user wants to download a track, they specify the track title and artist for accuracy. An API request is then sent to the backend, which uses Pytube to fetch and deliver the audio file.
Conclusion

Building this site was a rewarding experience, combining several technologies to provide a useful service. For a more detailed post-mortem, check out