如何在Squarespace上的HTML中为音频文件设置数组？

Question

因此，我试图将一些自定义代码集成到Squarespace中，以便在单击图像时播放音频。我是Web开发人员的完整入门者，但我发现了一些HTML代码可以完成一张图像的工作。因此，当我单击图像时，它将播放音频。但是，这仅适用于一幅图像和一个音频文件。我假设如果要单击不同的图像，每个图像都播放自己的音频文件，则必须为图像文件和音频文件设置一个数组。我不确定这是否是正确的解决方案，但是如果是，我将如何在HTML中设置数组？谢谢！附件是我的代码的图片。

Answer 1

您可以做的是为图像提供一个data attribute，其中包含您要播放该图像的音频的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，其中包含我的一些随机声音文件。