Аудио-отзывы в Тильде: 6 шагов

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

Код работает только с прямыми ссылками на аудио-файлы. Проверяйте работу на компьютере и телефоне. Вы можете использовать хостинг Beget для хранения аудио-файлов.

Задача

Пол-года газад назад я планировал переходить на Тильду, но из-за того, что нет аудио — отказался, аудио-отзывы важная штука. Так же мне многие писали, что хотели бы добавить аудио-отзывы, чтобы было 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">
  <source src="https://dev-postnov.ru/for-remake/afanasev.mp3" type="audio/mpeg">
</audio>

<style>
  .audio-review {
    display: none;
  }
  
  .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"></script>
<script>
$(document).ready(function() {
  // Инициализация кнопок
  $('.js-audio-play-1, .js-audio-stop-1').closest('.tn-elem')
    .addClass('js-tn-elem-audio')
    .filter('.js-audio-play-1').closest('.tn-elem').addClass('is-show');

  // Обработчик кликов
  $(document).on('click', '.js-audio-play-1, .js-audio-stop-1', function(e) {
    e.preventDefault();
    const targetClass = $(this).attr('class');
    const number = 1; // Если несколько аудио, нужно извлечь номер из класса
    const audio = $(`audio[data-audio="js-audio-${number}"]`)[0];

    if(targetClass.includes('js-audio-play')) {
      playAudio(audio, number);
    } else {
      stopAudio(audio, number);
    }
  });
});

function playAudio(audioElement, number) {
  // Остановить все аудио
  $('.audio-review').each(function() {
    this.pause();
    this.currentTime = 0;
  });

  const playPromise = audioElement.play();
  
  if (playPromise !== undefined) {
    playPromise.then(() => {
      $(`.js-audio-stop-${number}`).closest('.tn-elem').addClass('is-show');
      $(`.js-audio-play-${number}`).closest('.tn-elem').removeClass('is-show');
    }).catch(error => {
      console.log('Автовоспроизведение заблокировано');
      $(`.js-audio-play-${number}`).closest('.tn-elem').addClass('is-show');
      $(`.js-audio-stop-${number}`).closest('.tn-elem').removeClass('is-show');
    });
  }
}

function stopAudio(audioElement, number) {
  audioElement.pause();
  audioElement.currentTime = 0;
  $(`.js-audio-play-${number}`).closest('.tn-elem').addClass('is-show');
  $(`.js-audio-stop-${number}`).closest('.tn-elem').removeClass('is-show');
}
</script>

5 шаг — обновляем код

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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