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

你遇到的问题是这段代码出现的时间超过一次

<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(); 
}

Answer 2

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

您可以定义一个<audio id="audio"></audio>元素，play(name)功能会将src属性分配给此商品并在其上调用.play()。

添加音频到幻灯片放映

2 个答案: