为什么我的按钮不能播放我的声音并转到链接？答案

【问题标题】：Why won't my button play my sound and go to the link?为什么我的按钮不能播放我的声音并转到链接？
【发布时间】：2017-07-26 15:08:51
【问题描述】：

这看起来像是一个基本问题，但找不到答案。我需要为按钮添加什么内容才能将用户带到主页并播放声音吗？目前它只播放声音。我希望它立即播放声音然后转到主页。

function playBeep() {
  var sound = document.getElementById("Sound")
  sound.play()
}

<div class="animatedButton">

  <audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>

  <a href="Home.html"> </a>
  <button id="aButton" onclick="playBeep()">
    <img src="img/Home.png">
  </button>

</div>

【问题讨论】：

你在哪里告诉浏览器导航到一个新页面？如果您立即更改页面，用户将听不到声音。
我已经创建了用户单击以转到主页按钮的按钮，animatedButton 是应该播放声音然后链接的按钮。
因为按钮和<a>元素之间没有连接。为此，您需要在音频完成时设置 location.href (example) - 但这样的自定义音频可能会很烦人。也不要直接链接到 soundjay。

标签： javascript html

【解决方案1】：

您应该等到<audio> 元素播放完毕，然后告诉浏览器导航到新页面：

function playBeep() {
  var sound = document.getElementById("Sound");
  sound.play();
  sound.addEventListener('ended', function () {
    location.href = 'Home.html';
  });
}

<div class="animatedButton">

  <audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>
  <button id="aButton" onclick="playBeep()">
    <img src="img/Home.png">
  </button>

</div>

【讨论】：

这似乎是最简单和最有效的答案，也有助于我删除由于某种原因不应该环绕按钮的 a 标签。感谢您的帮助！

【解决方案2】：

只需添加您的链接window.location = "http://stackoverflow.com";

function playBeep() {
  var sound = document.getElementById("Sound")
  sound.play();
  window.location = "http://stackoverflow.com";
}

<div class="animatedButton">

  <audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>

  <a href="Home.html"> </a>
  <button id="aButton" onclick="playBeep()">
    <img src="img/Home.png">
  </button>

</div>

【讨论】：

【解决方案3】：

function playBeep() {
  var sound = document.getElementById("Sound")
  sound.play();
  window.location.href = '/'; //Go to HomePage

}

<div class="animatedButton">

  <audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>

  <a href="Home.html"> </a>
  <button id="aButton" onclick="playBeep()">
    <img src="img/Home.png">
  </button>

</div>

【讨论】：

【解决方案4】：

<a href="Home.html"> </a>

您的按钮不在<a>tag 中也许这会起作用：

<a href="Home.html"> 
  <button id="aButton" onclick="playBeep()">
    <img src="img/Home.png">
  </button>
</a>

【讨论】：

【解决方案5】：

您的问题是 a 的结束标记。标签“a”必须包裹整个按钮。

<a href="Home.html">
  <button id="aButton" onclick="playBeep()">
    <img src="img/Home.png">
  </button>
 </a>

【讨论】：

【解决方案6】：

您始终可以使用jQuery 来收听结束声音并重定向用户。

/* Bind Ended Event to Sound */
$('#Sound').on('ended', function(){
    console.log('User Redirected');
});

/* Bind Click Event to Button */
$('#aButton').on('click', function() {
    $('#Sound')[0].play();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animatedButton">
    <audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>
    <a href="Home.html"></a>
    <button id="aButton">
        <img src="http://findicons.com/files/icons/1580/devine_icons_part_2/128/home.png">
    </button>
</div>

或者您可以只使用JavaScript 来收听结束的声音并重定向用户。

/* Variable Defaults */
var sound = document.getElementById('Sound');
var button = document.getElementById('aButton');

/* Bind Ended Event to Sound */
sound.addEventListener('ended', function(){
    console.log('User Redirected');
});

/* Bind Click Event to Button */
button.addEventListener('click', function() {
    sound.play();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animatedButton">
    <audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>
    <a href="Home.html"></a>
    <button id="aButton">
        <img src="http://findicons.com/files/icons/1580/devine_icons_part_2/128/home.png">
    </button>
</div>

【讨论】：