源为音频的 HTML5 音频元素，存储为数据库中的 varbinary 字节

Question

这是一个普通的音频播放器，但如果我希望我的源是存储在我的数据库中的音频，我将如何实现这一点？

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

这就是我目前使用 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();
            }
        }

    }

这就是我现在的客户端代码的样子

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) {

                    }
                });
            };

然后我尝试像这样调用这个函数：

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

}

然后是按钮。

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

Answer 1

问题与您的 HTML 无关。您的 HTML 仍将通过 HTTP 引用媒体的位置。不同之处在于您将编写一个脚本，该脚本除了从数据库字段中输出原始二进制数据之外什么都不做。

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

然后在你的脚本中，一定要设置适当的标题：

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

然后，回显该字段的内容。您已经有了字节数组，所以只需使用 Response.BinaryWrite(bytes) 之类的东西。

Answer 2

我可以通过问另一个略有不同但仍然相同的问题来得到这个问题的答案。

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