DEV Community

Cover image for Make your own music downloader website
JohnKagunda
JohnKagunda

Posted on

Make your own music downloader website

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

  1. 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()
Enter fullscreen mode Exit fullscreen mode
  1. 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)
Enter fullscreen mode Exit fullscreen mode
  1. 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
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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 my LinkedIn post.

You can also explore the site here.

Top comments (2)

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Might want to put a disclaimer on this post about not using it to infringe copyright

Collapse
 
rafaeljohn9 profile image
JohnKagunda

ooh sure thanks