나는 오디오

Question

내가 서버에서 스트리밍 MP3 파일 재생하기 위해 HTML5 오디오 컨트롤을 사용하고

에 SRC를 설정 콘텐츠 헤더를 검색하기 위해 자바 스크립트를 사용할 수 :

<audio id="audio" controls="controls" src=""> 
</audio> 

을 그리고 내가 설정하고 사용자가 버튼을 클릭 동적으로 오디오 컨트롤의 src :

$('#myBtn').on('click', function (e) { 
    var audio = document.getElementById('audio'); 
    audio.src = "/api/audio/f56i4gi8lh"; 
    audio.load(); 
}); 

오디오가 잘 재생하지만, 나는 또한 오디오 스트리밍을 시작할 때 레이블에서 파일 이름을 표시하고 싶습니다. 문제는 해당 URL에서 오디오 스트리밍을 시작하기 전에 파일 이름이 아닌 id 파일 만 알고 있다는 것입니다. 그 파일 이름는 응답 (/api/audio/f56i4gi8lh의 응답의 헤더에 포함되어 내가 디버깅 할 때

이

내 F12 도구를 사용하여 헤더에 파일 이름을 볼 수 있습니다.

인가 javascript 또는 jQuery (오디오 컨트롤의 src을 설정하는 동안)에서 헤더 파일 이름을 추출하는 방법이 있습니까?

나는이 라인을 따라 뭔가있을 것이라고 생각합니다.

$('#myBtn').on('click', function (e) { 
    var audio = document.getElementById('audio'); 
    audio.src = "/api/audio/f56i4gi8lh"; 
    audio.load(function(response) { 
     var name = response.Header.filename; 
    }); 
}); 

그러나 이와 같은 문서는 찾을 수 없습니다.

Answer 1

유감 스럽지만 쉬운 일은 없습니다.

먼저 서버 구성에서 페이지가있는 도메인의 CORS를 올바르게 지원해야합니다.

다음으로 Fetch API로 미디어를 직접 요청하고 응답 헤더를 가로 채기 위해 MediaSource Extensions를 사용해야합니다. https://developer.mozilla.org/en-US/docs/Web/API/MediaSource

웹 워커를 사용하여 가져 오기를 처리 할 수 ​​있습니다. 나는 나 자신을 시도하지 않았기 때문에 구체적인 조언은 없지만, 기존 코드에있는 것처럼 일반 오디오 태그 src를 계속 사용할 수 있다는 것을 이해하고있다.

Fetch API를 사용하여 별도의 HEAD 요청을 만드는 방법도 있습니다. 이 별도의 요청이 귀하의 첫 번째 요청과 다른 응답을 가질 수 있으므로 이는 그리 좋지 않습니다. 그러나 그것은 당신을위한 가능성입니다.