HTML5 audio element with source being audio stored as varbinary bytes from database

Question

This is a normal audio player, but if i wanted my source to be audio stored in my database how would i go about achieving this ?

<audio controls="controls" autoplay="true" loop="loop">
<source src="WhiteChristmas.mp3"/>
</audio>

This how i am currently reading the audio files from my database using a WebService.

 [WebMethod]
    public void PlayXhosa(int id)
    {

        using (The_FactoryDBContext db = new The_FactoryDBContext())
        {
            if (db.Words.FirstOrDefault(word => word.wordID == id).xhosaAudio != null)
            {
                byte[] bytes = db.Words.FirstOrDefault(word => word.wordID == id).xhosaAudio;

                MemoryStream ms = new MemoryStream(bytes);
                System.Media.SoundPlayer myPlayer = new System.Media.SoundPlayer(ms);
                myPlayer.Play();
            }
        }

    }

This is what my client-side code looks like at the moment

function PlayXhosa() {
                var id = $("[id$=hiddenWord_id]").val();
                $.ajax({

                    url: "../../WebService.asmx/PlayXhosa",
                    data: "{ 'id': '" + id + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {

                    }
                });
            };

I then attempt to to call this function like this:

 var audio = document.createElement('audio');
 audio.autoplay = false;
 audio.oncanplaythrough = function() {
 foo.disabled = false;
    };
   audio.src = 'PlayXhosa()';
   foo.onclick = function() {
     audio.play();

}

Then there is the button.

  <button id="foo" disabled>play xhosa audio</button>

Possible duplicate of [How to link a Webservice method to an audio's src element?](http://stackoverflow.com/questions/32345324/how-to-link-a-webservice-method-to-an-audios-src-element) — Lulutho Mgwali, Oct 09 '15 at 04:31

Brad · Answer 1 · 2015-09-01T22:37:03.640

0

The problem has nothing to do with your HTML. Your HTML is still going to reference the location of the media over HTTP. The difference is that you will write a script that does nothing but output the raw binary data from your database field.

<source src="yourScript.aspx?file=WhiteChristmas.mp3" />

And then in your script, be sure to set the appropriate headers:

Response.AddHeader("Content-Type", "audio/mpeg");

Then, echo out the contents of that field. You already have your byte array so just use something like Response.BinaryWrite(bytes).

edited Sep 01 '15 at 22:37

answered Sep 01 '15 at 17:35

Brad

159,648
54
349
530

how would i go about writing the script? im not farmilliar with how to write them. Is it possible for you to show me a demo script. Thanks. – Lulutho Mgwali Sep 01 '15 at 18:12
@LuluthoMgwali I haven't written any C# in a long time, but you would have to show us what ORM you're using and how you're getting your data to begin with. – Brad Sep 01 '15 at 18:22
@LuluthoMgwali That's your client-side code. Where's your server-side code? Add it to your question. – Brad Sep 01 '15 at 21:08
thats what im currently using, but this only works localy and not when published.. thats why i want to use html5 audio tags.. but all my data is stored in my database – Lulutho Mgwali Sep 01 '15 at 22:09
@LuluthoMgwali I don't understand what you're getting at... you should really show your code. What you do server-side has nothing to do with how you play that audio client-side. You can use HTML5 audio tags, but the browser has to get the data from somewhere. You need a script to send that data from your DB, via HTTP, to the browser. – Brad Sep 01 '15 at 22:11
yes, that is my question. How do i go about doing that. – Lulutho Mgwali Sep 01 '15 at 22:16
@LuluthoMgwali Show us your code on how you are reading from your database so we can make a meaningful suggestion on how to output the data. – Brad Sep 01 '15 at 22:17
Do you rate then the client side code will still able to work with the server side code if i do get this right? – Lulutho Mgwali Sep 01 '15 at 22:53
@LuluthoMgwali Yes, you just need to point the audio tag at the URL for the script that returns the stream data. – Brad Sep 01 '15 at 23:03
Also how would you suggest i write the src element of the code. scr ="PlayAudio()" does not seem rite to me. Have to use PlayAudio.. like in the fiddle i sent becuase i also send the id through with it. – Lulutho Mgwali Sep 01 '15 at 23:09
Can you please have a look at my fiddle again – Lulutho Mgwali Sep 01 '15 at 23:13
@LuluthoMgwali Look at my example again. You need to set the `src` attribute to the URL of your script. `audio.src = 'http://example.com/yourScript.aspx'` – Brad Sep 01 '15 at 23:14
Sorry my bad.. i sent you the incorrect fiddle.. let me edit my question. Sorry @Brad.. Thank you for you patience – Lulutho Mgwali Sep 01 '15 at 23:16

score 0 · Accepted Answer · edited May 23 '17 at 12:31

0

I was able to get the answer to this question by asking another slighty different but nonetheless the same question.

https://stackoverflow.com/a/32904927/5179424

edited May 23 '17 at 12:31

Community

1
1

answered Oct 09 '15 at 03:56

Lulutho Mgwali

823
1
11
33

If this question is a duplicate of the one you've linked, please flag it as a duplicate instead of leaving an answer to that effect. If it is not a duplicate, please leave a complete answer instead of a link-only answer. – josliber Oct 09 '15 at 04:12

score 0 · Answer 3 · answered May 03 '23 at 15:56

This is how I have implemented and it's working perfectly fine. The real hero here is the JS fetch API.

var url = "http://excample.com/get/bytes"
var audio;
audio = $('audio');

fetch(url, {
    method: 'GET',
    headers: {
        'Authorization': 'Bearer ABCDEFGHIJKLMNO'
    }
}).then(response => {
    response.blob()
        .then(blob => {
            const objectUrl = URL.createObjectURL(blob);
            audio[0].src = objectUrl;
        }).catch(e => {
            console.error(e);
        })
}).catch(error => {
    console.error(error);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

HTML5 audio element with source being audio stored as varbinary bytes from database

3 Answers3