Howler JavaScript 库在 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 并且 delete url 删除了正确的对象，但是 play() 函数总是调用列表中的第一个音频对象，无论该函数是哪个 ul 对象被称为从。如何让每个 ul 对象上的播放按钮对应正确的声音？

Answer 1

使用play({{sound.url}})将URL作为参数传递给play()函数。

Howler JavaScript library iterating audio objects in Django template