MediaSource API를 사용하여 잘려진 오디오를 스트리밍하는 방법
와 더불어 MediaSource API, 너는 할 수있다. 미디어 스트림 생성 및 구성 브라우저에서 바로. 그것은 당신이 미디어 데이터에 대해 다양한 작업 수행 미디어 관련 HTML 태그 (예 : 또는 . 예를 들어 서로 다른 스트림을 믹스하다., 겹치는 미디어 만들기, 게으른로드 미디어, 과 미디어 측정 항목 편집 볼륨이나 주파수 변경과 같은.
이 게시물에서 우리는 오디오 샘플을 스트리밍하다 (잘린 MP3 파일)을 MediaSource API 브라우저에서 바로 음악 사전보기 귀하의 청중에게. 우리는 어떻게 API에 대한 지원을 감지합니다., 어떻게 HTML 미디어 요소를 연결한다. API를 사용하는 방법 미디어 가져 오기 Ajax를 통해, 그리고 마지막으로 어떻게 그것을 흘리다.
우리가 무엇을하고 있는지 미리보고 싶다면, Github의 소스 코드, 또는 데모 페이지.
1 단계. HTML 만들기
HTML을 만들려면 태그가있는 통제 수단 속성 귀하의 페이지로 이동하십시오. 이전 버전과의 호환성을 위해 기본 오류 메시지 추가 브라우저가 기능을 지원하지 않는 사용자의 경우 이 메시지를 켜거나 끄기 위해 JavaScript를 사용합니다..
2 단계. 브라우저 지원 검색
자바 스크립트에서 시도하다. 잡다. 그럴 것이다. 오류를 던지다 만약 MediaSource API는 지원되지 않습니다. 다른 말로하면 사용자의 브라우저에서 MediaSource (열쇠) 존재하지 않는다 ~ 안에 창문 목적.
try if (! MediaSource 'in window) 새로운 ReferenceError를 던집니다 ('윈도우 객체에 MediaSource 속성이 없습니다. ') catch (e) console.log (e); 3 단계. MIME 지원 검색
지원 확인 후, MIME 형식의 지원. 스트리밍하려는 미디어의 MIME 유형이 브라우저에서 지원되지 않는 경우, 사용자에게 경고 과 오류를 던지다.
var mime = '오디오 / mpeg'; if (! MediaSource.isTypeSupported (mime)) alert ( '미디어를 재생할 수 없습니다.'+ mime + 'MIME 형식의 미디어는 지원되지 않습니다.'); throw ( '+ mime +'형식의 미디어는 지원되지 않습니다. ');
위의 코드 스 니펫은 안쪽에 시험 블록, 전에 잡기 블록 (참고로 줄 번호 매기기를 따르거나 Github의 최종 JS 파일을 확인하십시오).
4 단계.
새 항목 만들기 MediaSource 개체 및 그것을 소스로 지정하십시오. 꼬리표 ~을 사용하여 URL.createObjectURL () 방법.
var audio = document.querySelector ( 'audio'), mediaSource = new MediaSource (); audio.src = URL.createObjectURL (mediaSource);
5 단계. SourceBuffer ~에 반대하다 MediaSource
HTML 미디어 요소 미디어 소스에 액세스합니다. 준비가되었다. 몹시 떠들어 대다 SourceBuffer 사물, MediaSource API 해고하다 소스 펜 행사 .
그만큼 SourceBuffer 목적 미디어 덩어리를 보유하고있다. 결국 디코딩되고 처리되고 재생됩니다. 싱글 MediaSource 대상 수 복수를 가다. SourceBuffer 사물.
내부 이벤트 핸들러 소스 펜 행사, ~을 추가하다 SourceBuffer ~에 반대하다 MediaSource 와 더불어 addSourceBuffer () 방법.
mediaSource.addEventListener ( 'sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime););
6 단계. 미디어 가져 오기
이제 당신은 SourceBuffer 객체, 시간이다. MP3 파일 가져 오기. 이 예에서는 AJAX 요청 사용.
용도 배열 버퍼 같이 응답 유형, 어느 이진 데이터를 나타냅니다.. 응답을 성공적으로 가져 왔을 때, 에 추가하다 SourceBuffer 와 더불어 appendBuffer () 방법.
xhr.open ( 'GET', 'sample.mp3'); xhr.responseType = 'arraybuffer'XMLHttpRequest의 새로운 XMLHttpRequest는, (); 파일; catch (e) console.error (e);, xhr.send (););
7 단계. 스트림의 끝을 나타냅니다.
API가 데이터 추가를 완료하면 SourceBuffer ~ 이벤트가 호출 됨 updatend 해고 당한다.. 이벤트 핸들러 내부에서 스트림의 끝() 의 방법 MediaSource 에 스트림이 끝났음을 나타냅니다..
xhr.open ( 'GET', 'sample.mp3'); xhr.responseType = 'arraybuffer'XMLHttpRequest의 새로운 XMLHttpRequest는, ; ();; ;
8 단계. 미디어 파일 자르기
그만큼 SourceBuffer 물건이있다 두 가지 특성 전화 한 appendWindowStart 과 appendWindowEnd 그 미디어 데이터의 시작 및 종료 시간 필터링하려고합니다. 아래에 강조 표시된 코드 필터는 처음 4 초 MP3의.
mediaSource.addEventListener ( 'sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0; ...));
데모
그게 전부입니다. 오디오 샘플이 스트리밍된다. 웹 페이지에서. 를 위해 소스 코드, 우리를 보아라. Github 레포 최종 결과를 확인하려면 데모 페이지.
브라우저 지원
이 글을 쓰는 시점에서 MediaSource API는 모든 주요 브라우저에서 공식적으로 지원됩니다. 그러나 테스트 결과에 따르면 구현은 Firefox에서 버그가 있습니다., 웹킷 브라우저는 여전히 appendWindowStart 재산.
MediaSource API는 아직 실험 단계에있다., 높은 편집 기능에 대한 액세스는 제한 될 수 있지만 기본 스트리밍 기능은 당신이 할 수있는 것이다. 바로 사용하다.
