添加音频到幻灯片放映

我用幻灯片脚本创建了一个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>

来源

2017-04-25 pitin

你有问题是这样的代码出现，曾多次

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

来源

2017-04-25 20:04:47 MaxZoom

固定。非常感谢。 – pitin

很高兴我能帮忙，并欢迎来到Stack Overflow。 – MaxZoom

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

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

来源

2017-04-25 20:03:51 Vovan

技术上我们可以用相同的ID的几个要素，只是强烈不推荐 – niceman

@niceman，比这会不会是ID的更多:) – Vovan

嗯另一种方式，从技术上我们可以把'id = value'在具有相同'value'的多个元素上:)当然，它不会再是id，也没有人想要这个 – niceman

添加音频到幻灯片放映

回答

相关问题