Repeater Field com Áudio mp3 (Exibir player no repeater)

Pesquisando muito na internet, encontrei uma integração com o plugin do Sonar, que não funcionou. Então criei uma forma de fazer sem o uso de plugins, apenas com jQuery.

Segue abaixo o Passo a Passo:

No seu Item Fotmat do widget Dynamic Repeater:

<a href=”#” data-toggle=”modal” data-target=”#audioModal” data-audio-src=”%nome-do-campo-repeater%”> Abrir Modal de Áudio </a>

Coloque em um widget HTML abaixo do Repeater:

<!-- Modal de áudio -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="modal fade" id="audioModal" tabindex="-1" role="dialog" aria-labelledby="audioModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="audioModalLabel">Áudio Modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <audio controls id="modalAudio">
          <source type="audio/mp3">
          Seu navegador não suporta a tag de áudio.
        </audio>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

<!-- Inclua o jQuery e o Popper.js, substitua as versões conforme necessário -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Inclua o Bootstrap JS, substitua a versão conforme necessário -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script>
  // Manipula a abertura do modal
  $('#audioModal').on('show.bs.modal', function (event) {
    var link = $(event.relatedTarget);
    var audioSrc = link.data('audio-src');
    var audioElement = document.getElementById('modalAudio');
    audioElement.src = audioSrc;
    audioElement.play();
  });

  // Manipula o fechamento do modal
  $('#audioModal').on('hide.bs.modal', function () {
    var audioElement = document.getElementById('modalAudio');
    audioElement.pause();
    audioElement.currentTime = 0;
  });

  // Bloqueia o download do áudio
  $('#audioModal').on('hidden.bs.modal', function () {
    var audioElement = document.getElementById('modalAudio');
    audioElement.removeAttribute('controls');
  });

  // Restaura os controles quando o modal é mostrado novamente
  $('#audioModal').on('shown.bs.modal', function () {
    var audioElement = document.getElementById('modalAudio');
    audioElement.setAttribute('controls', 'controls');
  });
</script>