添加音頻到幻燈片放映

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 

要素標識應在頁面上獨一無二的。

要修復它

<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()。