サンプルレートとビットレートを設定してmp3オーディオを録音するhtml5
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();
使い方は簡単で、デモに詳細なコードがあるので、ここでは割愛します。
コードダウンロード
この記事はhtml5録音mp3オーディオのサポートサンプルレートとビットレートの設定について紹介されています、より関連するhtml5録音mp3オーディオコンテンツは、スクリプトハウスの過去の記事を検索するか、次の関連記事を閲覧を続けて、あなたは将来的にもっとスクリプトハウスをサポートして願っています!.
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
html5で複数ページ通信を行うsharedWorkerのコード例
-
キャンバスをベースにしたHTML5で電子署名を実現、PDF文書も生成可能
-
html5ジャンプアプレット wx-open-launch-weappは落とし穴に踏み込んだ
-
HTML5におけるCSSアピアランスプロパティの説明
-
ウェブサイトパフォーマンスのための画像読み込みを遅らせる5つのコツ(要約)
-
携帯電話のHtml5を達成するためにカメラのメソッドを呼び出すには
-
9ボックスグリッドの原則を用いたHTMLページレイアウト
-
iframeタグが入れ子になっている問題の解決法
-
Canvasシリーズのフィルター効果
-
HTML5サインイン機能