Html5 音频标签在页面刷新时不刷新内容

Question

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

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

我的音频 HTML 是在 "render" 方法上动态创建的。我试图让 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);
}

"Render" 方法将创建发布到我的后端的音频元素。

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

感谢任何帮助，

谢谢！

Answer 1

向 URL 添加随机数，使浏览器每次都认为这是一个不同的文件。

所以，而不是

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

使用

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

Answer 2

我终于知道怎么解决这个问题了！在 DOM 上呈现音频元素的 "Initialize" 方法中，我添加了以下几行：

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

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

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

Html5 音频标签在页面刷新时不刷新内容

Html5 Audio tag doens't refresh content on page refresh

javascript

c#

asp.net

html

audio-streaming