构建一个显示音频对象列表的应用程序,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 对象上的播放按钮对应正确的声音?
最佳答案
使用 play({{sound.url}})
将 URL 作为参数传递给 play()
函数。
关于javascript - Howler JavaScript 库在 Django 模板中迭代音频对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45177581/