HTML5音頻標籤好好嘗試一下頁面上的內容刷新刷新

Question

我正在開發一個電臺的網站，我創建了一個C＃後端寫入字節流在當前的HTTP響應，然後裝上HTML5 音頻標記。

我的問題是：我有例如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); 
} 

的 「渲染」 的方法將創建音頻元素職位，以我的後端。

我在網上搜索了一個辦法，迫使音頻緩衝了很多，每次刷新頁面被清洗，但我無法找到任何東西。

任何幫助表示讚賞，

謝謝！

Answer 1

我終於想通了，如何解決這個問題！在呈現在DOM音頻元素我的「初始化」的方法，我添加了這些下面幾行：

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

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

當我改變了源空，迫使玩家再次加載，它會清除緩衝區，從而調用控制器每次刷新。

Answer 2

向URL添加一個隨機數，使瀏覽器每次都認爲它是一個不同的文件。

所以，與其

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

使用

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