Html5 Audio-Tag aktualisieren Inhalt nicht auf Seitenaktualisierung

Question

Ich entwickle eine Radio-Website, ich habe ein C# Back-End erstellt, die einen Strom von Bytes in die aktuelle HTTP-Antwort schreibt, die dann auf HTML5 geladen wird Audio Tag.

Mein Problem ist: Ich habe zum Beispiel 5 Lieder. Das gewünschte Verhalten ist, dass jedes Mal, wenn die Seite geladen wird, der Controller nach einem Zufalls-Song gefragt wird. Was tatsächlich passiert, ist, wenn die Seite zum ersten Mal geladen wird, der Controller aufgerufen wird und der Song normal abgespielt wird, aber wenn der Benutzer die Seite neu lädt oder zu einer neuen Seite und zurück zum Radio navigiert, wird das Audio-Tag anstelle von Wenn Sie den Controller erneut aufrufen, wird nur das wiedergegeben, was beim letzten Aufruf in den Audiopuffer heruntergeladen wurde. Erst wenn der heruntergeladene Puffer beendet ist, ruft das Audiotag den Controller auf, wodurch unerwünschte Überspringungen wie 15 Sekunden eines Songs erzeugt werden und das Starten eines neuen Liedes.

Mein Audio-HTML wird dynamisch auf einer "Render" -Methode erstellt. Ich habe versucht, die ID zufällig zu machen, um zu versuchen, den Puffer sauber zu machen, aber selbst mit einer neuen ID wird das Tag immer noch das abspielen, was mit dem Puffer geladen wurde, selbst wenn das preload-Attribut auf "none" gesetzt ist. Außerdem habe ich versucht, ein zufälliges Token als Parameter an den C# -Controller zu senden, um Caching-Probleme auf Basis der URL zu vermeiden, aber es hat nicht so gut funktioniert.

Heres mein Controller:

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); 
        } 

       } 
      } 
     } 

Und hier meine 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); 
} 

die "Render" -Methode wird das Audio-Element, dass Beiträge zu meinem Back-End erstellen.

Ich habe viel im Internet nach einer Möglichkeit gesucht, den Audiopuffer bei jeder Aktualisierung der Seite zu reinigen, aber ich konnte nichts finden.

Jede Hilfe ist willkommen,

Vielen Dank!

Answer 1

ich endlich herausgefunden, wie das Problem zu lösen! Auf meiner „initialisieren“ Methode, die das Audio-Element auf dem DOM macht, habe ich diese Zeilen darunter:

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

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

Wenn ich die Quelle den Player zu leeren geändert und zu zwingen wieder zu laden, den Puffer löscht, so rief der Controller bei jeder Aktualisierung.

Answer 2

Fügen Sie der URL eine Nonce hinzu, damit der Browser jedes Mal denkt, dass es sich um eine andere Datei handelt.

Anstatt also

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

Verwendung

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