Building a Python App for Music Streaming

Table of Contents

  1. Introduction
  2. Prerequisites
  3. Setup
  4. Creating the Music Streaming App
  5. Conclusion

Introduction

In this tutorial, we will walk through the process of building a Python app for music streaming. By the end of this tutorial, you will have a basic music streaming app that can play audio files and handle user interactions.

To follow this tutorial, you should have a basic understanding of Python programming. Knowledge of web development concepts such as HTML, CSS, and JavaScript is also beneficial but not required.

Prerequisites

Before starting the tutorial, make sure you have Python installed on your system. You can download the latest version of Python from the official website.

Setup

  1. Open your command line or terminal.
  2. Check if Python is installed by running the command python --version. You should see the version number if Python is installed correctly.
  3. Install the required Python libraries by running the following command: 
     pip install Flask pygame

    The Flask library will be used for building the web interface of the music streaming app, while pygame will handle the audio playback.

Creating the Music Streaming App

Step 1: Set up the project structure

  1. Create a new directory for your project.
  2. Inside the project directory, create a new file called app.py.
  3. Create another directory called static, which will hold the static files such as CSS and JavaScript.
  4. Inside the static directory, create a new directory called music, where we will store our audio files.

Step 2: Initialize Flask

  1. Open app.py in a text editor.
  2. Import the necessary modules: 
     from flask import Flask, render_template
 from flask import request, redirect, url_for
 import pygame
 import os
  3. Initialize Flask: 
     app = Flask(__name__)
 app.config['UPLOAD_FOLDER'] = 'static/music'
 pygame.mixer.init()

    Step 3: Create the routes

  4. Add the home route: 
     @app.route('/')
 def home():
     return render_template('index.html')
  5. Add the route for uploading audio files: 
     @app.route('/upload', methods=['GET', 'POST'])
 def upload():
     if request.method == 'POST':
         audio = request.files['audio']
         if audio:
             filename = audio.filename
             filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
             audio.save(filepath)
             return redirect(url_for('play', filename=filename))
     return render_template('upload.html')
  6. Add the route for playing audio files: 
     @app.route('/play/<filename>')
 def play(filename):
     pygame.mixer.music.load(os.path.join(app.config['UPLOAD_FOLDER'], filename))
     pygame.mixer.music.play()
     return render_template('play.html', filename=filename)

    Step 4: Create the HTML templates

  7. Inside the templates directory, create the following files:

  • index.html:

      <!DOCTYPE html>
  <html>
  <head>
      <title>Music Streaming App</title>
      <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
  </head>
  <body>
      <h1>Music Streaming App</h1>
      <form action="{{ url_for('upload') }}" method="POST" enctype="multipart/form-data">
          <input type="file" name="audio" accept=".mp3">
          <input type="submit" value="Upload">
      </form>
  </body>
  </html>
  • upload.html: 
    	
  <!DOCTYPE html>
  <html>
  <head>
      <title>Music Streaming App - Upload</title>
      <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
  </head>
  <body>
      <h1>Upload Audio</h1>
      <form action="{{ url_for('upload') }}" method="POST" enctype="multipart/form-data">
          <input type="file" name="audio" accept=".mp3">
          <input type="submit" value="Upload">
      </form>
  </body>
  </html>
  • play.html: 
    	
  <!DOCTYPE html>
  <html>
  <head>
      <title>Music Streaming App - Play</title>
      <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
      <script src="{{ url_for('static', filename='script.js') }}"></script>
  </head>
  <body>
      <h1>Now Playing: {{ filename }}</h1>
      <button onclick="stopMusic()">Stop</button>
  </body>
  </html>
	

      2. Inside the `static` directory, create a file called `style.css`:   ```css   body {
  font-family: Arial, sans-serif;
  text-align: center;   }

    h1 { margin: 20px 0; }

    input[type=”file”], input[type=”submit”], button { margin: 10px; }

          3. Inside the `static` directory, create a file called `script.js`:
  ```javascript
  function stopMusic() {
      var audio = new Audio();
      audio.pause();
  }

    Step 5: Run the app

  1. Save all the files.
  2. In the command line or terminal, navigate to the project directory.
  3. Run the app using the command python app.py.
  4. Open a web browser and go to http://localhost:5000.
  5. You should see the home page of the music streaming app.
  6. Try uploading an audio file and click on the “Play” button to listen to the uploaded audio.

Conclusion

In this tutorial, we have built a basic music streaming app using Python and Flask. We learned how to set up a Flask project, create routes for handling user requests, and implement audio playback using the pygame library. By extending this app, you can add more features such as playlists, user authentication, and search functionality. Happy coding!

Published:

Related Articles