1. ホーム
  2. Web制作
  3. html5

サンプルレートとビットレートを設定してmp3オーディオを録音するhtml5

2022-01-21 16:53:44

13年にhtml5録音をした時に問題になったのが、保存したwav形式のファイルが非常に大きかったので、サーバーにアップロードしてからラメのエンコーダーを呼び出して変換するという遠回りの方法をとったのですが、ファイルサイズが大きいためアップロードが遅かったのです。それにしても、フロントエンドの技術は本当に進化していて、ブラウザで直接MP3音声を録音できるlame encoderのjs版を実装している人がいますね。

lamejsの紹介

当初はオープンソースのプロジェクトがありました libmp3lame-js は、いい加減なソースコードを直接コンパイルしてjs化したもので、それを誰かがlibmp3lameをベースにjsで書き直したのが、今日の ラメジス プロジェクトです。libmp3lameと比較して、サイズが小さく、高速なエンコーディングを実現することができます。132秒の音声をエンコードするのに6.5秒しかかからないと言われています。

mp3オーディオの録音

私はコードを梳いてラップし、Githubに投稿しています。 mp3-recorder . 実装過程やlamejsの使い方に興味がある方は、私のソースコードを参照してください。FirefoxとWebkitのブラウザに対応しています。

64kbpsのビットレートで、録音した1分間の音声の長さは約480KBです。

呼び出しの例

/*
    The sampling frequency of MP3 is divided into 48000 44100 32000 24000 22050 16000 12050 8000

    Bitrate values against real audio (for reference only)
  16Kbps = telephone sound quality
  24Kbps = increased telephone quality, shortwave broadcast, longwave broadcast, European standard medium wave broadcast
  40Kbps = U.S. medium wave broadcast
  56Kbps=voice
  64Kbps=increased voice (best bit rate setting for cell phone ringtones, best setting for cell phone mono MP3 players)
  112Kbps=FM FM stereo broadcast
  128Kbps=Tape (best setting for cell phone stereo MP3 players, best setting for low-grade MP3 players)
  160Kbps=HIFI hi-fi (best setting for mid- to high-grade MP3 players)  
   192Kbps=CD (best setting for high-grade MP3 players)
  256Kbps=Studio Music Studio (for music enthusiasts)
*/

//the only parameter that affects the size of mp3 files is bitRate
//sampleRate is only for people with special needs
var recorder = new MP3Recorder({
    //numChannels: 1, //number of channels, default is 1
    //sampleRate: 8000, //sample rate, usually provided by the device, such as 48000
    bitRate: 64, //bitrate, do not go below 64, or you may record no sound (vocals)

    //recording end event
    complete: function (data, type) {
        //blob is mp3 audio data
        var blob = new Blob(data, { type: type });
    }
});

//Start recording
recorder.start(onSuccess, onError);

//Stop recording
recorder.stop();

//pause recording
recorder.pause();

//resume recording
recorder.resume();

使い方は簡単で、デモに詳細なコードがあるので、ここでは割愛します。

コードダウンロード

ソースコードとサンプルコード

ソースコードの更新はGithubをフォローしてください

この記事はhtml5録音mp3オーディオのサポートサンプルレートとビットレートの設定について紹介されています、より関連するhtml5録音mp3オーディオコンテンツは、スクリプトハウスの過去の記事を検索するか、次の関連記事を閲覧を続けて、あなたは将来的にもっとスクリプトハウスをサポートして願っています!.