如何为超链接图像添加声音，以便在单击时播放？ [英] How do I add sound to a hyperlinked image so it plays when clicked?

问题描述

下面是我如何设置超链接和图像。



所以当你点击图像我希望它发出点击声音我并且称它为click1.mp3



我只是想让它尽可能简单，因为它将通过所有机器在本地网络中使用使用Chrome浏览器。



我到处都看了，虽然我找到了各种方法让图像在按下时发出咔哒声，第二个我添加了超链接，点击图片需要我到我希望它去的地方，但按下它时不会发出咔哒声。刚刚感到沮丧，应该这么简单。



有人有什么想法吗？



谢谢提前



我的尝试：

Down below is how i have the hyperlink and image set up.

so when you click the image i want it to make the "click" sound which i have and called it "click1.mp3"

I just want this as simple as possible as its just going to be used in a local network via machines that all will be using chrome browsers.

I've looked everywhere and while i have found various methods to make the image play the click sound when pressed, the second i add the hyperlink, clicking the image takes me to where i want it to go, but it doesn't make the click sound upon pressing it. just been frustrated already , something that should be so simple.

anybody have any ideas?

thanks in advance

What I have tried:

<a href="www.wherever.com"></a>

推荐答案

点击超链接会使浏览器立即导航到链接的页面。您页面上的音频没有时间开始播放。



您需要延迟导航，直到音频播放完毕：

Clicking on a hyperlink will cause the browser to immediately navigate to the linked page. The audio on your page won't have time to start playing.

You'll need to delay the navigation until the audio has finished playing:

var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++){
    links[i].addEventListener("click", function(event){
        event.preventDefault();
        
        var url = this.href;
        var audio = document.getElementById("myAudio");
        audio.play().then(function(){
            audio.addEventListener("ended", function(){
                location.href = url;
            });
        });
    });
}

更新的演示 [ ^ ]

这是一个例子。 />


cp_image_click_sound - JSFiddle [ ^ ]

Here is an example.

cp_image_click_sound - JSFiddle[^]

这篇关于如何为超链接图像添加声音，以便在单击时播放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！