codeigniter - 声音完成后刷新页面

Question

我正在为我的网站使用 codeigniter。我希望在用户单击菜单时触发声音。但是我点击后页面刷新太快以至于听不到声音。声音完成后如何让页面刷新？

这是html：

<ul class="navigation">
    <li><a href="[link1]">Menu 1</a></li>
    <li><a href="[link2]">Menu 2</a></li>
    <li><a href="[link3]">Menu 3</a></li>
</ul>
<span id="dummy"></span>

这是javascript：

$(document).ready(function(){
    $(".navigation").click(function(){
        $("#dummy").html("<embed src='<?=base_url()?>sound/testing.mp3' hidden='true' autostart='true' loop='false' />");
    });
});

Answer 1

在您的函数内添加一个return false以避免在单击后刷新。

$(document).ready(function(){
        $(".navigation").click(function(){
            $("#dummy").html("<embed src='<?=base_url()?>sound/testing.mp3' hidden='true' autostart='true' loop='false' />");
return false;
        });
    });

Answer 2

我没有对音频做太多的工作，所以我不确定它的兼容性如何，但你的解决方案应该在某个地方

$(document).ready(function(){
    $(".navigation a").click(function(e){
        document.nextPage = $(this).attr('href')
        $("#dummy").html("<embed src='<?=base_url()?>sound/testing.mp3' hidden='true' autostart='true' loop='false' onended='followLink();' />");
        e.preventDefault();
    });
});

function followLink(){
   document.location.href = document.nextPage;
}

您正在使用 onended 事件继续前进的地方。

更新

这是做同样事情的最佳方式http://jsfiddle.net/joshK/d5eNu/

$(document).ready(function(){
   $(".navigation a").click(function(e){
        var nextPage = $(this).attr('href');
        var audioObj = $("<audio>").attr({
            "hidden":true,
            "src":"<?=base_url()?>sound/testing.mp3"
        }).bind("ended",function(){//when sound finished playing follow the link

           document.location.href = nextPage;

        }).appendTo("#dummy");

        audioObj[0].play();
        e.preventDefault(); //prevent the page from refreshing 
    });
});