How to build a simple music player webpage using Django?

Question

I want to create a webpage where admin can add music from backend and users can play the song and add to favorite using Django.

I created a model for admin to add songs:

models.py

class Song(models.Model):
    album = models.ForeignKey(Album, on_delete=models.CASCADE)
    song_title = models.CharField(max_length=250)
    audio_file = models.FileField(default='')

    def __str__(self):
        return self.song_title

Now I want to create a view where the user can play the music

What you have tried so far? Show us some code. – Pedram Parsian Nov 15 '19 at 06:34 — Pedram Parsian, Nov 15 '19 at 06:34

score 2 · Answer 1 · answered Nov 15 '19 at 07:45

2

Django can't help you build "a music player". It is javascript which will help you create a player for the web (or HTML audio alternatively). Django can help you store the audio and send it for playing (I have not used the correct word here).

You can store an Audio file in your server, and store its path in the database (model) then a view can return an HTML template with the audio URL for playing. This is a very basic approach for just starting.

You can add a file from admin and then a view will grab its URL and then send it to the template to play.

answered Nov 15 '19 at 07:45

Faisal Manzer

2,089
3
14
34

Yes i am also want to share the same thing sir. I really appreciate your answer. – Manas Ranjan Pati Nov 15 '19 at 08:26
I want do do the same as you said but i want to take that music file from database and play it on my browse.. – Manas Ranjan Pati Nov 15 '19 at 08:27

Srijwal R · Answer 2 · 2019-11-15T09:28:06.710

Your question is so broad and hence the downvotes. Anyways, i will help with what i have done. If you are really looking for a simple music player, html audio tag will be helpful for you. For reference, this is a small snippet from the django template:

playlist_data.html:

                            {% for song in song_list %}
                            <tr>
                                <td>{{ song.song_title }}</td>
                                <td>{{ song.album.artist }}</td>
                                <td>
                                    <audio controls="controls">
                                        <source src="{{ song.audio_file.url }}" type="audio/ogg" />
                                        <source src="{{ song.audio_file.url }}" type="audio/mpeg" />
                                        <source src="{{ song.audio_file.url }}" type="audio/wav" />
                                      Your browser does not support the audio element.
                                      </audio>
                                </td>
                                <td>
                                    <a href="{% url 'music:detail' song.album.id %}">
                                        <img src="{{ song.album.album_logo.url }}" class="img-responsive" style="width: 20px; float: left; margin-right: 10px;" />
                                    </a>
                                    <a href="{% url 'music:detail' song.album.id %}">{{ song.album.album_title }}</a>
                                </td>
                                <td>
                                    <a href="{% url 'music:favorite' song.id %}" class="btn-favorite"><span class="glyphicon glyphicon-star {% if song.is_favorite %}active{% endif %}"></span></a>
                                </td>
                                <td>

                                </td>
                            </tr>
                            {% endfor %}

Let me know if you need any help.

Thank you brother i really appreciate it. Let me try – Manas Ranjan Pati Nov 15 '19 at 08:23 — Manas Ranjan Pati, Nov 15 '19 at 08:23
This tag made my work ready.... – Manas Ranjan Pati Nov 15 '19 at 09:12 — Manas Ranjan Pati, Nov 15 '19 at 09:12

How to build a simple music player webpage using Django?

2 Answers2