How to delete data Modal Bootstrap on the second time - ASP.NET MVC 5

Question

When I open Modal the second time, the audio element remains the same.

I already uploaded new audio and still continues the old audio.

Please follow my code below.

    <div class="col-xs-6">
        @Html.LabelFor(model => model.Voice )
        <br />
        @Html.TextBoxFor(model => model.Voice, new { @class = "form-control", @type = "file" })
    </div>

Html5 Audio:

    <audio controls style="width: 400px;">
        <source src="@Url.Action("StreamUploadedSong")" type="audio/mp3" />
        Your browser does not support the audio element.
    </audio>

Javascript:

    $(function () {

        $.ajaxSetup({ cache: false });
        $("a[data-modal]").on("click", function (e) {
            //hide dropdown if any (this is used wehen invoking modal from link in bootstrap dropdown )
            //$(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle');

            $('#myModalContent').load(this.href, function () {
                $('#myModal').modal({
                    //backdrop: 'static',
                    keyboard: true
                }, 'show');

                //bindForm(this);
            });
            return false;
        });
    });

The problem is:

public FileStreamResult StreamUploadedSong() // não entra aqui na segunda vez com modal bootstrap
{
}

The second time he should get Public Action Streamuploadedsong ()

Because you’re not working right ?

Answer 1

This is because the src you set url has already been loaded, when you open the modal again, you are not reloading the player object or its content, just displaying it again on the user screen.

Assign an identifier to your Audio helmet:

 <audio id="audioPlayer" controls style="width: 400px;">
    <source src="@Url.Action("StreamUploadedSong")" type="audio/mp3" />
    Your browser does not support the audio element.
</audio>

And after opening the modal run the load() method, this should help:

   $(function () {

    $.ajaxSetup({ cache: false });
    $("a[data-modal]").on("click", function (e) {
        //hide dropdown if any (this is used wehen invoking modal from link in bootstrap dropdown )
        //$(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle');

        $('#myModalContent').load(this.href, function () {
            $('#myModal').modal({
                //backdrop: 'static',
                keyboard: true
            }, 'show');

            $("#audioPlayer").load();

            //bindForm(this);
        });
        return false;
    });
});