Why isn't $('embed').remove working?
===

Trying to play a drum roll until a random name is generated, then remove it and play a cheering sound.

Both of these files start playing correctly, but for some reason the drum roll won't stop.


	Array.prototype.remove = function(from, to) {
		var rest = this.slice((to || from) + 1 || this.length);
		this.length = from < 0 ? this.length + from : from;
		return this.push.apply(this, rest);
	};

	$(document).ready(function(){
	
		var staff = [ 'hardcoded', 'list', 'of', 'staff', 'members' ];
			
		$('button#start').click( function() {
			
			$('embed').remove();
			$('body').append('<embed id="drum-roll" src="drum-roll.wav" autostart="true" hidden="true" loop="true">');
			
			var $display = $('#display'),
				$results = $('#results table');
			$display.removeClass( "winner" );
			$display.addClass( "spinner" );
		
			var counter = 0,			
				rand = 0,
				run_time = 10,
				delay = ( run_time * 100 ) / staff.length,
				loop_number = 5,
				max_count = staff.length * loop_number;
			
			$display.doTimeout( 'loop', delay, function() {
				counter++;
				var newRand = Math.floor( Math.random() * staff.length );
				if ( rand === newRand ) {
					rand = Math.floor( Math.random() * staff.length );
				} else {
					rand = newRand;
				}
				
				$(this).text( staff[rand] );
				
				if ( counter < max_count ) { return true; }
				else {
					$('#results tr:last').after('<tr><td class="number">' + staff.length + '</td><td>' + staff[rand] + '</td></tr>');
					staff.remove( rand );
					$display.removeClass( "spinner" );
					$display.addClass( "winner" );
					
					$('embed').remove();
					$('body').append('<embed src="cheering.wav" autostart="true" hidden="true" loop="false">');
				}
			});
		});
	
	});


Any ideas why this might be the case? I'm guessing it's something to do with the first `embed` not being in the DOM, or something?

Thanks in advance,