Как настроить массив для аудиофайлов в HTML на Squarespace? - PullRequest
Новая
       13

Как настроить массив для аудиофайлов в HTML на Squarespace?

0 голосов
/ 03 июня 2019

Поэтому я пытаюсь интегрировать некоторый пользовательский код в Squarespace, чтобы воспроизводить звук при нажатии на изображение. Я начинающий веб-разработчик, но нашел код HTML, который сделал работу для одного изображения. Поэтому, когда я нажимаю на изображение, оно воспроизводит звук. Однако это работает только для одного изображения и для одного аудиофайла. Я предполагаю, что если я хочу щелкнуть по разным изображениям, каждое из которых воспроизводит свой собственный аудиофайл, мне придется настроить массив как для файлов изображений, так и для аудиофайлов. Я не уверен, что это правильное решение, но если это так, как бы я настроить массив в HTML? Спасибо! Прикрепленное изображение моего кода.

image here

1 Ответ

0 голосов
/ 04 июня 2019

Что вы можете сделать, это присвоить изображениям атрибут данных , содержащий URL / имя файла для аудио, которое вы хотите, чтобы это изображение воспроизводило, и написать функцию, которая переключает источник на один аудиоэлементкогда изображение щелкнуло.Что-то вроде: 

<img class="audio-img" data-audio="path/to/myfile1.mp3"/>
<img class="audio-img" data-audio="path/to/myfile2.mp3"/>
<img class="audio-img" data-audio="path/to/myfile3.mp3"/>
<audio id="audio" src=""/>

А затем напишите функцию, чтобы получить этот звук, воспроизвести его и прикрепить к изображениям: 

function playAudio(event) {
  const audio = document.getElementById('audio');
  const url = event.target.getAttribute('data-audio'); 
  audio.src = url;
  audio.load();
  audio.play();
}

const images = document.getElementsByClassName('audio-img');

for (let i = 0; i < images.length; i++) {
  images[i].addEventListener("click", playAudio);
}

Вот Codepen снекоторые случайные звуковые файлы, которые у меня были.

...