javascript - 播放 .mp3，然后移至下一页

Question

在我的应用程序中，我想播放一个 .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 无法播放，我只是转到了下一页。

有人知道我该如何纠正这个问题吗？

Answer 1

您需要开始播放 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);