Рабочий код в конце. В статье я показываю процесс, как размышлял и к каким решениям пришёл.
Задача: сделать аудио-отзывы в зеро-блоке Тильды. Сейчас нормального механизма с аудио-отзывами в тильде нет.
Пол-года газад назад я планировал переходить на Тильду, но из-за этого отказался — аудио-отзывы важная штука. Так же мне многие писали, что хотели бы добавить аудио-отзывы, чтобы было 2 кнопки — воспроизведение, пауза.
Обычные html-плееры нельзя будет свободно передвигать по зеро-блоку и из всегда нужно будет делать html-кодом, что ограничивает нас в дизайне.
Делаем 2 кнопки и добавляем управление ими.
Этот вариант подходит, если вы не хотите сильно ковыряться в коде, нужно будет только изначально добавить ссылки на отзывы. При удалении или добавлении добавлять или удалять 1 строчку.
Ограничения
- Нельзя добавлять data атрибуты
- Нельзя объединять в группы
Единственная возможно идентификации кастомных блоков — класс.
Имеем на старте
- Массив с аудио-записями
- Класс идентификации
- Список файлов на хостинге или в облаке
Делаем зеро-блок и находим две иконки
Задумка такая: кликаем на плей — иконка плей скрывается, показывается иконка паузы, аудио воспроизводится. Противоположный механизм с иконкой паузы.
Нашёл 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 класса:
- js-audio-[действие] — pause или play, для события
- js-audio-n-[номер] — чтобы ссылаться на нужное аудио
А суть метода такая:
- перебираем классы по классу js-audio-play,
- парсим все классы,
- разбираем на массив,
- перебираем и ищем класс с текстом js-audio-n,
- удаляем из него текст и оставляем номер
- номер ставим в дата-атрибут
Да, это геморрой, но проставлять номера автоматически мы не можем — Тильда сама решает какой куда поставить, а это возможная ошибка.
Отдельное событие клика будет брать из дата-атрибута номер и делать что-то с аудио.
Пошёл пробовать, но Тильда решила иначе, при добавлении второго класса через пробел он просто слипается.


Выкручиваемся снова
Номера и действия поставим в один класс, пропишем их элементам в зеро-блоке:
- 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")
}