Howler JavaScript 库在 Django 模板中迭代音频对象答案

【问题标题】：Howler JavaScript library iterating audio objects in Django templateHowler JavaScript 库在 Django 模板中迭代音频对象
【发布时间】：2017-12-23 23:01:11
【问题描述】：

构建一个显示音频对象列表的应用程序，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 对象上的播放按钮对应正确的声音？

【问题讨论】：

标签： javascript python django howler.js

【解决方案1】：

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

【讨论】：

工作。谢谢！