JavaScript-библиотека Howler, повторяющая аудио объекты в шаблоне Django

Question

При создании приложения, отображающего список аудиообъектов, аудиоэлемент HTML5 не совместим со всеми браузерами, поэтому я использую библиотеку Howler JS. Итак, мой шаблон Django выполняет итерацию по включенному элементу ul следующим образом:

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

sound_detail.html выглядит так:

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

и скрипт, который создает объект Howler:

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

Таким образом, шаблон выполняет итерацию по ul правильно, а URL-адрес delete удаляет правильный объект, но функция play() всегда вызывает первый аудиообъект в списке, независимо от того, из какого объекта ul вызывается функция. Как сделать так, чтобы кнопка воспроизведения на каждом объекте ul соответствовала правильному звучанию?

Answer 1

Использование play({{sound.url}}) передать URL-адрес в качестве параметра play() функция.