Howler JavaScript library iterating audio objects in Django template

Question

Building an app that displays a list of audio objects, the HTML5 audio element is not compatible across all browsers, so I'm using the Howler JS library. So, my Django template is iterating over an included ul element like this:

{% for obj in instance.sounds_set.all %}
    {% include 'sound_detail.html' with sound=obj %}    
{% endfor %}

the sound_detail.html looks like this:

<ul><div>
<a onclick="play()">Play</a>
<a href="/{{sound.id}}/delete/">Delete</a>
</div>
</ul>

and the script which creates the Howler object:

function play(){
    var sound = new Howl({
        src:['{{obj.sound.url}}'],
        volume: 0.5,
            });
    sound.play();}

So, the template iterates over the ul correctly and the delete url deletes the correct object, but the play() function always calls the first audio object in the list, regardless of which ul object the function is called from. How can I get the play button on each ul object to correspond to the correct sound?

Answer 1

Use play({{sound.url}}) to pass the URL as a parameter to the play() function.