Member 13860339 Ответов: 2

Как добавить звук к гиперссылочному изображению, чтобы оно воспроизводилось при нажатии?

Ниже показано, как я настроил гиперссылку и изображение.

поэтому, когда вы нажимаете на изображение, я хочу, чтобы оно издавало звук "щелчок", который у меня есть, и называл его "click1.mp3"

Я просто хочу, чтобы это было как можно проще, так как он просто будет использоваться в локальной сети через машины, которые все будут использовать браузеры chrome.

Я искал везде, и хотя я нашел различные методы, чтобы заставить изображение воспроизводить звук щелчка при нажатии, в ту же секунду, когда я добавляю гиперссылку, щелчок по изображению приводит меня туда, куда я хочу, но он не издает звук щелчка при нажатии на него. просто я уже был разочарован , что-то, что должно быть так просто.

у кого-нибудь есть идеи?

заранее спасибо

Что я уже пробовал:

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

2 Ответов

Рейтинг:
2

Richard Deeming

Нажатие на гиперссылку приведет к тому, что браузер немедленно перейдет на связанную страницу. Звук на Вашей странице не успеет начать воспроизводиться.

Вам нужно будет отложить навигацию до тех пор, пока звук не закончит воспроизведение:

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

Обновленная демо-версия[^]

Рейтинг:
0

Bryian Tan

Вот вам пример.

cp_image_click_sound - JSFiddle[^]

Richard Deeming

Ни один из этих примеров не содержит гиперссылки. :)

Bryian Tan

Ты прав. :/