标签: web-audio-api

问题

我正在开发一个Web应用程序,用户可以对音频样本进行排序,并可选择将效果应用于他们使用Web Audio API创建的音乐模式.模式存储为JSON数据,我想对每个模式服务器端的渲染音频进行一些分析.据我所知,这给我留下了两个选择:

1. 在服务器端运行我自己的渲染代码,尝试尽可能忠实于浏览器内渲染.也许我甚至可以从Chromium项目中取出Web Audio代码并对其进行修改,但这似乎可能需要做很多工作.

2. 渲染客户端,希望比实时更快,然后将渲染的音频发送到服务器.这是理想的(和DRY),因为只有一个引擎用于模式渲染.

在可能的解决方案

这个问题引导我到Chromium存储库中的这个代码示例,这似乎表明离线处理是可能的.诀窍似乎是webkitAudioContext用一些参数构造一个(通常使用零参数构造函数).以下是我对参数含义的猜测:

new webkitAudioContext(2,          // channels
                       10 * 44100, // length in samples
                       44100);     // sample rate

我稍微调整了样本,并在Windows,Mac和Linux上的Chrome 23.0.1271.91中进行了测试. 这是实例和结果(打开Dev Tools Javascript控制台以查看发生的情况):

• Mac - 它工作!!
• Windows - FAIL - SYNTAX_ERR:DOM异常12
• Linux - 失败 - SYNTAX_ERR:DOM异常12

webkitAudioContext我上面描述的构造函数导致Windows和Linux上的异常.

我的问题

离线渲染对于我正在尝试做的事情来说是完美的,但我无法在任何地方找到文档,并且支持不太理想.有没有人有关于此的更多信息？我是否应该尽快在Windows和/或Linux中期待对此的支持,或者我应该期待支持在Mac上很快消失？

我通过线路接收交错的16位PCM采样.每个样本都已签名

我把它读作Int16bit数组,让我们调用这个ALL_DATA.因此每个数组条目都是16位样本.

因为它是交错的,所以我把它提取到2个通道中RLRL我最终得到了一半大小为ALL_DATA数组的2(16位)数组.

之后,我查看每个示例并将其规范化为Float32Array,因为这是Web音频API使用的.

var normalizedSample =(sample> 0)？sample/32768:sample/-32768;

这是正确的方法吗？

我的声音变得扭曲了.你可以知道发生了什么.所以,如果你正在聆听经典吉他,那么听起来就像是电动的失真.

为了论证,我放下了示例代码,但是这段代码处理

MONO SOUND使示例更简单,因此我们也不必交错

var startTime = 0;
     var fileReader = new FileReader();
     fileReader.onload = function (e) {
                        var data = new DataView(e.target.result);

                    var audio = new Int16Array(data.byteLength / Int16Array.BYTES_PER_ELEMENT);
                    var len = audio.length;
                    for (var jj = 0; jj < len; ++jj) {
                        audio[jj] = data.getInt16(jj * Int16Array.BYTES_PER_ELEMENT, true);
                    }

                    var right = new Float32Array(audio.length);

                    var channleCounter = 0;
                    for (var i = 0; i < audio.length; ) {
                        var …

我想重播使用 Web Audio API 在 javascript 中录制的音频 blob (wav)。

我尝试了以下方法：

function replayBlob( blob ) {
    var blobURL = window.URL.createObjectURL(blob);
    var audio0 = new Audio(blobURL);
    audio0.play();
}

但此代码不会重播音频 blob。

我还尝试通过 html 音频标签重播 blob：

<audio id="wavSource" 
    src="blob:http%3A//localhost/f0b6bae9-7c70-4793-8436-7755a40bae3f" 
    type="audio/wav" controls>
</audio>

使用以下命令以编程方式设置 blob 源：

var blobURL = window.URL.createObjectURL(blob);
document.getElementById("wavSource").src = blobURL;

和音频播放调用使用：

document.getElementById("wavSource").play();

但没有声音播放。

为了验证，我下载了 blob：

var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = blobURL;
a.download = "test.wav";
a.click();

下载的 blob 包含 wav 格式的正确音频数据。如何在 JavaScript 中播放 Blob 中的音频数据？

WebAudio 允许通过 访问麦克风navigator.getUserMedia()。调用此方法时，浏览器会显示一个重新编码标志（Chrome 和 Edge 中的红点），表明麦克风正在使用中。这工作正常，但我希望能够停用麦克风，然后这个红点也应该消失。我以为打电话webcontext.close()也会停用红点标志，但事实并非如此，至少在 Chrome、Firefox 和 Edge 中是这样。

如何停用麦克风以使浏览器录音标志也消失？

我使用以下代码从 Node.js 的套接字解​​码音频块

window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
var delayTime = 0;
var init = 0;
var audioStack = [];
var nextTime = 0;

client.on('stream', function(stream, meta){
    stream.on('data', function(data) {
        context.decodeAudioData(data, function(buffer) {
            audioStack.push(buffer);
            if ((init!=0) || (audioStack.length > 10)) { // make sure we put at least 10 chunks in the buffer before starting
                init++;
                scheduleBuffers();
            }
        }, function(err) {
            console.log("err(decodeAudioData): "+err);
        });
    });
});

function scheduleBuffers() {
    while ( audioStack.length) {
        var buffer …

编辑：这篇文章不是我的重复。我试图将音频数据提取为二进制文件，像我之前提到的那样单独播放音频文件没有问题。

我正在尝试使用Web Audio Api从客户端的视频文件中提取音频。

var audioContext = new(window.AudioContext || window.webkitAudioContext)();
fileData = new Blob([input.files[0]]);
var videoFileAsBuffer = new Promise(getBuffer);
videoFileAsBuffer.then(function (data) {
    audioContext.decodeAudioData(data).then(function (decodedAudioData) {
        mySoundBuffer = decodedAudioData;
        soundSource = audioContext.createBufferSource();
        soundSource.buffer = mySoundBuffer;
        // soundSource.connect(audioContext.destination);
        // soundSource.start();
    });

当我取消最后两行的注释时，我听到上传的视频文件的声音。但是，当我在getChannelData方法的帮助下创建下载文件的链接时，它的大小几乎与视频文件相同。

我希望decodedAudioData只有音频二进制数据，并将其发送到我的网络服务，这是我唯一需要的。然而，这并没有像我预期的那样奏效。有人知道在客户端提取视频文件音频的方法吗？提前致谢。

这是getBuffer方法以防万一有人想知道：

function getBuffer(resolve) {
    var reader = new FileReader();
    reader.onload = function () {
        var arrayBuffer = reader.result;
        resolve(arrayBuffer);
    }
    reader.readAsArrayBuffer(fileData);
}

编辑：我能够通过在decodeAudioData函数中使用OfflineAudioContext来解码视频文件并获取音频 …

我正在使用一个 MediaStream 并使用画布和 WebAudio API 合并两个单独的轨道（视频和音频）。MediaStream 本身似乎并没有失去同步，但是在将其读入 MediaRecorder 并将其缓冲到视频元素中后，音频似乎总是比视频早得多这是似乎存在问题的代码：

let stream = new MediaStream();

// Get the mixed sources drawn to the canvas
this.canvas.captureStream().getVideoTracks().forEach(track => {
  stream.addTrack(track);
});

// Add mixed audio tracks to the stream
// /sf/ask/2949698181/
this.audioMixer.dest.stream.getAudioTracks().forEach(track => {
  stream.addTrack(track);
});

// stream = stream;
let mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm;codecs=opus,vp8' });

let mediaSource = new MediaSource();
let video = document.createElement('video');
video.src = URL.createObjectURL(mediaSource);
document.body.appendChild(video);
video.controls = true;
video.autoplay = true;

// Source open
mediaSource.onsourceopen = …

整个互联网上没有一个工作示例说明如何在浏览器中对声音文件/缓冲区/音频缓冲区执行 FFT 分析而不需要播放。 例如，Web 音频 API 已更改太多，无法再使用此库https://github.com/corbanbrook/dsp.js 。目前所有其他线索都无法解决问题。

编辑：我不需要操作任何数据，只需读取音频不同时刻的频谱。解决方案的输入可以是任何形式的数据（wav 文件、数组缓冲区、音频缓冲区等），但不能是流。理想情况下，预期输出将是数组（频率箱幅度）的数组（时刻）。

Web Audio API 允许我们播放合成声音。如果您使用 React Native 该怎么办？例如，考虑一个钢琴移动应用程序。我怎样才能发出声音？

我不是在寻找有助于播放或录制音频文件的库。

理想情况下，我想要https://tonejs.github.io/ for iOS/Android

我很难理解为什么我会抛出这个错误：

Debug.ts:8 未捕获错误：启动时间必须严格大于先前的启动时间

奇怪的是，它只在我刷新页面的 4/5 次时抛出此错误。大约有 1/5 的机会它会正常工作。这是我的代码：

let synth = new Tone.MetalSynth({
  portamento: 0,
  volume: -15,
  envelope: {
    attack: 0.001,
    decay: 1.4,
    release: 1,
  },
  harmonicity: 18.1,
  modulationIndex: 12,
  resonance: 1000,
  octaves: 1.5,
});

synth.chain(Tone.Destination);

let notes = ['A2', 'B2', 'C3', 'D3', 'E3', 'F3', 'G#3'];
let html = '';
for (let i = 0; i < notes.length; i++) {
  html += `<div class="whitenote" onmouseover="noteDown(this)" data-note="${notes[i]}"></div>`;
}

document.querySelector('.container-4').innerHTML = html;

function noteDown(el) {
  let note = el.dataset.note;
  synth.triggerAttackRelease(note, '16n');
}