html代コード：
<!DOCTYPE html><html> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>火星黑洞</title> </head> <body> <div> <audio autoplay></audio> <input onclick=startRecording() type=button value=录音 /> < input onclick=stopRecording() type=button value=停止 /> <input onclick=playRecording() type=button value=播放 /> <input onclick=uploadAudio() type=button value=提交 /> <br /> <div id=recordingslist></div> </div> <script type=text/javascript src=js/HZRecorder.js></script> <script> var レコーダー; var audio = document.querySelector('audio'); function startRecording() { HZRecorder.get(function(rec) { レコーダー = rec; レコーダー.start(); }, { サンプルビット: 16, サンプルレート: 16000 });関数 stopRecording() { レコーダー.stop(); var blob = レコーダー.getBlob(); var url = URL.createObjectURL(blob); var div = document.createElement('div'); var au = document.createElement('audio'); var hf = document.createElement('a'); au.controls = true; au.src = URL; hf.href = URL; hf.download = new Date().toISOString() + '.wav'; hf.innerHTML = hf.download; div.appendChild(au); div.appendChild(hf);録音リスト.appendChild(div);関数 playRecording() { レコーダー.プレイ(オーディオ); } function UploadAudio() { Recorder.upload(Handler1.ashx, function(state, e) { switch(state) { case 'uploading': //varpercentComplete = Math.round(e.loaded * 100 / e.total) + '%'; case 'ok': //alert(e.target.responseText); case 'error':アラート(上传取消); ケース 'キャンセル': アラート(上传取消); </script> </body></html>HZRecorder.js
(function (window) { //兼容 window.URL = window.URL || window.webkitURL; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; var HZRecorder = function (ストリーム、設定) { 設定 = 設定 {}; config.sampleBits = config.sampleBits || 8 //取样数桁 8, 16 config.sampleRate = config.sampleRate || (44100 / 6) var context = new (window.webkitAudioContext) || window.AudioContext)(); context.createMediaStreamSource(stream); var createScript = context.createScriptProcessor || context.createJavaScriptNode; var Recorder = createScript.apply(context, [4096, 1, 1]); var audioData = { size: 0 / /录音文件长度 、バッファ: [] //录音缓存、inputSampleRate: context.sampleRate //出力取取率 、inputSampleBits: 16 //出力取取数ビット 8, 16 、outputSampleRate: config.sampleRate //出力取取率 、oututSampleBits: config.sampleBits //出力取取数ビット 8、 16、入力: 関数 (データ) { this.buffer.push(new Float32Array(data)); this.size += data.length; } , compress: function () { //合并压缩 //合并 var data = new Float32Array(this.size);変数オフセット = 0; for (var i = 0; i < this.buffer.length; i++) { data.set(this.buffer[i], offset);オフセット += this.buffer[i].length; } //圧縮変数圧縮 = parseInt(this.inputSampleRate / this.outputSampleRate); var length = data.length / 圧縮; var result = 新しい Float32Array(長さ); var インデックス = 0、j = 0; while (インデックス < 長さ) { 結果[インデックス] = データ[j]; j += 圧縮;インデックス++;結果を返します。 } , encodeWAV: function () { var sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate); var sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits); var bytes = this.compress(); var dataLength = bytes.length * (サンプルビット / 8); var バッファ = 新しい ArrayBuffer(44 + dataLength); var data = 新しいDataView(バッファ); var channelCount = 1;//单声道 var offset = 0; var writeString = function (str) { for (var i = 0; i < str.length; i++) { data.setUint8(offset + i, str.charCodeAt(i)); } } // 资源交换文件标识符 writeString('RIFF');オフセット += 4; // 以下のアドレスは文件尾文字数、つまり文件サイズ -8 から始まります。 data.setUint32(offset, 36 + dataLength, true);オフセット += 4; // WAV文件标志 writeString('WAVE');オフセット += 4; // 波形格式标志 writeString('fmt ');オフセット += 4; // 过滤字节、一般的には 0x10 = 16 data.setUint32(offset, 16, true);オフセット += 4; // 格式类别 (PCM 形式取样データセット) data.setUint16(offset, 1, true);オフセット += 2; // 通路数 data.setUint16(offset, channelCount, true);オフセット += 2; // 取率,秒样形式,各道の放送速度を表示 data.setUint32(offset,sampleRate,true);オフセット += 4; // 波形データ転送率 (每秒平均字数) 单音声道×每秒データビット数×每样サンプルビット/8 data.setUint32(offset, channelCount * sampleRate * (sampleBits / 8), true);オフセット += 4; //快データ调整数取样一次占用字节数单音道×每样本のデータビット数/8 data.setUint16(offset, channelCount * (sampleBits / 8), true);オフセット += 2; // 每样提供据置数 data.setUint16(offset,sampleBits, true);オフセット += 2; // データーベース标识符 writeString('data');オフセット += 4; // データセットの数、つまりデータセットサイズ -44 data.setUint32(offset, dataLength, true);オフセット += 4; // 書き込み取样データ if (sampleBits === 8) { for (var i = 0; i < bytes.length; i++, offset++) { var s = Math.max(-1, Math.min(1, bytes) [私]））; var val = s < 0 ? s * 0x8000 : s * 0x7FFF; val = parseInt(255 / (65535 / (val + 32768))); data.setInt8(offset, val, true); } } else { for (var i = 0; i < bytes.length; i++, offset += 2) { var s = Math.max(-1, Math.min(1, bytes[i])); data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);新しい Blob([データ], { タイプ: 'audio/wav' }); を返します。 } }; //开始录音 this.start = function () { audioInput.connect(recorder); Recorder.connect(context.destination); } // this.stop = function () { Recorder.disconnect(); を停止します。 } //获取音音声文件 this.getBlob = function () { this.stop(); audioData.encodeWAV()を返します; } //回放 this.play = function (audio) { audio.src = window.URL.createObjectURL(this.getBlob()); } //上传 this.upload = function (url, callback) { var fd = new FormData(); fd.append(audioData, this.getBlob()); var xhr = 新しい XMLHttpRequest(); if (callback) { xhr.upload.addEventListener(progress, function (e) { callback('uploading', e); }, false); xhr.addEventListener(load, function (e) { callback('ok', e); }, false); xhr.addEventListener(error, function (e) { callback('error', e); }, false); xhr.addEventListener(abort, function (e) { callback('cancel', e); }, false); xhr.open(POST, URL); xhr.send(fd); } //音声採集 Recorder.onaudioprocess = function (e) { audioData.input(e.inputBuffer.getChannelData(0)); //record(e.inputBuffer.getChannelData(0)); } }; //抛出异常 HZRecorder.throwError = function (message) {alert(message); throw new function () { this.toString = function () { メッセージを返す; } } } //否サポート录音 HZRecorder.canRecording = (navigator.getUserMedia != null); //获取录音機 HZRecorder.get = function (callback, config) { if (callback) { if (navigator.getUserMedia) { navigator.getUserMedia( { audio: true } //只启用音声 , function (stream) { var rec = new HZRecorder(stream, config); } , function (error) { switch (error.code); || error.name) { case 'PERMISSION_DENIED': case 'PermissionDeniedError': HZRecorder.throwError('用户拒否情報。') Break; case 'NotSupportedError': HZRecorder.throwError('ハードウェアデバイスをサポートします。'); 'MANDATORY_UNSATISFIED_ERROR': case 'MandatoryUnsatisfiedError': HZRecorder.throwError('無法発行指定ハードウェア装置。'); デフォルト: HZRecorder.throwError('無法打開マイク。' + (error.code || エラー。名前)); }); } else { HZRecorder.throwErr('現在のサウンド機能はサポートされていません。');戻る; window.HZRecorder = HZRecorder;})(ウィンドウ);总结上記は、大家向けの HTML5 音声再生/放送機能の実装コードであり、大家に何らかの疑問がある場合は、大家をサポートすることが望まれます。大家对VeVb武林网网站的サポート！