我正在尝试创建一个脚本,以便当您单击图片A时,图片B会出现,而当您再次单击时,图片A会出现,等等。它工作正常,但我想在您单击图片A时添加一个音乐,以便在显示图片B时播放。
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "https://www.shutterstock.com/image-photo/surreal-image-african-elephant-wearing-260nw-1365289022.jpg") {
document.getElementById("imgClickAndChange").src = "https://thumbs.dreamstime.com/b/belle-for%C3%AAt-tropicale-%C3%A0-l-itin%C3%A9raire-am%C3%A9nag%C3%A9-pour-amateurs-de-la-nature-de-ka-d-ang-36703721.jpg";
} else {
document.getElementById("imgClickAndChange").src = "https://www.shutterstock.com/image-photo/surreal-image-african-elephant-wearing-260nw-1365289022.jpg";
}
}
<p>
<img alt="" src="https://www.shutterstock.com/image-photo/surreal-image-african-elephant-wearing-260nw-1365289022.jpg" style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()" />
</p>
4条答案
按热度按时间biswetbf1#
下面是添加了audio元素的代码的更新版本:
我添加了一个id为“myAudio”的audio元素,该元素包含一个source元素,指向要播放的音频文件,我们还在changeImage()函数中添加了对当前图像源的检查,当图像源发生变化时,我们调用audio元素上的play()方法
b1payxdu2#
请记住,自2018年起,根据浏览器权限规则,音频和视频必须静音。
换句话说,除非用户单击播放器,否则无法播放声音。
https://developer.chrome.com/blog/autoplay/#web-audio
但你可能不想有一个可见的音频播放器,只是播放音乐,因为你喜欢,但你不能,除非它的可见和静音...
70gysomp3#
这是你想要的吗
这里我更新了你的代码,我使用了
HTML5
音频元素,并且在changeImage
函数中,我在每次图像变化时播放声音文件。n7taea2i4#
谢谢你的提问。我希望我的回答能帮助你达到你想要的产量。
Kindly check my code on codepen.