爲什麼我的按鈕不能播放我的聲音並轉到鏈接？

這看起來像一個基本的問題，但未能找到答案..有什麼我需要添加的按鈕，使用戶到主頁和播放聲音？目前它只播放聲音。我希望它立即播放聲音，然後進入主頁。爲什麼我的按鈕不能播放我的聲音並轉到鏈接？

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>

來源

2017-07-26 Casey Kusella-Gussin

你在哪裏告訴瀏覽器導航到一個新的頁面？如果您立即更改頁面，用戶將聽不到聲音。 – PeterMader

我已經創建了用戶點擊進入主頁按鈕的按鈕，animatedButton是應該播放聲音然後鏈接的按鈕。 –

因爲按鈕和「」元素之間沒有連接。爲此，您需要在音頻完成時設置location.href（[示例]）（https://stackoverflow.com/questions/11103582/detecting-when-html5-audio-is-finished-playing-more-than-一次）） - 但是像這樣的自定義音頻可能會很煩人。也不要直接鏈接到soundjay。 –

你應該等到<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>

來源

2017-07-26 15:18:48 PeterMader

這似乎是最簡單最有效的答案，也幫助我刪除標籤，因爲某些原因，您不應該在標籤上環繞按鈕。感謝您的幫助！ –

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

來源

2017-07-26 15:19:21

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>

來源

2017-07-26 15:19:57

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

您的按鈕是不是在<a>標籤也許這將工作：

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

來源

2017-07-26 15:20:35

你的問題是一個結束標記。標籤「a」必須包裹整個按鈕。

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

來源

2017-07-26 15:20:47 Ana

您可以隨時使用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>

來源

2017-07-26 15:22:23 Daerik

爲什麼我的按鈕不能播放我的聲音並轉到鏈接？

回答

相關問題