Windows Media Player continues to play when JQuery Dialog is closed

Question

I have an MVC application. The main view will have a grid with a list of recordings. Next to each recording there is a Play Button. In reality the play button is an ActionLink. On the OnClick Event of that ActionLink I open another view in a JQuery Dialog, this view has the Windows Media Player. The OnClick Event is defined in Javascript (See code Below). The issue is that when I close the Dialog windows media player continue playing the recording! I tried to remove the media player object $(#mediaplayer).remove(), even it is removed but still plays. I tried to set the InnerHtml of the whole Div to "", the Div is removed but the media player still plays. The only solution that worked for me but it's not what I want is to do window.location.reload() in the close event of the dialog, it will reload the parent page something I don't want to do because if the user is on the second page of the Grid it will bring him to the first page. Anyone can help please?

@Html.ActionLink("Play", "blablabla", new { controller = "Default", @url = MyUrl }, new { @class = "button" })

<script type="text/javascript">

$(document).on("click", ".button", function (e) {
    var url = $(this).attr('href');
    var dialog1 = $('<div id="divPlayer" style="display:none"></div>').appendTo('body');
    dialog1.load(url, {},
        function (responseText, textStatus, XMLHttpRequest) {
            dialog1.dialog({
                close: function (event, ui) {
                    dialog1.empty();
                    dialog1.dialog('destroy').remove();
                },
                draggable: true,
                width: 340,
                height: 105,
                resizable: false,
                closeOnEscape: true,
                modal: true,
            });
        });
    dialog1.unload(url, {});
    return false;

});

</script>

Here is the embed code for the media player

<object width="320" height="40"
        classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
        id="mediaplayer1" style="border:none">
    <param name="Filename" value="@Model.URL">
    <param name="AutoStart" value="True">
    <param name="ShowControls" value="True">
    <param name="ShowStatusBar" value="False">
    <param name="ShowDisplay" value="False">
    <param name="AutoRewind" value="True">
    <embed id='altMediaPlayer' type="application/x-mplayer2"
           pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/MediaPlayer/"
           width="320" height="40" src="@Model.URL"
           filename="@Model.URL" autostart="True"
           showcontrols="True" showstatusbar="False"
           showdisplay="False" autorewind="True">
    </embed> 
</object>

Answer 1

I would advise something like:

dialog1.dialog({
  beforeClose: function () {
    dialog1.html("");
  },
  draggable: true,
  width: 340,
  height: 105,
  resizable: false,
  closeOnEscape: true,
  modal: true,
});

Or:

$( "#divPlayer" ).on( "dialogbeforeclose", function( event, ui ) {
  $(this).html("");
  return true;
} );

From http://api.jqueryui.com/dialog/#event-beforeClose

beforeClose( event, ui )

Triggered when a dialog is about to close. If canceled, the dialog will not close.

Update 1

I would add something like this to the beforeClose function:

$('#mediaplayer1 embed')[0].controls.stop();

This might tell the player to stop. This will depend on how the WMP object is being offered up to the browser. It might be better to update your post and include the resulting HTML source that is shown from your code.

You may also consider: http://malsup.com/jquery/media/

Update 2

See More: Embedding Windows Media Player for all browsers

Given your object code, make some adjustments:

<object width="320" height="40"
        classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6"
        codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
        id="mediaplayer1" style="border:none">
    <param name="Filename" value="@Model.URL">
    <param name="AutoStart" value="true">
    <param name="ShowControls" value="true">
    <param name="ShowStatusBar" value="false">
    <param name="ShowDisplay" value="false">
    <param name="AutoRewind" value="true">
    <embed id='altMediaPlayer'
           type="application/x-mplayer2"
           pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/MediaPlayer/"
           width="320" height="40" src="@Model.URL"
           filename="@Model.URL"
           autostart="true"
           showcontrols="true"
           showstatusbar="false"
           showdisplay="False"
           autorewind="True">
    </embed> 
</object>

With the following jQuery:

dialog1.dialog({
  beforeClose: function () {
    if(-1 != navigator.userAgent.indexOf("MSIE")){
      $("#mediaplayer1")[0].Stop();
    } else {
      $("#altMediaPlayer")[0].controls.stop();
    }
  },
  draggable: true,
  width: 340,
  height: 105,
  resizable: false,
  closeOnEscape: true,
  modal: true,
});

Update 3

As was mentioned in comments, it is strongly suggested to use the audio element. Here is an example:

https://jsfiddle.net/Twisty/6fp7gdmh/