Fatal编程技术网

从API响应JavaScript播放音频

javascript c# asp.net-mvc

从API响应JavaScript播放音频,javascript,c#,asp.net-mvc,Javascript,C#,Asp.net Mvc,我正在尝试播放下载的音频文件，并从外部API在浏览器中播放 我有一个本地API，它正在查询文件所在的外部API。我从外部API获取文件的API方法是： public async Task<HttpResponseMessage> GetAudioAsync(string id) { using (var httpClientHandler = new HttpClientHandler()) { httpClientHandler.ServerCert

我正在尝试播放下载的音频文件，并从外部API在浏览器中播放

我有一个本地API，它正在查询文件所在的外部API。我从外部API获取文件的API方法是：

public async Task<HttpResponseMessage> GetAudioAsync(string id)
{
    using (var httpClientHandler = new HttpClientHandler())
    {
        httpClientHandler.ServerCertificateCustomValidationCallback = (message, cert, chain, errors) => { return true; };
        httpClientHandler.UseDefaultCredentials = true;

        var url = "externalapi/"

        using (var client = new HttpClient(httpClientHandler))
        {
            var result = await client.GetAsync(url);

            var response = new HttpResponseMessage(HttpStatusCode.OK);

            var bytes = await result.Content.ReadAsByteArrayAsync();

            response.Content = new ByteArrayContent(bytes);

            response.Content.Headers.ContentLength = bytes.LongLength;

            response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
            response.Content.Headers.ContentDisposition.FileName = "audio.wav";
            response.Content.Headers.ContentType = new MediaTypeHeaderValue("audio/wav");

            return response;
        }                    
    }
}

{
    "version": {
        "major": 1,
        "minor": 1,
        "build": -1,
        "revision": -1,
        "majorRevision": -1,
        "minorRevision": -1
    },
    "content": {
        "headers": [
            {
                "key": "Content-Length",
                "value": [
                    "0"
                ]
            },
            {
                "key": "Content-Disposition",
                "value": [
                    "attachment; filename=audio.wav"
                ]
            },
            {
                "key": "Content-Type",
                "value": [
                    "application/octet-stream"
                ]
            }
        ]
    },
    "statusCode": 200,
    "reasonPhrase": "OK",
    "headers": [],
    "requestMessage": null,
    "isSuccessStatusCode": true
}
我从浏览器返回的错误是：error TypeError:构造“Blob”失败：迭代器getter不可调用

我从本地API得到的响应是：

public async Task<HttpResponseMessage> GetAudioAsync(string id)
{
    using (var httpClientHandler = new HttpClientHandler())
    {
        httpClientHandler.ServerCertificateCustomValidationCallback = (message, cert, chain, errors) => { return true; };
        httpClientHandler.UseDefaultCredentials = true;

        var url = "externalapi/"

        using (var client = new HttpClient(httpClientHandler))
        {
            var result = await client.GetAsync(url);

            var response = new HttpResponseMessage(HttpStatusCode.OK);

            var bytes = await result.Content.ReadAsByteArrayAsync();

            response.Content = new ByteArrayContent(bytes);

            response.Content.Headers.ContentLength = bytes.LongLength;

            response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
            response.Content.Headers.ContentDisposition.FileName = "audio.wav";
            response.Content.Headers.ContentType = new MediaTypeHeaderValue("audio/wav");

            return response;
        }                    
    }
}

{
    "version": {
        "major": 1,
        "minor": 1,
        "build": -1,
        "revision": -1,
        "majorRevision": -1,
        "minorRevision": -1
    },
    "content": {
        "headers": [
            {
                "key": "Content-Length",
                "value": [
                    "0"
                ]
            },
            {
                "key": "Content-Disposition",
                "value": [
                    "attachment; filename=audio.wav"
                ]
            },
            {
                "key": "Content-Type",
                "value": [
                    "application/octet-stream"
                ]
            }
        ]
    },
    "statusCode": 200,
    "reasonPhrase": "OK",
    "headers": [],
    "requestMessage": null,
    "isSuccessStatusCode": true
}
更新：

我认为问题可能在于，当我控制台.log（数据）时，我返回的是一个对象，而不是一个字节数组。可用于初始化Blob对象。

您可以将
音频
元素
src
属性设置为直接指向ASP.NET Web API端点：


<audio src="http://localhost:8000/api/endpoint/callId"></audio>


其中，
endpoint
是您的
控制器的名称，
callId
是您呼叫的id

以下是我返回呼叫的操作示例：


[HttpGet]
public async Task<HttpResponseMessage> GetAudioAsync(
    string id)
{
    var url = "http://localhost:8000/api/ExternalApi";

    using (var httpClientHandler = new HttpClientHandler())
    {
        httpClientHandler.UseDefaultCredentials = true;                

        using (var client = new HttpClient(httpClientHandler))
        {
            var result = await client.GetAsync(url);

            var response = new HttpResponseMessage(HttpStatusCode.OK);

            var bytes = await result.Content.ReadAsByteArrayAsync();

            response.Content = new ByteArrayContent(bytes);

            response.Content.Headers.ContentLength = bytes.LongLength;

            response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
            response.Content.Headers.ContentDisposition.FileName = "audio.wav";
            response.Content.Headers.ContentType = new MediaTypeHeaderValue("audio/wav");

            return response;
        }
    }
}


内容长度为0，因为我在
ExternalApi
方法中返回一个空白字节数组，所以内容长度头的值应该大于0

如果没有收到任何错误，请尝试其他浏览器，某些浏览器不支持播放
.wav
文件



旁注：

您还可以创建一个自定义类
FileResponse
，该类继承自
HttpResponseMessage


public class FileResponse
     : HttpResponseMessage
{
    public FileResponse(
          byte[] fileContent
        , string mediaType
        , string fileName)
    {
        StatusCode = System.Net.HttpStatusCode.OK;
        Content = new StreamContent(new MemoryStream(fileContent));
        Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue(mediaType);
        Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment") { FileName = fileName };
    }
}


用法：


[HttpGet]
public async Task<HttpResponseMessage> GetAudioAsync(
    string id)
{
    var url = "http://localhost:8000/api/ExternalApi";

    using (var httpClientHandler = new HttpClientHandler())
    {
        httpClientHandler.UseDefaultCredentials = true;                

        using (var client = new HttpClient(httpClientHandler))
        {
            var result = await client.GetAsync(url);                    

            var bytes = await result.Content.ReadAsByteArrayAsync();
            return new FileResponse(bytes, "audio/wav", "your-file-name.wav");
        }
    }
}



[HttpGet]
公共异步任务GetAudioAsync(
字符串id）
{
变量url=”http://localhost:8000/api/ExternalApi";
使用（var httpClientHandler=new httpClientHandler（））
{
httpClientHandler.UseDefaultCredentials=true；
使用（var客户端=新的HttpClient（httpClientHandler））
{
var result=await client.GetAsync（url）；
var bytes=wait result.Content.ReadAsByteArrayAsync（）；
返回新的FileResponse（字节，“音频/wav”，“您的文件名.wav”）；
}
}
}

能否请您向我们提供您在控制台中收到的错误？@TjaartvanderWalt错误类型错误：无法构造“Blob”：迭代器getter不可调用。能否请您使用
语音录制.audio.done
方法的内容更新您的问题？@TjaartvanderWalt我已经添加了函数的内容。您有没有您试图将音频元素的URL设置为API enpoint？音频元素应该知道如何处理响应。@你能更具体一点吗？它到底做了什么？它抛出了一个错误吗？请求的响应代码是什么？如果您给出更详细的回答，将有助于Tjaart适当地修改他的答案。@TjaartvanderWalt我在控制台中执行以下操作时没有遇到错误：document.getElementById（'yourAudioElement'）。setAttribute（'src'，'）。事实上什么也没发生。我去点击音频元素，它“闪烁”，但不播放任何声音。

[HttpGet]
public async Task<HttpResponseMessage> GetAudioAsync(
    string id)
{
    var url = "http://localhost:8000/api/ExternalApi";

    using (var httpClientHandler = new HttpClientHandler())
    {
        httpClientHandler.UseDefaultCredentials = true;                

        using (var client = new HttpClient(httpClientHandler))
        {
            var result = await client.GetAsync(url);                    

            var bytes = await result.Content.ReadAsByteArrayAsync();
            return new FileResponse(bytes, "audio/wav", "your-file-name.wav");
        }
    }
}