将音频添加到幻灯片放映

Question

我创建了一个带有幻灯片脚本的 html 网站。分别显示三张幻灯片，三张图片。

我希望它在我点击每张图片时播放不同的 mp3。我的问题是它在其中三个中重现相同的声音。

<div class="mySlides">
    <img onclick="play()" src="1.png">
    <audio id="audio" src="one.mp3" ></audio>
</div>

<div class="mySlides">
    <img onclick="play()" src="5.jpg">
    <audio id="audio" src="five.mp3" ></audio>
</div>

<div class="mySlides">
    <img onclick="play()" src="7.png">
    <audio id="audio" src="seven.mp3" ></audio>
</div>


<div onclick="plusDivs(-1)">Re</div>

<div onclick="plusDivs(1)">Av</div>



<script>

function play() {
    var audio = document.getElementById("audio"); audio.play(); 
}

</script>


<script>

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}

</script>

Answer 1

您的 DOM 中不能有多个具有相同 ID 的元素。

您可以定义一个 <audio id="audio"></audio> 元素，play(name) 函数将为该元素分配 src 属性并对其调用 .play()。

Answer 2

您遇到的问题是此代码多次出现

<audio id="audio

元素 ID 在页面上应该是唯一的。

修复它

<img onclick="play(1)" src="7.png">
<audio id="audio-1" src="seven.mp3" ></audio>

function play(nr) {
  var audio = document.getElementById("audio-"+nr);
  audio.play(); 
}

将音频添加到幻灯片放映

Add audio to slide show

html

javascript

slideshow