logo标签列表

多流 Web 音频

javascripthtml5-audioaudio-streamingweb-audio-api
3
我正在尝试通过基于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
我现在的问题是我不知道如何获取这些单独的块。我的服务只返回许多音频文件中的一个。这些音频文件中嵌入了两个流。通过跟随链接，我可以理解如何缓冲加载整个文件。但是在这份文档中没有指定或给出一个同时包含两个音频流的文件的示例。除非我漏掉了什么。 - cain4355
@cain4355 这些文件的容器格式是什么？你能提供 ffmpeg -i yourfile 的输出吗？ - Brad
我已经将我的ffmpeg结果添加到了原始帖子中。 - cain4355
@cain4355 如果在JavaScript中无法解复用MP4，我认为你需要将其拆分成单独的文件。我怀疑很快（一年内），这将不再是必要的（对于现代浏览器），因为我们将获得多个音轨的适当支持。您可以使用类似ffmpeg -i audioExample.m4a -map 0:0 -c:a copy audioExample-track-0.m4a的工具来拆分它们。 - Brad
我该如何在JavaScript中进行MP4的分离复用？ - cain4355
@cain4355 真是噩梦 :-) 幸运的是，看起来你可能不必自己重新发明它...虽然我没有使用过，但可以查看 mp4box 的 JavaScript 构建：https://github.com/gpac/mp4box.js - Brad
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接