how to make the sound effect play when page changes
Question
the code below plays the sound when the destination to a new page in the a tags is not given. However I would like to have the sound effect play when the destination is put in as well. how can this be achieved?
<!DOCTYPE html>
<html>
<head>
<style>
nav#nav1{ margin-top: 24px; }
nav#nav1 > a{ background:#B9E1FF; color:#000; padding:10px; text-
decoration:none; border-radius:5px; font-family:"Arial Black", Gadget,
sans-serif; }
nav#nav1 > a:hover{ background: #BBEA00; }
nav#nav1 > a:active{ background: #EEFFA8; }
</style>
<script>
var bleep = new Audio();
bleep.src = 'bleep.mp3';
</script>
</head>
<body>
<nav id="nav1">
<a href="file2.html" onmousedown="bleep.play()">page1</a>
<a href="#" onmousedown="bleep.play()">page2</a>
<a href="#" onmousedown="bleep.play()">Services</a>
<a href="#" onmousedown="bleep.play()">Contact</a>
</nav>
</body>
</html>
2 answers
solution1
0 2019-04-26 09:54:26
Something like this - redirect when the sound has finished
var currentLink = ""; window.addEventListener("load", () => { document.getElementById("nav1").addEventListener("click", (e) => { console.log(e.target.tagName) if (e.target.tagName.toUpperCase() == "A") { e.preventDefault(); // cancel link curreLink = e.target.href; bleep.play(); } }); }); var bleep = new Audio(); bleep.addEventListener("ended", () => { location = currentLink; }); bleep.src = 'https://cdnjs.cloudflare.com/ajax/libs/ion-sound/3.0.7/sounds/door_bell.mp3';
nav#nav1 { margin-top: 24px; } nav#nav1>a { background: #B9E1FF; color: #000; padding: 10px; text- decoration: none; border-radius: 5px; font-family: "Arial Black", Gadget, sans-serif; } nav#nav1>a:hover { background: #BBEA00; } nav#nav1>a:active { background: #EEFFA8; }
<nav id="nav1"> <a href="file2.html">page1</a> <a href="#">page2</a> <a href="#">Services</a> <a href="#">Contact</a> </nav>
solution2
0 2019-04-26 10:00:07
You could
block the page change on link click (using "stoppropagation" in click event handler)
play the sound and watch for the "complete" event ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio )
when "complete" event is triggered, then fire the page change using "document.location"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.