代码之家  ›  专栏  ›  技术社区  ›  user2268507

播放.mp3,然后转到下一页

  •  3
  • user2268507  · 技术社区  · 11 年前

    在我的应用程序中,我想播放 .mp3 然后移动到另一页。

    目前我有:

    // Ajax Success function
    $.playSound('../static/sounds/cash-register');
    window.location.replace("next_page");
    
    // Play sound function
    (function($){
    
    $.extend({
        playSound: function(){
            return $("<embed src='"+arguments[0]+".mp3' hidden='true' autostart='true' loop='false' class='playSound'>" + "<audio autoplay='autoplay' style='display:none;' controls='controls'><source src='"+arguments[0]+".mp3' /><source src='"+arguments[0]+".ogg' /></audio>").appendTo('body');
            }
        });
    
    })(jQuery);
    

    当我没有立即转到另一页时,这很好。然而,使用我当前的代码 .mp3 不播放,我只需移动到下一页。

    有人知道我该如何纠正吗?

    1 回复  |  直到 11 年前
        1
  •  1
  •   Shawn Lehner    11 年前

    您需要开始播放mp3,但要等到mp3完成后才能导航到下一页。您可以通过收听音频元素中可用的媒体事件来完成此操作。

    请查看此链接以了解有关您可用媒体活动的更多信息: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

    我修改了您的代码以实现此事件。请查看以下来源。

    // Ajax Success function
    $.playSound('../static/sounds/cash-register', 'next_page');
    
    // Play sound function
    (function($){
    
        $.extend({
            playSound: function(){
                var $ele = $("<embed src='"+arguments[0]+".mp3' hidden='true' autostart='true' loop='false' class='playSound'>" + "<audio autoplay='autoplay' style='display:none;' controls='controls'><source src='"+arguments[0]+".mp3' /><source src='"+arguments[0]+".ogg' /></audio>").appendTo('body');
                $ele.on('ended', function() {
                    window.location.replace(arguments[1]);
                });
            }
        });
    
    })(jQuery);