純jsはweb端の録音と再生機能を実現する

純粋なjsはweb端の録音機能を実現して、機能は特に多くなくて、次第に増加して、詳しい住所:github.
getUserMediaはlocalhostと127以外の場合、httpsを開く必要があります.テンセントクラウドの登録がないため、demoは置かず、自分でコードを取得してテストを開始することができます.
インプリメンテーションモード
実現原理は主に以下の3点で、

webrtcのgetUserMediaメソッドを使用してデバイスのオーディオ入力を取得し、audioprocessを使用してオーディオストリーム(pcmストリーム、範囲−1〜1)を取得する.

トランスコードは、フロントエンドにおけるArrayBuffer等のバイナリ操作によりサンプリングビット数毎にストリーム情報を処理する.

decodeAudioDataを使用してarraybufferをaudioBufferにトランスコードして再生します(小さなファイル、大きなファイルはaudioを使用します).

使用方法
script方式
dist下のrecorderを直接導入する.jsでいい

let recorder = new Recorder();

npm方式
インストール:

npm i js-audio-recorder

呼び出し:

import Recorder from 'js-audio-recorder';

let recorder = new Recorder();

API
きほんほうしき

//     
recorder.start();
//     
recorder.pause();
//     
recorder.resume()
//     
recorder.stop();
//     
recorder.play();
//       ，    ，fn     ，
recorder.destroy(fn);
recorder = null;

ダウンロード機能

//   pcm  
recorder.downloadPCM();
//   wav  
recorder.downloadWAV();
//    pcm  ，wav   
recorder.downloadPCM('   ');

録音時間の取得

//         
recorder.onprocess = function(duration) {
    console.log(duration);
}
//         
console.log(recorder.duration);

デフォルト設定
sampleBits、サンプリングビット数、デフォルトは16 sampleRate、サンプリング周波数、ブラウザデフォルト、私のchromeは48000 numChannels、チャネル数、デフォルトは1
入力パラメータ
新Recorderでは入力パラメータをサポートし、

{
    sampleBits: 16,         //     ，  8 16
    sampleRate: 16000,      //    ，  11025、16000、22050、24000、44100、48000
    numChannels: 1,         //   ，  1 2
}

に注意

は127.0.0.1またはlocalhost試行を使用します.getUserMediaは、高バージョンのchromeでhttpsを使用する必要があるためです.

互換性
主に以下の点です.

Web Audio Api

https://caniuse.com/#search=w...

getUserMedia

https://caniuse.com/#search=g...

Typed Arrays

https://caniuse.com/#search=t...
ようこそ:recorder.
その他のリソース
アリクラウドに基づいて簡単な音声認識機能を実現web Audio学習とオーディオ再生web Audio実現pcmオーディオデータ収集js実現pcmデータ符号化js転化pcmからwavフォーマットと再生