具有多个流的Web音频

时间:2017-09-19 06:04:20

标签: javascript html5-audio audio-streaming web-audio web-audio-api

我正在尝试通过基于RESTful的Web服务传输音频。我的音频文件包含两个不同的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

1 个答案:

答案 0 :(得分:0)

目前要做的最简单的方法是使用MediaSource Extensions。 https://developer.mozilla.org/en-US/docs/Web/API/MediaSource

基本上,您缓冲数据,然后让浏览器解码块。当你想切换到别的东西时,只需从另一个流开始输入它来解码。

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