4

私はどのように機能しているかを理解しようとしAudioWorkletており、いくつかのテストを行いました。

これまでのところ、ブラウザにバックグラウンドでサウンドを再生させて別のことをさせると (たとえば、Photoshop や VSCode などの CPU 負荷の高いアプリケーションを開いてウィンドウを移動させるなど)、大きな「クラッキング」の問題が発生します。

最初はハードウェアの問題だと思いました。Catalina にアップグレードし、見つかったシステム オーディオ拡張機能をすべて削除しましたが、Android や他の友人のコンピューター (Mac、PC) でも同じです。

私はバージョン 1.0.1 Chromium: 78.0.3904.108 (公式ビルド) (64 ビット)を使用しています。

このYouTube ビデオは、クラッキング オーディオの問題を示しています。

ここでテストできる 2 つの CodePen デモを作成しました。

Web オーディオ クラック (バニラ + ワークレットなし) :

const ctx = new(window.AudioContext || window.webkitAudioContext)();
const request = new XMLHttpRequest();
const gainNode = ctx.createGain();
const sourceNode = ctx.createBufferSource();

request.open('GET', 'https://poppublic.s3.amazonaws.com/other/2.mp3', true);
request.responseType = 'arraybuffer';
request.onload = () => {
  ctx.decodeAudioData(request.response, buffer => {
    sourceNode.buffer = buffer;
    console.log(sourceNode.buffer.sampleRate);
  });
};
request.onerror = function(e) {
  console.log('HTTP error', e);
};
request.send();
play = () => {
  sourceNode.connect(gainNode);
  gainNode.connect(ctx.destination);
  sourceNode.start(0);
}
stop = () => {
  sourceNode.stop(0);
}
<button onClick="play()">Play</button>
<button onClick="stop()">Stop</button>

Web オーディオ クラック (バニラ + ワークレット) :

const ctx = new(window.AudioContext || window.webkitAudioContext)();
const request = new XMLHttpRequest();
let gainNode = null;
let sourceNode = null;
let buffer = null;
let worklet = null;

try {
  const script = 'https://poppublic.s3.amazonaws.com/other/worklet/processor.js';
  
  ctx.audioWorklet.addModule(script).then(() => {
    worklet = new AudioWorkletNode(ctx, 'popscord-processor')
    request.open('GET', 'https://poppublic.s3.amazonaws.com/other/2.mp3', true);
    request.responseType = 'arraybuffer';
    request.onload = () => {
      ctx.decodeAudioData(request.response, buff => {
        buffer = buff;
        console.log(buff.sampleRate);
      });
    };
    request.onerror = function(e) {
      console.log('HTTP error', e);
    };
    request.send();
  });
} catch (e) {
  this.setState({
    moduleLoaded: false
  });
  console.log('Failed to load module', e);
}
play = () => {
  stop();
  gainNode = ctx.createGain();
  sourceNode = ctx.createBufferSource();
  sourceNode.buffer = buffer;
  sourceNode.connect(gainNode);
  gainNode.connect(ctx.destination);
  sourceNode.start(0);
}
stop = () => {
  try {
    sourceNode.disconnect();
    gainNode.disconnect();
    sourceNode.stop(0);
  } catch (e) {
    console.log(e.message)
  }
}
<button onClick="play()">Play</button>
<button onClick="stop()">Stop</button>

聞こえるピアノ MP3 は、スタジオで録音された 48000Hz / 32 ビット / 320kb のオーディオです。

バグを報告する前に、コードが正しいことを確認する必要があります。たぶん、私は物事を本来あるべき方法で連鎖させていません。

4

1 に答える 1