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

Задача: сделать аудио-отзывы Тильде. Сейчас нормального механизма с аудио-отзывами в тильде нет.

Пол-года газад назад я планировал переходить на Тильду, но из-за того, что нет аудио — отказался, аудио-отзывы важная штука. Так же мне многие писали, что хотели бы добавить аудио-отзывы, чтобы было 2 кнопки — воспроизведение, пауза.

Обычные html-плееры нельзя будет свободно передвигать по зеро-блоку и их всегда нужно будет делать html-кодом, что ограничивает нас в дизайне.

Решение: прячем все аудио-плееры, в дизайне оставляем 2 кнопки: плей, пауза. Связываем их через ссылку и некоторые изменения в коде.

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

Пошаговая инструкция

1 шаг — иконки

Находим две иконки для ваших отзывов. Должна быть иконка воспроизведения и паузы.

2 шаг — ставим ссылки

Кликаем по элементу ставим ссылку #js-audio-play-1.
То же самое делаем у иконки паузы, только ссылка #js-audio-pause-1.

1 — номер отзыва. Он важен, потому что номер связывает кнопки и аудио.

3 шаг — кладем иконки друг под друга

Показываться будет одна. Во время паузы или воспроизведения одна из иконок всегда будет скрыта. Выделяете две иконки и выравниваете с помощью инструментов тильды.

4 шаг — вставляете js и css код

Создаете блок T123 и вставляете туда код.

Для продвинутых: вы можете вставить css и js в общий код. А теги аудио разместить на конкретной странице.

Код

<!-- Аудиодорожки -->
<audio class="audio-review" data-audio="js-audio-1">
  <source src="https://dev-postnov.ru/wp-content/uploads/2020/09/whatsapp-ptt-2020-09-29-at-14.26.37.ogg" type="audio/ogg">
</audio>
<audio class="audio-review" data-audio="js-audio-2">
  <source src="https://drive.google.com/uc?&confirm=no_antivirus&id=1II5yBQB7RFyAq6qL9Di9HeWXv5jIKIag" type="audio/mpeg">
</audio>

<style>
   /* Скрываем стандартные аудио-плееры браузера */
   .audio-review {
      position: absolute;
      opacity: 0;
      top: -9999px;
   }

   /* Скрываем элементы управления аудио */
   .js-tn-elem-audio {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
   }

   /* Показываем активные элементы управления аудио */
   .js-tn-elem-audio.is-show {
      opacity: 1;
      pointer-events: all;
   }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script>
   $(document).ready(function() {
      // Инициализация элементов управления аудио
      initAudioControls();

      // Обработка кликов по кнопкам воспроизведения и паузы
      $("*[href*='js-audio-play-'], *[href*='js-audio-pause-']").on('click touchstart', function(e) {
         e.preventDefault();
         handleAudioControl($(this));
      });
   });

   function initAudioControls() {
      // Добавляем класс для всех элементов управления аудио
      $("*[href*='js-audio-play-'], *[href*='js-audio-pause-']").parent('.tn-elem').addClass('js-tn-elem-audio');

      // Показываем кнопки воспроизведения
      $("*[href*='js-audio-play-']").closest('.tn-elem').addClass('is-show');

      // Инициализация аудио элементов для iOS
      $('audio').each(function(){
         this.load();
      });
   }

   function handleAudioControl(element) {
      var href = element.attr('href');
      var numberOfAudio = href.charAt(href.length-1);
      var audioElement = $('audio[data-audio="js-audio-'+numberOfAudio+'"]')[0];

      if (href.indexOf('js-audio-play') > 0) {
         playAudio(audioElement, numberOfAudio);
      } else if (href.indexOf('js-audio-pause') > 0) {
         pauseAudio(audioElement, numberOfAudio);
      }
   }

   function playAudio(audioElement, numberOfAudio) {
      // Останавливаем все аудио
      $('audio[data-audio*="js-audio-"').each(function(i, item) {
         item.pause();
         item.currentTime = 0;
      });

      // Обновляем отображение кнопок
      updateButtonVisibility(numberOfAudio, true);

      // Воспроизводим выбранное аудио
      audioElement.play().catch(function(error) {
         console.error("Ошибка воспроизведения аудио:", error);
      });
   }

   function pauseAudio(audioElement, numberOfAudio) {
      // Останавливаем текущее аудио
      audioElement.pause();

      // Обновляем отображение кнопок
      updateButtonVisibility(numberOfAudio, false);
   }

   function updateButtonVisibility(numberOfAudio, isPlaying) {
      if (isPlaying) {
         // Скрываем все кнопки паузы и показываем все кнопки воспроизведения
         $("*[href*='js-audio-pause-']").closest('.tn-elem').removeClass('is-show');
         $("*[href*='js-audio-play-']").closest('.tn-elem').addClass('is-show');

         // Показываем кнопку паузы для текущего аудио и скрываем кнопку воспроизведения
         $("*[href*='js-audio-pause-"+numberOfAudio+"']").closest('.tn-elem').addClass('is-show');
         $("*[href*='js-audio-play-"+numberOfAudio+"']").closest('.tn-elem').removeClass('is-show');
      } else {
         // Показываем кнопку воспроизведения и скрываем кнопку паузы для текущего аудио
         $("*[href*='js-audio-play-"+numberOfAudio+"']").closest('.tn-elem').addClass('is-show');
         $("*[href*='js-audio-pause-"+numberOfAudio+"']").closest('.tn-elem').removeClass('is-show');
      }
   }
</script>

5 шаг — генерируем ссылки

Если файлы на сервере → Переходите к шагу 6

Если файлы отзывов на компьютере:
Закидываем аудио-файлы отзывов в гугл-диск. Нажимаем на файле правой кнопкой мыши, затем «Получить ссылку».

Копируете ссылку в поле ниже и после конвертации копируете нижнюю ссылку.

Вставьте ссылку на файл Google Drive или Google Docs:
Прямая ссылка на файл:

6 шаг — меняем код

1. Заходим в код
2. Копируем блок audio
3. Меняем номер
4. Добавляем ссылку из предыдущего шага
5. Меняем тип формата. Если файл mp3 — ставим mpeg, если ogg — ogg

Демонстрация:

7 шаг — добавляем еще отзывы

Если вы захотели добавить еще отзывов, вы должны:

1. Откопировать ваши иконки,
2. Заменить там номера в ссылке
3. Загрузить файл в гугл диск и конверировать ссылку
4. Откопировать блок аудио и проставить: номер, ссылку, тип файла
   

Как это работает на выходе

Если вы установили код себе — пожалуйста напишите в комментариях адрес сайта.

Чем я могу помочь

Для заказа пишите в телеграм — @danya_postnov

Полная интеграция — 5000₽

Созвонимся, обсудим на какую страницу нужно загрузить аудио. Вам нужно будет предоставить иконки, загрузить аудио на гугл-диск. Бонусом отправлю видео-инструкцию по добавлению новых отзывов.

Видео-урок — 1500₽

Отправлю видео-урок по интеграции. Сможете самостоятельно интегрировать и добавлять новые аудио.

Аудио уже установили

https://smart-union.ru/
http://prodazha-kvartir.tilda.ws/
https://egenalegke.ru/gk