C# MVC динамическая загрузка аудиоинформации в цикле foreach

Question

Я пытаюсь использовать foreach l oop для воспроизведения звука src, сохраняя ссылку на звук. Это работает с использованием

 <audio controls>
    <source src="~/Sounds/@item.Irish_Tr" id="@item.ID" type="audio/wav" />
 </audio>

Однако, когда я пытаюсь использовать <button> или <image>, он использует первый звук как src для остальной части списка. Есть ли способ заставить этот метод работать как метод управления звуком?

<audio id="player">
    <source src="~/Sounds/@item.Irish_Tr" id="@item.ID" type="audio/wav" />
</audio>

<button onclick="document.getElementById('player').play()">Play</button>

Answer 1

<button onclick="document.getElementById('player').play()">Play</button>

Приведенный выше код не будет работать корректно при зацикливании, поскольку атрибут ID в HTML должен быть уникальным , поэтому ваш код воспроизводит только первый аудиоэлемент.

---

Чтобы исправить это, добавьте во время foreach счетчик, который вы будете увеличивать, и добавьте его к атрибуту ID.

@{
   // declare count variable before loop starts
   int count = 0;
}

foreach(var i in records){

   <audio id="player@count">
      <source src="~/Sounds/@item.Irish_Tr" id="@item.ID" type="audio/wav" />
   </audio>
   <button onclick="document.getElementById('player@count').play()">Play</button>

   @count++
}