Программирование аудио-отзывов в зеро-блоке Тильды

Рабочий код в конце. В статье я показываю процесс, как размышлял и к каким решениям пришёл.

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

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

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

Делаем 2 кнопки и добавляем управление ими.

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

Ограничения

1. Нельзя добавлять data атрибуты
2. Нельзя объединять в группы

Единственная возможно идентификации кастомных блоков — класс.

Имеем на старте

1. Массив с аудио-записями
2. Класс идентификации
3. Список файлов на хостинге или в облаке

Делаем зеро-блок и находим две иконки

Задумка такая: кликаем на плей — иконка плей скрывается, показывается иконка паузы, аудио воспроизводится. Противоположный механизм с иконкой паузы.

Нашёл 2 иконки, скачал и перетащил в зеро-блок. Одну положил под другую.

Добавляем классы: кликаем правой кнопкой мыши на элемент и выбираем «Add CSS Class Name»

Справа появляется поле для ввода, вводим туда нужный класс. Я проставил всем иконкам паузы .js-audio-pause, а плеям .js-audio-play

Идём в css и пишем стили для скрытия, показ кнопки плей — добавляем класс is-show.

.js-audio-play.is-show,
.js-audio-pause.is-show{z-index: 1; opacity: 1;}

.js-audio-play,
.js-audio-pause {z-index: -1; opacity: 0;}

А в js делаем только одну строчку — показ кнопки плей, добавляем класс is-show

//Показываем плей
$('.js-audio-play').addClass('is-show');

Публикуем страницу и смотрим, что получилось.

Привязка через дата-атрибуты

Давайте посмотрим на наш массив с аудио, он выглядит так.

var audious = {
  0: new Audio("https://dev-postnov.ru/wp-content/uploads/2020/09/whatsapp-ptt-2020-09-29-at-14.26.37.ogg"),
  1: new Audio("https://dev-postnov.ru/wp-content/uploads/2020/09/whatsapp-ptt-2020-09-29-at-14.26.37.ogg")      
}

Мы можем обращаться к аудио — audious[0].play () и всё будет работать. Фактически их нет в html, но они работают.

Мне пришла идея присвоить всем кнопкам дата-атрибут: 0,1,2,3 и по ним обращаться к аудио в массиве.

Пробуем.

$('.js-audio-play, .js-audio-pause').each(function(index, item) {
    $(item).attr('data-audio', index); // присваиваю номер элемента в атрибут data-audio
});

Как и можно предположить, 2 плея и 2 паузы пронумеровались как 0,1,2,3. Нас это не устраивает, так как нам нужно что-то общее и у паузы, и у плея, чтобы они обращались к одному элементу в массиве.

Ноу проблем, разделяю на 2 цикла — отдельно нумеруются паузы, отдельно плеи.

$('.js-audio-play').each(function(index, item) {
    $(item).attr('data-audio', index);
});

$('.js-audio-pause').each(function(index, item) {
    $(item).attr('data-audio', index);
}); 

Идём смотреть на страницу.

Следи за руками, это плей с дата-аудио=0, сверху.

А это пауза с дата-аудио=0, снизу

Что имеем в итоге, Тильда сама определяет, как их перебирать, я пытался перетаскивать их в панели слоёв, но не прокатило.

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

Несколько классов для разделения действий

Ещё один вариант — сделать 2 класса:

1. js-audio-[действие] — pause или play, для события
2. js-audio-n-[номер] — чтобы ссылаться на нужное аудио

А суть метода такая:

1. перебираем классы по классу js-audio-play,
2. парсим все классы,
3. разбираем на массив,
4. перебираем и ищем класс с текстом js-audio-n,
5. удаляем из него текст и оставляем номер
6. номер ставим в дата-атрибут

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

Отдельное событие клика будет брать из дата-атрибута номер и делать что-то с аудио.

Пошёл пробовать, но Тильда решила иначе, при добавлении второго класса через пробел он просто слипается.

Выкручиваемся снова

Номера и действия поставим в один класс, пропишем их элементам в зеро-блоке:

• js-audio-0-play
• js-audio-0-pause

В js сделаем 2 цикла и будем формировать селекторы с 0 у пауз и плеев. На выходе будут:

• js-audio-0-play,
• js-audio-1-play,
• js-audio-0-pause,
• js-audio-1-pause

И так как номер динамический, но обращаемся мы к элементам, которые мы организовали — все должно пройти как по маслу.

Парсить слова паузы или плея в классе не нужно — цикла два и мы там же сможем сделать события.

Итоговый код

Css

/* любой элемент с началом класса js-audio  */
*[class*="js-audio"] {opacity: 0; pointer-events: none;}

/* любой элемент с началом класса js-audio и классом is-show*/
*[class*="js-audio"].is-show {opacity: 1; pointer-events: all;}

Javascript

<script>
    //Указываем количество отзывов
    var reviewAmount = 8;

    //Цикл отзывов
    for (let i = 1; i <= reviewAmount; i++) {
        $('.js-audio-'+i+'-play').addClass('is-show');
        
        $('.js-audio-'+i+'-play').click(function() {
            audious[i].play();
            $(this).removeClass('is-show');
            $('.js-audio-'+i+'-pause').addClass('is-show');
        });
        
        $('.js-audio-'+i+'-pause').click(function() {
            audious[i].pause();
            $(this).removeClass('is-show');
            $('.js-audio-'+i+'-play').addClass('is-show');
        })      
    }

    // Массив аудио
    var audious = {
      1: new Audio("https://dev-postnov.ru/wp-content/uploads/2020/09/whatsapp-ptt-2020-09-29-at-14.26.37.ogg"),
      2: new Audio("https://drive.google.com/uc?&confirm=no_antivirus&id=1II5yBQB7RFyAq6qL9Di9HeWXv5jIKIag")      
    }
</script>

Как хранить аудио?

Хранить аудио будем на гугл-диске. Просто закидывайте файлы в любую папку и копируйте ссылку на него.

Нажмите на файле правой кнопкой мыши и нажмите «Получить ссылку»

В открывшемся окне надо поставить доступ для всех, это второй пункт. Затем нажать на «Копировать ссылку» и нажать синюю кнопку «Готово».

Конструктор ссылки

Написал для вас конструктор ссылок.

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

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

Теперь осталось вставить новую ссылку в массив

var audious = {
  1: new Audio("https://dev-postnov.ru/wp-content/uploads/2020/09/whatsapp-ptt-2020-09-29-at-14.26.37.ogg"),
  2: new Audio("https://drive.google.com/uc?&confirm=no_antivirus&id=1II5yBQB7RFyAq6qL9Di9HeWXv5jIKIag")      
}