Question

我在网站上有一个javascript效果，当您翻转任何导航栏链接时，播放音频剪辑。它已经运行良好，唯一的问题是我只想在任何时候播放一个音频片段，例如，如果你一次翻转几个导航链接，几个音频片段一次关闭，我如何调整代码所以即使您碰巧碰到了几个音频片段，也只能播放一个音频片段？我已粘贴在当前代码中，谢谢

<ul id="nav">
    <li><a href="index.html" onmouseover="playclip1();">Home</a></li>
    <li><a href="shop.html" onmouseover="playclip2();">Shop</a></li>
    <li><a href="about.html" onmouseover="playclip3();">About</a></li>
    <li><a href="invest.html" onmouseover="playclip6();">Invest</a></li>
    <li><a href="contact.html" onmouseover="playclip4();">Contact</a></li>
    <li><a href="projects.html" onmouseover="playclip5();">Projects</a></li>
    <li><a href="links.html" onmouseover="playclip();">Links</a></li>
</ul>
</div>

<audio id="soundclip2">
    <source src="soundeffects/gunshot.mp3">
    <source src="soundeffects/gunshot.ogg">
</audio>
<audio id="soundclip1">
    <source src="soundeffects/dogs1.mp3">
    <source src="soundeffects/dogs1.ogg">
</audio>

function playclip() {
  if (navigator.appName == "Microsoft Internet Explorer" &&
    (navigator.appVersion.indexOf("MSIE 7") != -1) ||
    (navigator.appVersion.indexOf("MSIE 8") != -1)) {
    if (document.all) {
      document.all.sound.src = "dogs1.mp3";
    }
  }

  else {
    {
      var audio = document.getElementById("soundclip1"); audio.play();
      audio.play();
    }
  }
}


function playclip1() {
  if (navigator.appName == "Microsoft Internet Explorer" &&
    (navigator.appVersion.indexOf("MSIE 7") != -1) ||
    (navigator.appVersion.indexOf("MSIE 8") != -1)) {
    if (document.all) {
      document.all.sound.src = "gunshot.mp3";
    }
  }

  else {
    {
      var audio = document.getElementById("soundclip2"); audio.play();
      audio.play();
    }
  }
}

Answer 1

我不了解互联网资源管理器的兼容性，但这可以在其他浏览器中使用。

这是代码。它可能更干净，但它有效 - 而且它在香草JS中非常严格：

var playing = false,
  audio,
  audioTags = "",
  listItems = "",
  animals = ['Bison', 'Birds', 'Bird1', 'Vehicle', 'Bird2', 'Ducks', 'Chirping'],
  urls = ['index', 'shop', 'about', 'invest', 'contact', 'projects', 'links'],
  currentlyHovered;

function playclip(file) {
  currentlyHovered = file;

  if (playing) return;

  audio = document.getElementById("soundclip" + file);
  audio.play();
  playing = true;
}

function resetTime(file) {
  audio = document.getElementById("soundclip" + file);
  audio.currentTime = 0;
  playing = false;

  if (currentlyHovered) {
    playclip(currentlyHovered);
  }
}

function unsetHover() {
  currentlyHovered = null;
}

for (i = 0; i < 7; i++) {
  listItems +=
    "<li><a href='" + urls[i] + ".html' onmouseover='playclip(28" + i + ");' onmouseout='unsetHover();'>" + animals[i] + "</a></li>";

  audioTags +=
    "<audio id='soundclip28" + i +
    "' onended='resetTime(28" + i + ");'><source src='http://www.noiseaddicts.com/samples_1w72b820/28" + i + ".mp3' /></audio>";
}

document.getElementById("nav").innerHTML = listItems;
document.getElementById("content").innerHTML = audioTags;

ul {
  display: flex;
  justify-content: space-around;
  font-size: 1em;
  list-style: none;
  padding-left: 0;
}

a {
  text-decoration: none;
}

a:hover {
  color: lightblue;
}

<ul id="nav"></ul>
<div id="content"></div>

这是 CodePen Demo - 我希望它有所帮助。

调整Javascript音频导航功能

1 个答案: