Аудио-отзывы в Тильде

Элементы для воспроизведения и паузы

Создаём два элемента: Play и Pause. Это могут быть ссылки, картинки, кнопки, что угодно.

Элементу Play ставим ссылку: #js-audio-play-1. Элементу Pause ставим ссылку: #js-audio-play-1.

Где 1 — номер аудио.

Код аудиоорожек

Этот код нам придётся менять, чтобы связать элементы с аудиодорожками.

/* Шаблон аудио */
<audio controls class="audio-review" data-audio="js-audio-(НОМЕР-АУДИОДОРОЖКИ)">
  <source src="(ССЫЛКА НА АУДИО)" type="audio/(ТИП АУДИО: ogg или mpeg)"> 
</audio>

/* Демо заполненного аудио */
<audio controls class="audio-review" data-audio="js-audio-2">
  <source src="https://drive.google.com/uc?&confirm=no_antivirus&id=1II5yBQB7RFyAq6qL9Di9HeWXv5jIKIag" type="audio/mpeg">
</audio>

Этот код нам придётся менять, чтобы связать элементы с аудиодорожками. У аудио-дорожки есть 3 параметра, которые нам надо заменить:

• data-параметр
• ссылка на аудио
• тип аудио

Код воспроизведения и паузы

Менять нельзя, иначе могут быть сбои в работе

<!-- Код не трогать, иначе могут быть сбои в работе -->
<style>
   /* скрываем аудио-плееры браузера  */
   .audio-review {
      position: absolute;
      opacity: 0;
      top: -9999px;
   }   
   
   /* скрываем элементы с началом класса js-audio  */
   *[href*="#js-audio"] {opacity: 0; pointer-events: none; position: absolute; top: -99999px;}

   /* показываем элементы с началом класса js-audio и классом is-show*/
   *[href*="#js-audio"].is-show {opacity: 1; pointer-events: all; position: static; top: unset;}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script>
   $(document).ready(function() {
      // Делаем видимыми кнопки плей.
      $("*[href*='js-audio-play-']").addClass('is-show');
      
      // Клик по кнопке
      $("*[href*='js-audio-play-'], *[href*='js-audio-pause-']").click(function(e) {
         e.preventDefault();
         
         var href = $(this).attr('href'),
             numberOfAudio = href.charAt(href.length-1); // получаю номер в конце href
         
         // Если нажата кнопка Play — останавливаем все аудио и воспроизводим текущее.
         if ($(this).attr('href').indexOf('js-audio-play') > 0) {
            // Останавливаю все аудио 
            $('audio[data-audio*="js-audio-"').each(function(i, item) {item.pause();});
            
            // Все паузы скрываются
            $("*[href*='js-audio-pause-']").removeClass('is-show');
            
            // Все плеи показываются
            $("*[href*='js-audio-play-']").addClass('is-show');            
            
            // Плей скрывается
            $(this).removeClass('is-show');
            
            // Пауза текущего показывается
            $("*[href*='js-audio-pause-"+numberOfAudio+"']").addClass('is-show');
            
            // Воспроизводим текущее аудио
            $('audio[data-audio="js-audio-'+numberOfAudio+'"]')[0].play();
         }
         
         // Если нажата кнопка Pause — ставим паузу
         if ($(this).attr('href').indexOf('js-audio-pause') > 0) {
            // Пауза скрывается
            $(this).removeClass('is-show');
            
            // Плей текущего показывается
            $("*[href*='js-audio-play-"+numberOfAudio+"']").addClass('is-show');
            
            // Останавливает текущее аудио
            $('audio[data-audio="js-audio-'+numberOfAudio+'"]')[0].pause();
         }
      
      })
   });
</script>