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

Код работает нестабильно. Аудио-дорожки могут не работать на ПК, в хроме на андройде и в сафари. Пока не нашел решение проблемы.

---

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

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

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

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

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

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

1 шаг — иконки

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

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

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

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

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

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

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

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

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

Код

<!-- Аудиодорожки -->
<audio controls 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 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>


<!-- КОД НИЖЕ НЕ ТРОГАТЬ, ИНАЧЕ МОГУ БЫТЬ ОШИБКИ В РАБОТЕ -->
<style>
   /* скрываем аудио-плееры браузера  */
   .audio-review {
      position: absolute;
      opacity: 0;
      top: -9999px;
   }   
   
   /* скрываем элементы с началом класса js-audio  */
   .js-tn-elem-audio {opacity: 0; pointer-events: none;}

   /* показываем элементы с началом класса js-audio и классом is-show*/
   .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() {
      $("*[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');
      
      // Клик по кнопке
      $("*[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-']").closest('.tn-elem').removeClass('is-show');
            
            // Все плеи показываются
            $("*[href*='js-audio-play-']").closest('.tn-elem').addClass('is-show');            
            
            // Плей скрывается
            $(this).closest('.tn-elem').removeClass('is-show');
            
            // Пауза текущего показывается
            $("*[href*='js-audio-pause-"+numberOfAudio+"']").closest('.tn-elem').addClass('is-show');
            
            // Воспроизводим текущее аудио
            $('audio[data-audio="js-audio-'+numberOfAudio+'"]')[0].play();
         }
         
         // Если нажата кнопка Pause — ставим паузу
         if ($(this).attr('href').indexOf('js-audio-pause') > 0) {
            // Пауза скрывается
            $(this).closest('.tn-elem').removeClass('is-show');
            
            // Плей текущего показывается
            $("*[href*='js-audio-play-"+numberOfAudio+"']").closest('.tn-elem').addClass('is-show');
            
            // Останавливает текущее аудио
            $('audio[data-audio="js-audio-'+numberOfAudio+'"]')[0].pause();
         }
      
      })
   });
</script>

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

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

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

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

Cсылку на файл в гугл-драйве
Прямая ссылка на файл ссылка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Консультация — 1000₽/час

Подскажу, если что-то не получается.

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

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