标签: web-audio-api

如何在Web音频API中反向播放,但同时也保持前进版本?

据我所知,谷歌浏览器(v21)中的Web Audio API不支持以下功能:

    source.playbackRate.value = -1; 
Run Code Online (Sandbox Code Playgroud)

我非常希望!我会耐心等待,但与此同时,这篇文章有一个不错的替代解决方案。我采用它来尝试反转从已加载的缓冲区列表加载的我自己的音频样本,希望每个加载的缓冲区都可以具有正向和反向版本,如下所示:

    function finishedLoading(bufferList)  {
        for (var it = 0; it < this.urlList.length; ++it) {  
            storedBuffer[it] = bufferList[it]; // assign bufferList to globals
            storedBufferR[it] = bufferList[it];

            // attempt to reverse storedBufferR only ...
            Array.prototype.reverse.call( storedBufferR[it].getChannelData(0) );
            Array.prototype.reverse.call( storedBufferR[it].getChannelData(1) ); 
        }
    }
Run Code Online (Sandbox Code Playgroud)

上面的函数确实可以反转播放,但是它可以同时反转'storedbufferR' 'storedbuffer',这样所有缓冲区都可以反转!

所以这是我迷路的地方...我知道Array.protoype影响所有数组,所以我想我可以看看'storedBufferR'上的反向方法如何影响'storedBuffer'。编辑:反向方法仅影响所讨论的数组

但是可以重写上面的函数以确保array.protoype仅影响我要反转的存储缓冲区吗?如果不是,是否还有另一种方式可以存储正向和反向版本?

javascript html5 google-chrome audiobuffer web-audio-api

3
推荐指数
1
解决办法
1578
查看次数

从HTML5音频麦克风流中获取音频级别

在先前的堆栈溢出问题上,我发现了以下代码:

<script>
// this is to store a reference to the input so we can kill it later 
var liveSource;
// creates an audiocontext and hooks up the audio input
function connectAudioInToSpeakers(){
  var context = new webkitAudioContext();  
  navigator.webkitGetUserMedia({audio: true}, function(stream) {
    console.log("Connected live audio input");
    liveSource = context.createMediaStreamSource(stream);
    liveSource.connect(context.destination);
    console.log(liveSource);
  });
 }
// disconnects the audio input
function makeItStop(){
   console.log("killing audio!");
   liveSource.disconnect();
 }
// run this when the page loads
connectAudioInToSpeakers();
</script>
Run Code Online (Sandbox Code Playgroud)

它从用户的麦克风获取音频并通过扬声器播放.我想要的是输入的水平(幅度)(例如,如果发生剪辑,我可以显示红色警告,或告诉用户他们需要说出来).在上面的代码中,我如何实际获取原始数据?

例如,如何将实际数字记录到控制台?我猜它都存储在liveSoure中?

我不需要任何聪明的画布动画等,只需要一个数字,告诉我输入的声音有多大.这个比较简单吗?如果是这样,它是如何完成的?

谢谢

webkitaudiocontext web-audio-api

3
推荐指数
1
解决办法
4013
查看次数

如何用web audio api测量压缩?

我想创建一个HTML计量器来显示压缩器节点的减少量.

我使用了这段代码,但它没有改变metter

compressor = context.createDynamicsCompressor();
compressor.threshold = -50;
compressor.ratio = 12;
compressor.attack = 0.003;
compressor.reduction.onchange = function () {
  var gainReduction = pluginSlot1.reduction;
  document.getElementById("meter").value = gainReduction.value;
};
Run Code Online (Sandbox Code Playgroud)

这与此HTML相关联

<meter id ="meter"min ="0"max ="100">

为了让它起作用,我需要做什么?

javascript html5 meter web-audio-api

3
推荐指数
1
解决办法
632
查看次数

网络音频:Hz和Cents

我正在尝试制作一个简单的振荡器程序,我可以改变Octave类型的Massive VST显示正负数的方式:

大规模振荡器

现在,我知道一个八度音程有1200美分(每个半音100美分).我遇到的问题是,在制作Osc代码时,我意识到它的音高是用Cents测量的.

ctx = new webkitAudioContext(); 
function osc1(pitch){ 
osc = ctx.createOscillator(), 
osc.type = 2; //0 = sine, 1 = square, 2 = saw, 3 = triangle, 4 = custom
osc.frequency.value = pitch; //in cents
gainNode = ctx.createGainNode(); 
osc.connect(gainNode); 
gainNode.connect(ctx.destination);
gainNode.gain.value = 1; 
osc.noteOn(0); 
};

osc1 (20);
Run Code Online (Sandbox Code Playgroud)

由于Pitch改变了音符的频率,我很困惑的是,没有MIDI键盘我怎么知道

  1. 正在播放什么音符?
  2. 正在播放音符的频率是多少?

此外,我怎样才能从这些波形中获得低音?我做了几个测试,产生1美分,2美分,5美分,20美分等声音,看看它们是如何发声的,当Osc以1美分的速度产生音高时,我得到的只是低咔嗒声,而2美分,我在4/4节拍中获得几乎相同的点击.根据我的理解,您可以在地图上查看像频率一样的频率,同样地,像这些点之间的距离一样.话虽如此,由于声音是直接从浏览器生成的,因此美分如何确定音符的频率?另外,如果它只是移动振荡器的音高那么简单,那么振荡器的启动是什么?换句话说,你在说什么"投球"?

我希望我写的内容很有意义,因为我自己很困惑.

感谢您的任何帮助和反馈!

html javascript audio html5 web-audio-api

3
推荐指数
1
解决办法
897
查看次数

防止多个 AudioContexts

我遵循了一种使用 Webaudio 将声音附加到对象的模式。它运行良好,但是如果我在页面上生成多个项目并附加此脚本,我会得到一个 console.log,表明我已经超过了每页可用的最大音频上下文数。

我的理解是该行声明了audioContext附加到窗口的 AudioContext,而不是声明一个新的。我如何询问窗口是否已经有一个 AudioContext 并简单地将音频节点添加到它的图形中?

var that = this
  , audioContext = window.AudioContext || window.webkitAudioContext;

if (!audioContext) {
  console.warn("Web Audio API not supported in this browser.");
  return;
}

this.context = new audioContext();
Run Code Online (Sandbox Code Playgroud)

html javascript web-audio-api

3
推荐指数
1
解决办法
1119
查看次数

使用Web音频API在指定的持续时间(以毫秒为单位)后停止播放声音

在使用AudioBufferSourceNode开始播放来自AudioBuffer的音频后,如何在预定时间(以毫秒为单位)后停止播放?我的设置很简单:

// create audio source
var source = audioCtx.createBufferSource();

// play audio from source
source.start();
Run Code Online (Sandbox Code Playgroud)

使用AudioBufferSourceNode.stop()我只能以秒为单位指定此持续时间,但由于某种原因,提供任何非整数将被评估为零,并使音频立即停止:

source.stop(0.25); // should be 250 milliseconds, but audio stops immediately
Run Code Online (Sandbox Code Playgroud)

setTimeout不够精确,偶尔出现抖动/漂移,特别是如果UI工作很多,或者其他计算正在其他地方执行.

setTimeout(function () {
    source.stop(); // very inaccurate
}, 250);
Run Code Online (Sandbox Code Playgroud)

是否有一个简单的解决方案,在一定的毫秒数后停止播放音频,而不是像工作线程中的繁忙等待那样的黑客,或类似的?

javascript web-audio-api

3
推荐指数
1
解决办法
869
查看次数

Web Audio API中的简单传递AudioNode?

使用Web Audio API,我希望将一个外部AudioNode连接到一个封装的子系统,该子系统由任意可变的内部AudioNodes动态链组成,因此,我需要一个节点作为固定入口点。

可以通过一个非常简单的AudioNode列表来表示外部节点与子系统之间的关系(彼此之间的每个后续节点从上到下连接,上述子系统以短划线开头):

externalNode
 - input
 - effectNode1
 - effectNode2
 - effectNode3
 - outnode
externalNode
destination
Run Code Online (Sandbox Code Playgroud)

但是,Web Audio API中没有简单的传递节点。如果我想保持良好的性能,我将如何克服这个问题?我目前使用的是一个简单的GainNode,其gain.value设置为,1因此它不会影响输出,但是设置仍然意味着需要额外的处理工作。

另一种可能的设置是使用AnalyserNode,它可以使音频本身保持不变,但我不确定其性能或如何测量。

javascript html5 web-audio-api

3
推荐指数
1
解决办法
168
查看次数

带有 fetch 的 WebAudio 流:DOMException:无法解码音频数据

我正在尝试使用 Chrome 51 播放来自 fetch API 的无限流。(网络摄像头音频流为 Microsoft PCM,16 位,单声道 11025 Hz)

该代码对 mp3 文件几乎可以正常工作,除了一些小故障,但由于某种原因,它对 wav 文件根本不起作用,我得到“DOMException:无法解码音频数据”

该代码改编自此答案断断续续/听不清播放,通过 Web Audio API 使用分块音频

知道是否可以使其与 WAV 流一起使用吗?

function play(url) {
  var context = new (window.AudioContext || window.webkitAudioContext)();
  var audioStack = [];
  var nextTime = 0;

  fetch(url).then(function(response) {
    var reader = response.body.getReader();
    function read() {
      return reader.read().then(({ value, done })=> {
        context.decodeAudioData(value.buffer, function(buffer) {
          audioStack.push(buffer);
          if (audioStack.length) {
              scheduleBuffers();
          }
        }, function(err) {
          console.log("err(decodeAudioData): "+err);
        });
        if (done) {
          console.log('done'); …
Run Code Online (Sandbox Code Playgroud)

audio streaming google-chrome fetch web-audio-api

3
推荐指数
1
解决办法
6618
查看次数

audiocontext Samplerate在读取8次后返回null

我已经做了一个函数来产生一个鼓声,然后被调用4次它停止使用错误:

TypeError:null不是对象(评估'audioCtx.sampleRate')在控制台中显示.

这个功能出了什么问题?我的代码是:

drum = function(){
    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    var frameCount = audioCtx.sampleRate/20
    var myArrayBuffer = audioCtx.createBuffer(1, frameCount, audioCtx.sampleRate);
    var nowBuffering = myArrayBuffer.getChannelData(0);
    for (var i = 0; i < frameCount; i++) {
        nowBuffering[i] =Math.sin(i**(1/1.8)/4)
    }

    var source = audioCtx.createBufferSource();
    source.buffer = myArrayBuffer; source.connect(audioCtx.destination);
    source.start();
}
Run Code Online (Sandbox Code Playgroud)

javascript web-audio-api

3
推荐指数
1
解决办法
598
查看次数

AudioContext 增益节点不会使音频源静音(Web Audio API)

我使用three.js和Web Audio API制作了一些音乐可视化,但在静音音频时遇到了问题。

我目前有一个带有分析器和源缓冲区的 AudioContext 对象。我正在添加一个增益节点来使音频静音,目前该节点无法正常工作。当我单击静音时,音频电平会发生变化(实际上变大了),所以我知道增益正在影响某些东西。

代码:

// AudioHelper class constructor

function AudioHelper() {
    this.javascriptNode;
    this.audioContext;
    this.sourceBuffer;
    this.analyser;
    this.gainNode;
    this.isMuted;
}

// Initialize context, analyzer etc

AudioHelper.prototype.setupAudioProcessing = function () {
    // Get audio context
    this.audioContext = new AudioContext();

    this.isMuted = false;

    // Create JS node
    this.javascriptNode = this.audioContext.createScriptProcessor(2048, 1, 1);
    this.javascriptNode.connect(this.audioContext.destination);

    // Create Source buffer
    this.sourceBuffer = this.audioContext.createBufferSource();

    // Create analyser node
    this.analyser = this.audioContext.createAnalyser();
    this.analyser.smoothingTimeConstant = 0.3;
    this.analyser.fftSize = 512;

    this.gainNode = this.audioContext.createGain();

    this.sourceBuffer.connect(this.analyser);
    this.analyser.connect(this.javascriptNode);
    this.sourceBuffer.connect(this.audioContext.destination);

    this.sourceBuffer.connect(this.gainNode);
    this.gainNode.connect(this.audioContext.destination); …
Run Code Online (Sandbox Code Playgroud)

javascript web-audio-api

3
推荐指数
1
解决办法
3424
查看次数