Mute and Unmute background sound

Question

I am playing alert sound in the monitoring page of my site based on some condition . For playing the alert am using ::

$('body').append('<embed src="'+alerts+'" id="beapImg" autostart="true" hidden="true" loop="true">');

Now i want to include a button which should mute the alert sound . I have explored a little on the below :

Custom Mute Button for Audio Embedding?

How to mute an html5 video player

I also tried to remove the attribute : " autostart " of tag :

if($("#mute").is(':checked')){

    $('#beapImg').attr("autostart",false);
}else{
    $('#beapImg').attr("autostart",true);
}

But it doesn't help me , can any one please advice me what should i do to mute and unmute the sound .
Thanks

Answer 1

Try removing the loop.

if($("#mute").is(':checked')){
$('#beapImg').removeAttr("loop");
}

Answer 2

I would remove the embed from the page if muted - in a container other than body

$('#soundDiv').html('<embed src="'+alerts+'" id="beapImg" autostart="true" hidden="true" loop="true">');

$("#mute").on("click",function() {
  $('#soundDiv').empty();
});

or

var sound = $('<embed src="'+alerts+'" id="beapImg" autostart="true" hidden="true" loop="true">');
$('#soundDiv').append(sound);
$("#mute").on("click",function() {
  if($("#mute").is(':checked') $('#soundDiv').empty();
  else $('#soundDiv').append(sound);
});