Фоновый аудиоплеер с собственной кнопкой в Tilda

Инструкция

1. Создайте в Zero-Block два элемента со ссылками #playsound и #stopsound и расположите их друг на друге (#playsound должен быть выше в слоях).

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

2. Добавьте HTML‑блок T123 и поместите в него приведённый ниже код.

3. В код нужно вставить ссылку на аудиофайл в формате mp3.

Например, можно взять звук отсюда: zvukipro.com/ или с другого удобного сайта. Чтобы получить прямую ссылку на mp3 (а не скачивать файл), откройте инспектор и в консоли введите следующий код. Чтобы открыть консоль в Google Chrome, нажмите правой кнопкой мыши на сайте и в открывшемся меню выберите «Посмотреть код». В других браузерах этот способ может немного отличаться.

console.log(
[...document.querySelectorAll('a[href$=".mp3"], source[src$=".mp3"], audio[src$=".mp3"]')]
.map(el => el.href || el.src)
.filter(Boolean)
.join('\n')
);

На выходе получится список всех mp3 на странице, нужно просто скопировать нужную ссылку.

Внимание! Автор кода не несёт ответственности за возможные нарушения авторских прав при использовании музыки на сайте — вы действуете на свой страх и риск.

<!-- Скрипт для фонового аудиоплеера с собственной кнопкой в Tilda с сайта bulgkate.ru -->

<audio id="my_sound">
  <source src="https://zvukipro.com/uploads/files/2019-08/1564648516_4e615832840db72.mp3"> // Здесь можно поменять ссылку на свою
</audio>

<script>
$(function () {
  // Находим кнопки (оборачиваемые tilda-элементы) и сразу прячем stop
  const $playWrap = $("a[href='#playsound']").closest('.tn-elem').addClass('playbtnbg');
  const $stopWrap = $("a[href='#stopsound']").closest('.tn-elem').addClass('stopbtnbg').hide();

  const audio = document.getElementById('my_sound');

  // На всякий случай: если на странице есть другие <audio>, они останавливаются
  $('audio').on('play', function () {
    $('audio').not(this).each(function () {
      this.pause();
      try { this.currentTime = 0; } catch(e){}
    });
  });

  // Play
  $(document).on('click', "a[href='#playsound']", function (e) {
    e.preventDefault();
    try { audio.currentTime = 0; } catch(e){}
    audio.play();
    $playWrap.hide();
    $stopWrap.show();
  });

  // Stop
  $(document).on('click', "a[href='#stopsound']", function (e) {
    e.preventDefault();
    audio.pause();
    try { audio.currentTime = 0; } catch(e){}
    $stopWrap.hide();
    $playWrap.show();
  });

  // Когда трек закончился -- вернуть кнопку Play
  $("#my_sound").on('ended', function () {
    $stopWrap.hide();
    $playWrap.show();
  });
});
</script>

Как сделать фоновый аудиоплеер с собственной кнопкой в Tilda

Инструкция