从网络位置提供音频答案

【问题标题】：Serve audio from network location从网络位置提供音频
【发布时间】：2017-09-26 13:31:39
【问题描述】：

我正在尝试提供一个存储在网络位置的音频文件（来自网络应用程序），它可以工作，但我想实际处理制作的 ajax，以便我可以显示缓冲/获取音频时的掩码。

C# 代码如下所示：

        long fSize = (new System.IO.FileInfo(FilePath)).Length;
        long startbyte = 0;
        long endbyte = fSize - 1;
        int statusCode = 200;
        if ((request.Headers["Range"] != null))
        {
            //Get the actual byte range from the range header string, and set the starting byte.
            string[] range = request.Headers["Range"].Split(new char[] { '=', '-' });
            startbyte = Convert.ToInt64(range[1]);
            if (range.Length > 2 && range[2] != "") endbyte = Convert.ToInt64(range[2]);
            //If the start byte is not equal to zero, that means the user is requesting partial content.
            if (startbyte != 0 || endbyte != fSize - 1 || range.Length > 2 && range[2] == "")
            { statusCode = 206; }//Set the status code of the response to 206 (Partial Content) and add a content range header.                                    
        }
        long desSize = endbyte - startbyte + 1;
            //Headers
            response.StatusCode = statusCode;
            response.ContentType = String.Format(@"audio/{0}", fileLocation.Split('.')[1]);
            response.AddHeader("Content-Length", desSize.ToString());
            response.AddHeader("Content-Range", string.Format("bytes {0}-{1}/{2}", startbyte, endbyte, fSize));
            response.AddHeader("Content-Disposition", Regex.Replace(fileLocation, @"([^\\]+$)", v => String.Format("attachment; filename={0}", v.Value)));
            //Data
            response.WriteFile(FilePath, startbyte, desSize);
            response.End();

直接从 src 标签调用 C# 代码，如下所示：

Ext.create('widget.panel', {
                           html: '<audio controls>' +
                            '<source src="/api/getaudio/' + encodeURIComponent(audioPath) + '/"' +
                            ' type="audio/' + el.getAttribute('data-audiolocation').split('.')[1] + '">' +
                            '</audio>',
                     });

但由于 ajax 调用不是由框架发出的，我无法处理请求。

我试着像这样把它拿出来：

var audioFile = Ext.Ajax.request({
            url: '/api/getaudio/' + encodeURIComponent(audioPath) + '/',
            method: 'GET',
            success: function(response, opts) {
                console.log(response);
            },
            failure: function(response, opts){
                console.log(response);
            }
        });

html: '<audio controls src="' + audioPath + '"></audio>',

但这似乎不起作用。

如何在 html-tag 之外执行 ajax-call，然后将响应放入/注入 html5-audio-player-thing？

或者我可以以某种方式拦截函数本身中的 ajax 并添加掩码或在那里做任何事情吗？我见过一些人在谈论捕获所有 ajax 请求，但这似乎只是为了让它发挥作用。

【问题讨论】：

标签： javascript c# ajax html extjs

【解决方案1】：

Stuart 为我指明了正确的方向。

但是，我使用框架“Ext.get”方法来访问具有其他方法（具有相同名称）的 HTML5 音频播放器，因此我必须使用普通 javascript 并为“canplay”事件添加一个侦听器：

 document.getElementById('audioPlayer').addEventListener("canplay", function(event) {
                        Ext.get('audioWindow').unmask();
                        document.getElementById('audioPlayer').play();
                    }, true);
                    document.getElementById('audioSource').src = '/api/getaudio/' + encodeURIComponent(audioPath) + '/';
                    document.getElementById('audioPlayer').load();

【讨论】：