Play the .mp3 and then go to the next page.
In my application, I would like to reproduce .mp3
and then navigate to another page.
I currently have:
// 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);
This works great when I don't go to another page right after that. However, with my current code, it is .mp3
not reproducible and I just moved to the next page.
Anyone have any idea how I can fix this?
You need to start mp3 playback, but wait to go to the next page until the mp3 finishes. You can do this by listening to the media events available from your audio element.
Please see this link for more information on the media events available to you: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
I modified your code to implement this event. Please take a look at the source below.
// 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);
source to share