ボタンが私のサウンドを再生してリンクに移動しないのはなぜですか？

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

​​

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

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の終了タグです。 タグ "a"はボタン全体をラップする必要があります。

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

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