title: play <audio></audio> file in django template
body: <p>I've been struggling with this for so long that I'm bordering depression.</p>
  
  <p>I have a model called "Song" that looks like this.</p>
  
  <pre><code>from django.db import models
  
  class Song(models.Model):
      title = models.CharField(max_length=100)
      songfile = models.FileField()
      duration = models.FloatField()
      isPlaying = False
  
      def __str__(self):
          return self.title
  </code></pre>
  
  <p>When you upload an mp3 file from the index page, it creates an instance of this model and stores the file in myapp/songdir/ using this view:</p>
  
  <pre><code>def home(request):
  
      if request.method == 'POST':
          form = UploadForm(request.POST, request.FILES)
          if form.is_valid():
              song_title = request.POST.items()[1][1]
              song_address = 'upnplay/songdir/' + song_title + '.mp3'
              with open(song_address, 'wb+' ) as destination:
                  for chunk in request.FILES['file'].chunks():
                      destination.write(chunk)
                  audio = MP3(song_address)
                  c = Song(title = song_title, songfile = song_address, duration = audio.info.length)
                  c.save()
              return HttpResponseRedirect('')
      else:
          form = UploadForm()
      c = {'form': form}
      c.update(csrf(request))
      return render(request, 'index.html', {'form': form})
  </code></pre>
  
  <p>Then I have a template called "choosesong" that displays a list of songs that I get from the model instances saved:</p>
  
  <pre><code>{% extends 'index.html' %}
  
  
  {% block content %}
  &lt;div class="row"&gt;
      {% for song in playlist %}
          &lt;a href="playlist/{{song.title}}/"&gt;&lt;h3&gt;{{song.title}} -- {{song.duration}}&lt;/h3&gt;&lt;/a&gt;
      {% endfor %}
  &lt;/div&gt;
  
  {% endblock %}
  {% block form %}{% endblock %}
  </code></pre>
  
  <p>When I click on one of this links, I want a new template to be rendered, with a  element that plays the song whose name I clicked. The template that I render is this one:</p>
  
  <pre><code>{% extends 'index.html' %}
  
  {% block content %}
  
  &lt;div class='row'&gt;
      {{link}}
      &lt;audio controls&gt;
          &lt;source src="../../{{ link }}" type="audio/mpeg"&gt;
          Your browser does not support the audio element.
      &lt;/audio&gt;
  &lt;/div&gt;
  
  {% endblock %}
  </code></pre>
  
  <p>And the view I use to deliver it is the following:</p>
  
  <pre><code>def playAudioFile(request, songtitle):
      name = urllib.unquote(songtitle)
      song = get_object_or_404(Song, title=name )
      return render(request, 'playlist.html', {'link': song.songfile })
  </code></pre>
  
  <p>For some reason I can't get it to play the song inside the audio element and I don't know what else to try.</p>
  
  <p>Thank you beforehand.</p>