Html5音频元素可以't读取blob url

Html5 audio element can't read blob url

本文关键字：读取 blob url 音频 元素 Html5      更新时间：2023-09-26

我使用的是Asp。Mvc和recorder.js从视图中捕获音频，使用将生成的blob转换为url

Url=Url.createobjecturl(blop);

然后将url发送到服务器。

现在的问题是，当我将url发送回客户端，并尝试在音频元素中播放它作为src时，它会出现404未找到错误。

你的想法请。。。

编辑：

我的代码是这样的：

setInterval(function () {
    if (canvas) {
        dataUrl = canvas.toDataURL();
        recorder && recorder.exportWAV(handleWAV.bind(this));
        recorder.clear();
        fd = new FormData();
        fd.append("audio",  audioUrl);
        fd.append("id", id);
        fd.append("drawing", dataUrl);
        xhr = new XMLHttpRequest();
        xhr.open("POST", "/Session/UploadData", true);
        xhr.send(fd);
    }
}, 100);

我将画布drawingUrl和audioUrl发送到服务器，并在另一个视图中再次获得它们，如

setInterval(function () {
if (ctx) {
        $.ajax({
            url: "/Session/DownloadData/" + id
        })
    .done(function (data) {
        x = data;
        var imageObj = new Image();
        imageObj.src = data["drawing"];
        ctx.drawImage(imageObj, 0, 0);
        audioElement.src = data["audio"];  //error thrown here
        audioElement.play();
    });
}, 100);

画布看起来很好，但音频却不好。

忘了提一下，只有在发送url并从服务器获取后才会发生错误，但是，如果我之前在页面中直接播放url而没有它，那么它就可以正常工作，是的，url从服务器返回时的值与发送时的值相同。

function display(vid){
    var video = document.getElementById("video");
    video.src = window.URL.createObjectURL(vid);
}
相关文章：