Javascript 播放链接上的声音，然后单击重定向

我有以下几点：

var links = document.getElementsByClassName('swoosh'),
        audio = document.getElementById('a-on-click'),
    clickHandler = function () {
        audio.play();
    }
;

for (var i in links) {
    links[i].addEventListener('click', clickHandler);
}

对于以下HTML：

<a href="#" class="swoosh">Link 1</a>
<a href="#">Link 2</a>
<a href="#" class="swoosh">Link 3</a>

<audio id="a-on-click">
          <source src="https://sporedev.ro/pleiade/sounds/swoosh-enter.mp3" type="audio/mpeg">
</audio>

var links=document.getElementsByClassName（'swoosh'），
audio=document.getElementById（'a-on-click'），
clickHandler=函数（事件）{
event.preventDefault（）；
audio.addEventListener（'end'，function（）{
window.location=event.target.href；
});
音频播放（）；
};
for（链接中的变量i）{
typeof i=='Number'&&links[i]。addEventListener（'click'，clickHandler）；
}
使用
事件.preventDefault（）
在
clickHandler
中，它将阻止该特定类链接的默认行为：


var links=document.getElementsByClassName（'swoosh'），
audio=document.getElementById（'a-on-click'），
clickHandler=函数（事件）{
event.preventDefault（）；
audio.addEventListener（'end'，function（）{
window.location=event.target.href；
});
音频播放（）；
};
for（链接中的变量i）{
typeof i=='Number'&&links[i]。addEventListener（'click'，clickHandler）；
}

拉胡尔得到了；然后，等待音频结束，然后导航


var links=document.getElementsByClassName（'swoosh'），
audio=document.getElementById（'a-on-click'），
clickHandler=函数（事件）{
event.preventDefault（）；
audio.addEventListener（'end'，function（）{
window.location.href=event.target.href；
})
音频播放（）；
};
for（链接中的变量i）{
链接[i].addEventListener（'click'，clickHandler）；
}

拉胡尔得到了；然后，等待音频结束，然后导航


var links=document.getElementsByClassName（'swoosh'），
audio=document.getElementById（'a-on-click'），
clickHandler=函数（事件）{
event.preventDefault（）；
audio.addEventListener（'end'，function（）{
window.location.href=event.target.href；
})
音频播放（）；
};
for（链接中的变量i）{
链接[i].addEventListener（'click'，clickHandler）；
}
要防止即时点击效果，请在监听器中使用其中一个

event.preventDefault（）| | event.stopPropagation（）

播放完声音后，为声音结束时添加事件侦听器以更改当前窗口的位置

window.location=event.target.href


var links=document.getElementsByClassName（'swoosh'），
audio=document.getElementById（'a-on-click'），
clickHandler=函数（事件）{
event.preventDefault（）；
event.stopPropagation（）；
音频播放（）；
audio.addEventListener（'end'，function（）{
window.location=event.target.href；
})
};
对于（变量i=0；i

要防止即时点击效果，请在监听器中使用其中一个

event.preventDefault（）| | event.stopPropagation（）

播放完声音后，为声音结束时添加事件侦听器以更改当前窗口的位置

window.location=event.target.href


var links=document.getElementsByClassName（'swoosh'），
audio=document.getElementById（'a-on-click'），
clickHandler=函数（事件）{
event.preventDefault（）；
event.stopPropagation（）；
音频播放（）；
audio.addEventListener（'end'，function（）{
window.location=event.target.href；
})
};
对于（变量i=0；i


对不起，这条评论是写给拉胡尔的。：）抱歉，此评论是针对Rahul的。：）两个答案都抛出了一个未捕获的类型错误：links[i]。addEventListener不是一个函数”。在我的live应用程序中，你的效果更好，更接近我需要的内容，但不幸的是，在声音播放完毕后，它将此操作重定向到“example.com/undefined”“并显示一个404，而不是重定向到链接中指定的页面。@检查我的更新代码，我在for循环中添加了一个检查
链接[I]
。”。这将解决您提到的第一个错误。我不清楚你的第二个错误。有一个变量没有您认为它具有的值，因此它在链接的末尾给出了未定义的值。你能提供相关的代码来重现这个问题吗？不知道我能提供什么代码。你可以在这里查看：sporedev.ro/pleiade/hol.html。单击文本为“Mayași Asterope”的向右箭头，您将看到重定向将带您到domain.com/undefined，而不是我的实际链接目标。@如果您现在似乎已经解决了问题，它将在您的站点中运行。我的第二次编辑是不正确的事实上，检查需要的类型的iWeird。我仍然不认为它工作，我一直在尝试你的脚本和修改，所以我不知道什么工作。当您现在单击向右箭头时，它不会将您带到404？两个答案都会抛出一个未捕获的类型错误：links[i]。addEventListener不是一个函数”。在我的live应用程序中，您的效果更好，更接近我需要的，但不幸的是，在声音播放完毕后，它会将其重定向到“example.com/undefined”“并显示一个404，而不是重定向到链接中指定的页面。@检查我的更新代码，我在for循环中添加了一个检查
链接[I]
。”。这将解决您提到的第一个错误。我不清楚你的第二个错误。有一个变量没有您认为它具有的值，因此它在链接的末尾给出了未定义的值。你能提供相关的代码来重现这个问题吗？不知道我能提供什么代码。你可以在这里查看：sporedev.ro/pleiade/hol.html。点击