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

这看起来像一个基本的问题，但未能找到答案..有什么我需要添加的按钮，使用户到主页和播放声音？目前它只播放声音。我希望它立即播放声音，然后进入主页。为什么我的按钮不能播放我的声音并转到链接？

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

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

回答

相关问题