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 
    });
});

声音完成后刷新页面

2 个答案:

更新