Html5 오디오 태그가 페이지 새로 고침 내용을 새로 고침하지 않습니다.

Question

저는 라디오 웹 사이트를 개발 중이며 현재 HTTP 응답에 바이트 스트림을 작성하는 C# 백엔드를 작성했습니다. 그러면 HTML5에로드됩니다. 오디오 태그.

내 문제는 : 예를 들어 5 곡 있습니다. 원하는 동작은 페이지가로드 될 때마다 컨트롤러에 재생할 임의의 노래를 요청해야한다는 것입니다. 실제로 페이지가로드되고 컨트롤러가 호출되고 노래가 정상적으로 재생되지만 실제로 사용자가 페이지를 다시로드하거나 새 페이지로 이동 한 다음 다시 라디오로 이동하면 태그 대신 컨트롤러를 다시 호출하고 마지막 호출에서 오디오 버퍼에 다운로드 한 내용을 재생하며 다운로드 한 버퍼가 재생을 마칠 때만 오디오 태그가 컨트롤러를 호출하여 원치 않는 건너 뛰기가 발생합니다 (예 : 15 초 분량의 노래 재생). 새로운 노래 시작하기.

내 오디오 HTML은 "렌더링"방법으로 동적으로 생성됩니다. 나는 무작위로 id를 만들고 버퍼를 깨끗하게 만들려고했으나 새로운 ID로도 preload 속성이 "none"으로 설정되어 있어도 태그는 여전히 버퍼에 미리로드 된 것을 재생합니다. 그 외에도 C# 컨트롤러에 임의의 토큰을 매개 변수로 전송하여 URL을 기반으로 캐싱 문제를 피하려고했지만 잘 작동하지 않았습니다.

Heres는 내 컨트롤러 :

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

나는 마지막으로 문제를 해결하는 방법을 알아 냈어! 따라서 호출

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

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

내가 비우고 다시로드 플레이어를 강제로 소스를 변경, 그것은 버퍼를 지 웁니다는 DOM의 오디오 요소를 렌더링 내 "초기화"방법에, 나는 선 아래에 이러한 추가 모든 리프레시시 컨트롤러.

Answer 2

URL에 넌스 (nonce)를 추가하여 매번 브라우저가 다른 파일이라고 생각하게 만듭니다.

그래서, 대신

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

사용

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