javascript - 具有多个流的网络音频

Question

我正在尝试通过基于 RESTful 的网络服务流式传输音频。我的音频文件包含两个不同的 AAC 228 Kbps 立体声轨道。一个是英语，另一个是西类牙语。

我的 GET 请求返回音频文件没问题。但是，它默认为文件中的第一个来源(在本例中为西类牙语)。

最终，我希望最终用户能够使用浏览器并根据需要在音频源之间切换。我已经知道大多数浏览器目前不支持通过 HTML5 提供的 audioTracks API，我不希望将我的最终用户限制为 IE 或 Edge。

这让我开始使用 Web Audio API 来尝试手动操作流。

为了测试我当前的 HTML 只是一个播放按钮。

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

我现在的.js如下:

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> 一样标签。

有没有办法能够在缓冲区内的音频流之间切换？

下面是我文件中 ffmpeg -i 的转储:

[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 Extensions。 https://developer.mozilla.org/en-US/docs/Web/API/MediaSource

基本上，您缓冲数据，然后让浏览器解码 block 。当您想切换到其他内容时，只需开始从其他流中输入数据 block 进行解码即可。

这里有一个更好的例子:https://developers.google.com/web/fundamentals/media/mse/basics