أتش تي أم أل الصفحة الرئيسية:
<!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=录音 /> < الإدخال عند النقر = نوع stopRecording () = قيمة الزر = الإدخال /> <input onclick = نوع playRecording () = الزر value=المحتوى /> <input onclick=uploadAudio() type=button value=提交 /> <br /> <div id=recordingslist></div> </div> <script type=text/javascript src=js/HZRecorder .js></script> <script> فار مسجل؛ فار الصوت = document.querySelector('audio'); وظيفة startRecording() { HZRecorder.get(function(rec) { Recorder = rec; Recorder.start(); }, { SampleBits: 16, SampleRate: 16000 }); } وظيفة stopRecording() { Recorder.stop(); var blob = Recorder.getBlob(); فار url = URL.createObjectURL(blob); var div = document.createElement('div'); var au = document.createElement('audio'); var hf = document.createElement('a'); au.controls = صحيح؛ au.src = url; hf.href = url; hf.download = new Date().toISOString() + '.wav'; hf.innerHTML = hf.download; div.appendChild(au); div.appendChild(hf); Recordingslist.appendChild(div); } وظيفة playRecording() { Recorder.play(audio); } function uploadAudio() { Recorder.upload(Handler1.ashx, function(state, e) { Switch(state) { الحالة 'uploading': //var بالمائةComplete = Math.round(e.loaded * 100 / e.total) + '%'; حالة 'موافق': //alert(e.target.responseText); "خطأ": تنبيه (上传失败)؛ حالة "إلغاء": تنبيه (上传被取消)؛ } </script> </body></html>HZRecorder.js
(وظيفة (نافذة) { // عرض window.URL = window.URL || window.webkitURL; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; var HZRecorder = function ( تيار، التكوين) { التكوين = config ||.{}; config.sampleBits ||.8 //الإجابة 8, 16 config.sampleRate || (44100 / 6); = جديد (window.webkitAudioContext || window.AudioContext)(); var audioInput = context.createMediaStreamSource(stream); var createScript = context.createScriptProcessor ||.context.createJavaScriptNode; var Recorder = createScript.apply(context, [4096, 1, 1]); currentErrorCallback; var audioData = { الحجم: 0 // تحديد المصدر، المخزن المؤقت: [] // تحديد معدل الإدخال، معدل عينة الإدخال: context.sampleRate // تحديد معدل الإدخال، وحدات بت عينة الإدخال: 16 // تحديد معدل 8، 16، معدل إخراج العينة: config.sampleRate //احصل على , oututSampleBits: config.sampleBits //احصل على 8, 16 , input: function (data) { this.buffer.push(new Float32Array(data)); this.size += data. length; } , ضغط: 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; } // الضغط var Pressure = parseInt(this.inputSampleRate / this.outputSampleRate); طول فار = طول البيانات / الضغط؛ نتيجة فار = new Float32Array(length); مؤشر فار = 0, ي = 0; while (index < length) { result[index] = data[j]; ي += ضغط؛ الفهرس++; } إرجاع النتيجة؛ } , encodeWAV: function () { var SampleRate = Math.min(this.inputSampleRate, this.outputSampleRate); var SampleBits = Math.min(this.inputSampleBits, this.oututSampleBits); فار بايت = this.compress(); var dataLength = bytes. length * (sampleBits / 8); var buffer = new ArrayBuffer(44 + dataLength); var data = new DataView(buffer); varchannelCount = 1;//القيمة var offset = 0; var writeString = function (str) { for (var i = 0; i < str. length; i++) { data.setUint8(offset + i, str.charCodeAt(i)); } } // كتابة سلسلة الكتابة('RIFF'); إزاحة += 4؛ // تحديد حجم البيانات، تحديد حجم البيانات -8 data.setUint32(offset, 36 + dataLength, true); إزاحة += 4؛ // نسخة WAV writeString('WAVE'); إزاحة += 4؛ // كتابة سلسلة الكتابة('fmt'); إزاحة += 4؛ // تحويل البيانات إلى 0x10 = 16 data.setUint32(offset, 16, true); إزاحة += 4؛ // مجموعة البيانات (إزاحة PCM، 1، صحيح) 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)، صحيح)؛ إزاحة += 4؛ // تم تحديد عدد مرات الإرجاع مرة أخرى 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 [أنا]))؛ فار فال = ق < 0؟ الصورة * 0x8000 : الصورة * 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 جديد([data], { type: 'audio/wav' }); } }; // قم بتسجيل الدخول this.start = function () { audioInput.connect(recorder); Recorder.connect(context.destination); } // قم بإيقاف this.stop = function () { Recorder.disconnect(); } // قم بتحديد هذا.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 = new 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)); //سجل(e.inputBuffer.getChannelData(0)); } }; // قم بتشغيل HZRecorder.throwError = function (message) { تنبيه (message)؛ رمي وظيفة جديدة () { 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); ، الوظيفة (خطأ) { التبديل (خطأ.رمز || خطأ.اسم) { الحالة 'PERMISSION_DENIED': الحالة 'PermissionDeniedError': HZRecorder.throwError('用户拒绝提供信息.'); خطأ غير مدعوم': HZRecorder.throwError('浏览器不支持硬件设备.'); HZRecorder.throwError('无法发现指定的硬件设备.'); }); } else { HZRecorder.throwErr('تم تسجيل الدخول إلى القائمة الرئيسية.'); يعود؛ } } } window.HZRecorder = HZRecorder;})(window);总结لماذا يجب أن يكون لديك أي أسئلة حول HTML5؟ يمكن أن يكون هناك الكثير من الأشياء التي يجب عليك القيام بها لا داعي للقلق بشأن هذا الأمر. لقد تم إنشاء VeVb 武林网网站的支持!