javascript HTML5 audio元素,其中源是来自数据库的存储为varbinary字节的音频

agxfikkp  于 2023-05-05  发布在  Java
关注(0)|答案(3)|浏览(136)

这是一个普通的音频播放器,但如果我想我的来源是音频存储在我的数据库中,我将如何去实现这一点?

<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>
cigdeys3

cigdeys31#

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

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

然后在脚本中,确保设置适当的头:

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

然后,回显该字段的内容。你已经有了你的字节数组,所以只需要使用像Response.BinaryWrite(bytes)这样的东西。

enxuqcxy

enxuqcxy2#

我能够得到这个问题的答案,通过问另一个略有不同,但仍然是相同的问题。
https://stackoverflow.com/a/32904927/5179424

baubqpgj

baubqpgj3#

这就是我如何实现的,它工作得很好。这里真实的的英雄是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>

相关问题