title: Django Audio Player
body: <p>I am working on a django music app and I have a model called Song.</p>
  
  <pre><code>class Song(models.Model):
      user        = models.ForeignKey(settings.AUTH_USER_MODEL)
      ...
      audiotrack  = models.FileField(upload_to=upload_image_path)
      likes       = models.ManyToManyField(settings.AUTH_USER_MODEL,blank=True,related_name='track_likes')
  </code></pre>
  
  <hr>
  
  <p>It gets passed in the template as an object list.</p>
  
  <pre><code>def list_view(request):
      songs = Song.objects.all()
      context = {
          'tracks_list' : songs
      }
      return render(request,"musica/list.html",context)
  </code></pre>
  
  <hr>
  
  <p>In the template, I for-loop through the objects and link them to the audio player.</p>
  
  <pre><code>&lt;audio id="player" src="{{ object.audiotrack.url }}"&gt;&lt;/audio&gt;
  &lt;button onclick="document.getElementById('player').play()"&gt;&lt;/button&gt; 
  </code></pre>
  
  <hr>
  
  <p>And this is the problem.</p>
  
  <p>The buttons remain the same, and play always one and the same track. </p>
  
  <p>I have a like button already for the songs, which is a ManyToMany Field.</p>
  
  <pre><code>class TrackLikeToggle(RedirectView):
      def get_redirect_url(self,*args,**kwargs):
          id = self.kwargs.get("id")
          obj = get_object_or_404(Song,id=id)
          url_ = obj.get_absolute_url()
          user = self.request.user
          if user.is_authenticated():
              if user in obj.likes.all():
                  obj.likes.remove(user)
              else:
                  obj.likes.add(user)
          return url_
  </code></pre>
  
  <p>Do I need to make something similar for the play button?
  A OneToOne Field called playing which toggles the audio player?</p>
  
  <p>But how is this going to work in the template, considering the player link:</p>
  
  <pre><code>&lt;button onclick="document.getElementById('player').play()"&gt;&lt;/button&gt; 
  </code></pre>
  
  <hr>
  
  <p>Thank you for any suggestions</p>