javascript - 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() 函数。