Question

我正在开发一个Radio网站，我创建了一个C＃后端，它将一个字节流写入当前的HTTP响应，然后将其加载到HTML5 audio 标记上。

我的问题是：我有5首歌曲。期望的行为是每次页面加载时，它应该要求控制器播放随机歌曲。实际发生的是，第一次页面加载，控制器被调用并且歌曲正常播放，但如果用户重新加载页面，或导航到新页面并将它们返回到收音机，则音频标签而不是再次调用控制器，只播放上次调用时在音频缓冲区中下载的内容，并且只有当下载的缓冲区完成播放时，音频标签才会调用控制器，这会产生不希望的跳过，如播放15秒的一首歌和一首新歌。

我的音频HTML是在“渲染”方法上动态创建的。我尝试使id随机，尝试强制缓冲区清理，但即使使用新的id，标记仍将播放预加载缓冲区的内容，即使preload属性设置为“none”。除此之外，我尝试将随机令牌作为参数发送到c＃控制器，以尝试避免基于URL的任何缓存问题，但它也不起作用。

继承人我的控制人员：

public void GetStream(StreamType? type, string token)
        {
            var files = this.GetFiles(type);
            int rnd;

            rnd = new Random((int)DateTime.Now.Ticks).Next(0, files.Count);

            using (Stream mystream = files[rnd].OpenRead())
            {
                this.CurrentTrack = files[rnd].Name;

                mystream.Position = 0;
                using (BinaryReader reader = new BinaryReader(mystream))
                {
                    byte[] bytes = new byte[mystream.Length];

                    System.Web.HttpResponse response = System.Web.HttpContext.Current.Response;
                    response.Clear();
                    response.ClearHeaders();
                    response.ClearContent();
                    response.BufferOutput = true;
                    response.ContentType = "audio/mp3";
                    response.AddHeader("Accept-Ranges", "bytes");
                    response.AddHeader("Cache-Control", "no-cache");
                    response.AddHeader("Content-Length", mystream.Length.ToString());

                    int bytesRead;
                    while ((bytesRead = reader.Read(bytes, 0, bytes.Length)) > 0)
                    {
                        response.OutputStream.Write(bytes, 0, bytesRead);
                    }

                }
            }
        }

这是我的JS：

audioApp.Initialize = function (type) {
    audioApp.Render(type);
}

audioApp.Render = function (type) {
    type = (type == undefined || type == null || type == "") ? 0 : type;
    var token = audioApp.MakeId();
    var html =  "<div id='divSongName'>"
                + "</div>"
                + "<audio id='" + token + "' autoplay preload='none'>"
                + "     <source src='/Streaming/GetStream/0" + type + "' type='audio/mp3' />"
                + "     <em>Sorry, your browser doesn't support HTML5 audio.</em>"
                + "</audio>"

    $("#divAudioRender").append(html);
}

“渲染”方法将创建发布到我后端的音频元素。

我在网上搜索了很多方法，以便在每次页面刷新时强制清理音频缓冲区，但我找不到任何内容。

感谢任何帮助，

谢谢！

Answer 1

我终于弄清楚如何解决问题！在我的＆＃34;初始化＆＃34;在DOM上呈现音频元素的方法，我在下面添加了以下几行：

var audio = $("audio").get(0);
audio.src = "";
audio.src = "/Streaming/GetStream?type=" + type + "'&token=" + audioApp.MakeId();

audio.load();
audio.play();

当我将源更改为空并强制播放器再次加载时，它会清除缓冲区，从而在每次刷新时调用控制器。

Answer 2

在URL中添加一个nonce，使浏览器每次都认为它是一个不同的文件。

所以，而不是

src='/Streaming/GetStream/0" + type + (etc)

使用

var d = new Date();
...
src='/Streaming/GetStream/0" + type + "?version=" + d.getMilliseconds() + (etc)

Html5音频标记不刷新页面刷新内容

2 个答案: