0

I'm trying to implement a way to play wave files in my mvc application. In my controller I basically grab the byte data from the db, create a temp wave file and write the byte into the file. Then on my webgrid if the user clicks any row in the wave file column in triggers an ajax call to play the wave file. This is what I have so far:
Controller

          dt.Columns.Add("WavFile", typeof(string));
                foreach (DataRow dr in dt.Rows)
                {
                    try
                    {
                        if (dr["CallerAuthorization"] != null && dr["CallerAuthorization"].ToString() != "")
                        {
                            Byte[] tempAudio = (Byte[])dr["CallerAuthorization"];
                            if (tempAudio.Length > 0)
                            {
                                dr["WavFile"] = CreateWavFile(tempAudio);
                            }
                            else
                            {
                                dr["WavFile"] = "";
                            }
                        }
                        else
                        {
                            dr["WavFile"] = "";
                        }

                    }
                    catch (Exception e)
                    {
                        if (e.Source != null)
                            Console.WriteLine(e.Source);
                        throw;
                    }
                }


public string CreateWavFile(Byte[] authorization)
   {
       string tempDir = Path.GetTempFileName();
       tempDir = tempDir.Substring(0, tempDir.Length - 4);
       tempDir = tempDir + ".wav";
       WaveFormat waveFormat = new WaveFormat(4000, 8, 2);
        using (WaveFileWriter ww = new WaveFileWriter(tempDir, waveFormat))
        {
            ww.Write(authorization, 0, authorization.Length);
        }

       return tempDir;
   }

    public FileResult PlayAuthorization(string audio)
    {
        return new FilePathResult(audio, "audio/wav");
    }

View

<script>
$(document).ready(function () {
    $(".audiobtn").click(function () {

            $.ajax({
                type: "POST",
                url: "/SearchPayment/PlayAuthorization",
                data: { audio: $(this).find('img').attr('alt') },
                cache: false,
                success: function (response) {

                },
                error: function (error) {
                    alert("Unable to play audio");
                    console.log(error);
                }
             });
        })
    })
</script>  

<div style="display:none">
<audio controls preload="none">
    <source src='response' type='audio/wav' />
</audio>

But it's not playing the wave file

Can anyone tell me what I'm doing wrong and how I can fix this?

Thank you

Update I changed my implementation to play on the client side

<script type="text/javascript">
$(document).ready(function () {
    $(".audiobtn").click(function () {

        $.ajax({
            type: "POST",               
            url: "/SearchPayment/PlayAuthorization",
            data: { audio: $(this).find('img').attr('alt') },
            async: false,
            cache: false,
            success: function (src) {
                PlayWave(src);
                $("#ContextMenu").fadeOut(80);
            },
            error: function (error) {
                alert("Unable to play audio");                          
                console.log(error);
            }
        });
    })

    function PlayWave(srcUrl) {
        $('#waveSrc').attr("src", srcUrl);
        $("audio")[0].play();
    }
}) 
</script>

<div style="display:none">
    <audio controls preload="none">
        <source src="~/Content/authorization.wav" type="audio/wav" />
    </audio>
</div>

[HttpPost]
public FileResult PlayAuthorization(string audio)
{
    byte[] authorization = Convert.FromBase64String(audio);
    string audioContents = 
Request.MapPath("~/Content/authorization.wav");
    string newAudio = audioContents;
    FileInfo wavFile = new FileInfo(audioContents);
    wavFile.Delete();

    System.IO.File.WriteAllBytes(audioContents, authorization);

    return new FilePathResult(audioContents, "audio/wav");
}

It play the first wav file it creates just fine, but when the application deletes it and creates a new wav file "~/Content/Authorization.wav" it keeps playing the previous wav file and not the new one.

What can I do to fix this? Is there a way to dynamically create a new wav file for each data I have and how can I pass it to my audio tag? cause the way I implemented it, it won't play unless I specify the url of the wav file in the tag

Thank you

Newit
  • 3
  • 6
  • You are aware this will play on the server and NOT the client – johnny 5 Aug 24 '17 at 18:04
  • What are you even trying to do, you can't just write random bits to a wav file and expect it to play, theres a format you need to follow – johnny 5 Aug 24 '17 at 18:07
  • @johnny 5, yeah I just realized that. It seems like I'm not converting my byte array properly. I used Naudio library and I got it working now, but there's so much background noise. Is anyone familiar with it and how to get rid of the noise? – Newit Aug 24 '17 at 19:22
  • can you explain what you're trying to do, why are you playing a sound on the server when someone logs in, and why is there CallerAuthorization a Byte array of a WAV file? – johnny 5 Aug 24 '17 at 20:11
  • So basically the byte array is stored in the db with other data. I get all the data using a stored procedure. After getting all the data I then convert the byte array to a wave file. The data gets displayed to a webgrid and the user will have option to play the wave file corresponding to the data. So on the webgrid each row has a button the user can click to play the wave file. I'm doing an ajax call cause I don't want to reload the page. Is there a better way to implement this? – Newit Aug 24 '17 at 20:29
  • Yeah, so first you want to send the byte array to your cshtml page and play it from JavaScript. Right now the way you have it set up is that it will play on the server, it only works right now because your server is also the client machine – johnny 5 Aug 24 '17 at 20:43
  • Something like this https://stackoverflow.com/questions/9419263/playing-audio-with-javascript – johnny 5 Aug 24 '17 at 20:45
  • How can I do this? Since most example I've seen are doing the same implementation I did. – Newit Aug 24 '17 at 20:45
  • If your using mvc convert your byte array to json, and then store it in a javascript variable in a script tag, open up HTML audio player and pass the proper mime type with the byte array. – johnny 5 Aug 24 '17 at 20:49
  • Since I'm doing an ajax call, is there a way to use the HTML audio player inside the ajax call or should I not use ajax call? – Newit Aug 24 '17 at 21:47
  • Yeah just have the controller return JsonResult of your wav data. Then in the success function of your Ajax pass the data to the audio player – johnny 5 Aug 24 '17 at 22:12
  • but it's not letting me put html tag inside success on ajax call. How can I pass the data to the audio player from the ajax call? – Newit Aug 24 '17 at 22:22
  • I'm not by my computer but you probably want to Put the HTML for the audio player where you want it to display. Use the the Id or some other unique identifier to grab out the audio player from the HTML. There should be a property or function to set the video player content probably called content set that to the byte array. Then there should be a play function to call as well. – johnny 5 Aug 24 '17 at 22:26
  • So I change my code above and try to play the wave file on my view but I'm not sure how I can pass the wave file directory to the – Newit Aug 25 '17 at 18:22
  • Follow along with this question https://stackoverflow.com/q/24151121/1938988 – johnny 5 Aug 25 '17 at 18:37

0 Answers0