Question

这看起来像是一个基本问题但未能找到答案..我是否需要为按钮添加任何内容以将用户带到主页并播放声音？目前它只播放声音。我想让它立即播放声音然后转到主页。

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>

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

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

Answer 3

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 4

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

您的按钮不在<a>标记中也许这会奏效：

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

Answer 5

你的问题是a的结束标记。标签＆＃34; a＆＃34;必须包裹整个按钮。

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

Answer 6

您可以随时使用jQuery来听取声音结束并重定向用户。

＆＃13;

/* 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();
});

＆＃13;

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

＆＃13;

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

＆＃13;

/* 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();
});

＆＃13;

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

＆＃13;

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

6 个答案: