As I delve into the world of website development on my own, I have encountered an interesting challenge. At the top of my webpage, I have embedded an audio file within a button. If the user chooses to mute the audio, the navigation links will remain silent. However, if the audio is not muted, it will play each time the user clicks on a navigation link before redirecting.
This is a snippet of my HTML code:
<a href="javascript:void(0)"><span id="facebook" onclick="playLink(this.id)">facebook</span></a>And here is a glimpse of my JavaScript code:
function playLink(id)
{
if(audio1.muted==true && id=="facebook")
{
window.location.href="https://www.facebook.com/?stype=lo&jlou=AfdeVGNZ2wkOmLR2JKTDO5TQxnERQXFcGGG5gBl3mieEaFJq-_rbey251tojJmP3jetCtclLhIYstrSsHlonyLoa&smuh=44193&lh=Ac_NtNBBW6lW7Cwg";
}
if(audio1.muted==false && id=="facebook")
{
audio1.play();
alert("1");
if(audio1.ended)
window.location.href="https://www.facebook.com/?stype=lo&jlou=AfdeVGNZ2wkOmLR2JKTDO5TQxnERQXFcGGG5gBl3mieEaFJq-_rbey251tojJmP3jetCtclLhIYstrSsHlonyLoa&smuh=44193&lh=Ac_NtNBBW6lW7Cwg";
}
}
The issue I am facing is that the background sound plays and navigates successfully only after adding an alert following audio1.play(). Without the alert, the sound plays but fails to navigate to the linked page. How can I resolve this?
Your assistance would be greatly appreciated. Thank you!
P.S: The "a" element is a part of the bootstrap nav bar.