При создании приложения, которое отображает список аудиообъектов, аудиоэлемент 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-адрес удаления удаляет правильный объект, но функция play () всегда вызывает первый звуковой объект в списке, независимо от того, из какого объекта ul вызывается функция. Как я могу заставить кнопку воспроизведения на каждом объекте ul соответствовать правильному звуку?

1
Adam Yui 19 Июл 2017 в 00:41

1 ответ

Лучший ответ

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

1
Jared Nielsen 19 Июл 2017 в 00:44
Работал. Спасибо!
 – 
Adam Yui
19 Июл 2017 в 20:30