0

私は自分のウェブサイトにコードイグナイターを使用しています。ユーザーがメニューをクリックしたときにサウンドをトリガーしたいと思います。しかし、クリックした後のページの更新が速すぎて、音が聞こえません。サウンドが完了した後にページを更新するにはどうすればよいですか?

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' />");
    });
});
4

2 に答える 2

0

私はオーディオをあまり扱っていないので、これとの互換性がどの程度かはわかりませんが、ソリューションは次のようなものでなければなりません

$(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 
    });
});
于 2013-02-15T04:25:15.253 に答える
0

return falseクリック直後の更新を避けるために、関数内に a を追加します。

$(document).ready(function(){
        $(".navigation").click(function(){
            $("#dummy").html("<embed src='<?=base_url()?>sound/testing.mp3' hidden='true' autostart='true' loop='false' />");
return false;
        });
    });
于 2013-02-15T03:51:01.470 に答える