다중 스트림이있는 웹 오디오

Question

RESTful 기반 웹 서비스를 통해 오디오를 스트리밍하려고합니다. 오디오 파일에 두 개의 AAC 228 Kbps 스테레오 트랙이 있습니다. 하나는 영어로, 다른 하나는 스페인어로.

내 GET 요청은 오디오 파일을 아무 문제없이 반환합니다. 그러나 기본적으로 파일의 첫 번째 소스 (이 경우 스페인어)로 설정됩니다.

궁극적으로 최종 사용자가 브라우저를 사용하고 필요에 따라 오디오 소스를 전환 할 수 있기를 바랍니다. 이미 대부분의 브라우저가 HTML5를 통해 제공되는 audioTracks API를 지원하지 않으며 최종 사용자를 IE 또는 Edge로 제한하지 않기를 바랍니다.

웹 오디오 API를 사용하여 수동으로 스트림을 시도하고 조작 할 수있게되었습니다.

테스트를 위해 현재 HTML은 재생 버튼 일뿐입니다. 이 초기 스트리밍 오디오를 작동

var context; 

window.addEventListener('load', init, false); 
function init() { 
    try { 
     // Fix up for prefixing 
     window.AudioContext = window.AudioContext||window.webkitAudioContext; 
     context = new AudioContext(); 
    } 
    catch(e) { 
     alert('Web Audio API is not supported in this browser'); 
    } 
} 

var onError = function() { 
    $log.info("ERROR"); 
} 

$scope.audioActions = function() { 
    var request = new XMLHttpRequest(); 
    request.open('GET', 'http://localhost...', true); 
    request.responseType = 'arraybuffer'; 

    // Decode asynchronously 
    request.onload = function() { 
     context.decodeAudioData(request.response, function(buffer) { 
      $log.info(buffer) 

      var source = context.createBufferSource(); 
      source.buffer = buffer; 
      source.connect(context.destination); 
      source.start(0); 
     }, onError); 
    } 

    request.send(); 
}; 

을하고 난 <audio> 태그를 사용하는 것처럼 동일하게 작동 다음과 같이

<md-button class="md-raised" ng-click="audioActions()">Audio options</md-button> 

나의 현재의 .js이다.

버퍼 내의 오디오 스트림을 전환 할 수있는 방법이 있습니까?

다음은 내 파일에 -i는 FFmpeg에서 덤프입니다 :

[mov,mp4,m4a,3gp,3g2,mj2 @ 0000000000ea6920] stream 0, timescale not set 
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'E:\ServerFiles\tmp\audioExample.m4a': 
    Metadata: 
    major_brand  : M4A 
    minor_version : 0 
    compatible_brands: M4A mp42isom 
    creation_time : 1982-08-11T07:52:37.000000Z 
    title   : Test 
    artist   : Audio Example 
    album_artist : Audio Example 
    album   : Example 
    genre   : Test 
    track   : 1/20 
    disc   : 1/1 
    compilation  : 0 
    gapless_playback: 0 
    date   : 2017-08-16T08:00:00Z 
    account_id  : 
    rating   : 0 
    account_type : 0 
    season_number : 0 
    episode_sort : 0 
    media_type  : 1 
    purchase_date : 2017-08-16 15:59:27 
    sort_album  : Audio Example 
    composer  : Example 
    Duration: 00:02:59.00, start: 0.000000, bitrate: 160 kb/s 
    Stream #0:0: Audio: aac (HE-AAC), 48000 Hz, stereo, fltp (default) 
    Stream #0:1: Audio: aac (HE-AAC), 48000 Hz, stereo, fltp 

Answer 1

당신이 순간에 무엇을 요구 할 수있는 가장 쉬운 방법은 MediaSource 확장을 사용하는 것입니다. https://developer.mozilla.org/en-US/docs/Web/API/MediaSource

기본적으로 데이터를 버퍼링 한 다음 브라우저가 청크를 디코딩하도록합니다. 다른 것으로 전환하려면 다른 스트림에서 청크를 먹여 디코딩을 시작하십시오.

여기 더 좋은 예제가있다 : 지금 https://developers.google.com/web/fundamentals/media/mse/basics