Question

以下代码在未指定a标签中新页面的目的地时播放声音。但是，我也想在放置目的地时播放声音效果。如何实现？

<!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>

Answer 1

类似的事情-声音结束后重定向

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>

Answer 2

您可以

在链接点击时阻止页面更改（在点击事件处理程序中使用“ stoppropagation”）
播放声音并注意“完成”事件（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio）
当触发“完成”事件时，然后使用“ document.location”触发页面更改

页面更改时如何播放声音效果

2 个答案: