CODEWITHSUNDEEP
pythondjangoaudio
Kizl
Kizl

Reputation: 63

Django - Adding audio track to page

I am running localhost for developing a website, Apache2 is my web server and I built the site using Django. I am interested in adding audio tracks to specific pages. I had another page that I would display images and I took the same approach for trying to get the audio tracks to play but have not had any success. The URL appears to be correct, is there anything I need to do for FileFields vs ImageFields. I am aware that there are a few jQuery plug-ins for playing audio, but I am new to Django and Web development so I would like to get this basic version working before I move on to more advanced methods.

Relevant code:

models.py

from django.db import models

class Artist(models.Model):
    artistName = models.CharField(max_length = 30)
    artistInfo = models.TextField()

    def __unicode__(self):
        return self.artistName

class Album(models.Model):
    albumName = models.CharField(max_length = 30)
    artist = models.ForeignKey('Artist')
    date = models.DateTimeField('Release Date')
    albumInfo = models.TextField()
    albumArt = models.ImageField(upload_to="images/albumart/")

    def __unicode__(self):
        return self.albumName

  class Song(models.Model):
    songName = models.CharField(max_length = 30)
    artist = models.ForeignKey('Artist')
    album = models.ForeignKey('Album')
    audio_track = models.FileField(upload_to="songs/")

    def __unicode__(self):
        return self.songName

specificsong.html

{% extends "base.html" %}
{% block content %}
    <div id="singlesong">
        <p>Name: {{ song }}</p>
    <p>Artist: <a href="/artists/{{ song.artist }}/">{{ song.artist }}</a></p>
    <p>Album: <a href="/albums/{{ song.album }}/">{{ song.album }}</a></p>
    <p><audio controls="controls">
        <source src="{{ song.audio_track.url }}" type="audio/mpeg" />
    </audio>
</div>
{% endblock %}

views.py

from django.shortcuts import render_to_response
from django.template import RequestContext
from Radio.models import Song, Artist, Album

def SpecificSong(request, songname):
    song = Song.objects.get(songName = songname)
    context = {'song':song}
    return render_to_response('specificsong.html',context, context_instance=RequestContext(request))

urls.py

from django.conf.urls import patterns, include, url
from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
admin.autodiscover()

urlpatterns = patterns('',
    url(r'^admin/', include(admin.site.urls)),
    (r'^songs/$', 'Radio.views.SongsAll'),
    (r'^songs/(?P<songname>.*)/$', 'Radio.views.SpecificSong'),
    (r'^artists/(?P<artistname>.*)/$', 'Radio.views.SpecificArtist'),
    (r'^albums/(?P<albumname>.*)/$', 'Radio.views.SpecificAlbum'),
    (r'^register/$', 'listener.views.ListenerRegistration'),
    (r'^login/$', 'listener.views.LoginRequest'),
    (r'^logout/$', 'listener.views.LogoutRequest'), 
    (r'^resetpassword/passwordsent/$', 'django.contrib.auth.views.password_reset_done'),
    (r'^resetpassword/$', 'django.contrib.auth.views.password_reset'),
    (r'^reset/(?P<uidb36>[0-9A-Za-z]+)-(?P<token>.+)/$', 'django.contrib.auth.views.password_reset_confirm'),
    (r'^reset/done/$', 'django.contrib.auth.views.password_reset_complete'),
    (r'^profile/$', 'listener.views.Profile'),
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

settings.py (abbreviated)

MEDIA_ROOT = '/home/kyle/Downloads/Django-1.5.1/radioSite/media/'
MEDIA_URL = '/media/'

Upvotes: 3

Views: 4438

Answers (1)

Kizl
Kizl

Reputation: 63

For anyone who encounters this problem in the future, here is a list of steps that might solve your problem.

  1. Make sure the browser you are using supports the type of audio file you are using. (should be obvious, but I made this mistake)
  2. Make sure the permissions are what they should be for uploading to/from your setup.
  3. Confirm that the files, were properly uploaded to your media folder.
  4. Restart your server.

These steps helped me, hopefully it will help others.

Upvotes: 1

Related Questions