I'd be happy to provide an example of how to build a basic music player using Django. However, it's worth noting that this is just one way to implement a music player, and there are many different approaches and libraries you can use depending on your specific needs and requirements.
Here's an example of how you might create a simple music player using Django:
Create a new Django project and app for the music player:
django-admin startproject musicplayer
cd musicplayer
django-admin startapp player
Create a model to store information about the songs in the player's database:
from django.db import models
# Create your models here.
class Song(models.Model):
title = models.CharField(max_length=255)
artist = models.CharField(max_length=255)
file = models.FileField(upload_to="songs/")
Now we will create the forms from which we will upload our songs. You have to make a file named forms.py inside your app directory.
from django import forms
from .models import Song
class SongForm(forms.ModelForm):
class Meta:
model = Song
fields = ("title", "artist", "file")
Now we will write the logic of our views so that we will show our form in frontend and show all our songs on the home page.
from django.shortcuts import render, redirect
from .models import Song
from .forms import SongForm
# Create your views here.
# this for form hanging
def upload(request):
if request.method == "POST":
form = SongForm(request.POST, request.FILES)
if form.is_valid():
form.save()
return redirect("index")
else:
form = SongForm()
return render(request, "player/upload.html", {"form": form})
# this is for showing all songs on the home page
def index(request):
songs = Song.objects.all()
return render(request, "player/index.html", {"songs": songs})
Now we will write the code for our templates
This is our base template, in this, we will add our CSS file.
templates/player/base.html
<!DOCTYPE html>
<html lang="en">
<head>
{% load static %}
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{% static 'css/player.css' %}">
{% block title %}
<title>Home</title>
{% endblock title %}
</head>
<header>
<nav>
<a href="{% url 'index' %}"><b>Abdulla Fajal</b></a>
<a href="{% url 'index' %}">Home</a>
<a href="{% url 'upload' %}">Upload</a>
</nav>
</header>
<body>
<main>
{% block content %}{% endblock %}
</main>
<footer>
<p>Copyright © 2023 My Music App</p>
</footer>
</body>
</html>
To add a CSS file, you have to create a folder in your app directory named static and create a subfolder named css, there you have to create a file named player.css.
static/css/player.css
/* Global styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #f1f1f1;
padding: 1em;
}
nav a {
color: #000;
text-decoration: none;
margin-right: 1em;
}
main {
padding: 1em;
}
footer {
background-color: #f1f1f1;
padding: 1em;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}
/* Audio player styles */
audio {
width: 60%;
margin-left: 20%;
margin-right: 20%;
}
/* Song title styles */
h2 {
margin-bottom: 0;
color: #333;
margin-left: 20%;
margin-right: 20%;
}
/* Artist name styles */
p {
margin-top: 0;
color: #999;
margin-left: 20%;
margin-right: 20%;
}
/* Playlist styles */
ul {
list-style: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
/* Upload form styles */
form {
margin: 20px 0;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"], input[type="file"] {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #545656;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
margin-left: 20%;
}
input[type="submit"]:hover {
background-color: #878a8a;
margin-left: 20%;
}
Our upload.html will be something like this. which will have our form.
templates/player/upload.html
{% extends "player/base.html" %}
{% block title %}
<title>Upload</title>
{% endblock title %}
{% block content %}
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Upload">
</form>
{% endblock %}
And our index.html would be something like this. where we will all be our songs.
templates/player/upload.html
{% include "player/base.html" %}
{% block title %}
<title>Home</title>
{% endblock title %}
{% block content %}
{% for song in songs %}
<h2>{{ song.title}}</h2>
<p>{{song.artist}}</p>
<audio controls>
<source src="{{song.file.url}}" type="audio/mpeg">
</audio>
{% endfor %}
{% endblock %}
Now we will create our URLs, for this, you have to create a file named urls.py in your app directory.
urls.py
from django.urls import path
from . import views
urlpatterns = [
path("", views.index, name="index"),
path("upload/", views.upload, name="upload"),
]
We will include these URLs in our project URLs.
musicplayer/urls.py
"""musicplayer URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/4.1/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path("admin/", admin.site.urls),
path("", include("player.urls")),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
You have to provide a media url and media root otherwise you will not be able to access your media. You have to do the same as we have added the path of your media to your URLs in the above.
You also have to mention this in your project settings.py
STATIC_ROOT = os.path.join(BASE_DIR, "static/")
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media/")
Your project is ready, you can host it on python any where also.
See the screenshot below.
home page
Upload page
If you have any problem then you can comment or you can message me here is my profile
We are social media platforms where you can write your thoughts in articles and chat with your friends and make new friends. We also provide courses for learning you can check our django course
