问题：
javascript - 怎么把这个实时录音原生js代码变成vue代码(vue2.0那种)？
冯鸿光
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta name="apple-mobile-web-capable" content="yes"> <title>录音并传递给后台</title></head><body> <button id="intercomBegin">开始对讲</button> <button id="intercomEnd">关闭对讲</button></body><script type="text/javascript"> var begin = document.getElementById('intercomBegin'); var end = document.getElementById('intercomEnd'); var ws = null; //实现WebSocket var record = null; //多媒体对象，用来处理音频 var timeInte; function init(rec) { record = rec; } //录音对象 var Recorder = function (stream) { var sampleBits = 16; var sampleRate = 16000; var context = new AudioContext(); var audioInput = context.createMediaStreamSource(stream); var recorder = context.createScriptProcessor(4096, 1, 1); var audioData = { size: 0, buffer: [], inputSampleRate: 48000, //输入采样率 inputSampleBits: 16, //输入采样数位 outputSampleRate: sampleRate, //输出采样数位 oututSampleBits: sampleBits, //输出采样率 clear: function () { this.buffer = []; this.size = 0; }, input: function (data) { this.buffer.push(new Float32Array(data)); this.size += data.length; }, compress: function () { //合并压缩 //合并 var data = new Float32Array(this.size); var offset = 0; for (var i = 0; i < this.buffer.length; i++) { data.set(this.buffer[i], offset); offset += this.buffer[i].length; } //压缩 var compression = parseInt(this.inputSampleRate / this.outputSampleRate); var length = data.length / compression; var result = new Float32Array(length); var index = 0, j = 0; while (index < length) { result[index] = data[j]; j += compression; index++; } return result; }, encodePCM: 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 * (sampleBits / 8); var buffer = new ArrayBuffer(dataLength); var data = new DataView(buffer); var offset = 0; 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); } return new Blob([data]); } }; var sendData = function () { //对以获取的数据进行处理(分包) var reader = new FileReader(); console.log('读取的文件对象', reader) reader.onload = e => { var outbuffer = e.target.result; console.log('文件读取后的结果', outbuffer) var arr = new Int8Array(outbuffer); console.log('转化的二进制数据', arr) if (arr.length > 0) { var tmparr = new Int8Array(1024); var j = 0; for (var i = 0; i < arr.byteLength; i++) { tmparr[j++] = arr[i]; if (((i + 1) % 1024) == 0) { console.log('断点测试', tmparr) ws.send(tmparr); if (arr.byteLength - i - 1 >= 1024) { tmparr = new Int8Array(1024); } else { tmparr = new Int8Array(arr.byteLength - i - 1); } j = 0; } if ((i + 1 == arr.byteLength) && ((i + 1) % 1024) != 0) { ws.send(tmparr); } } } }; reader.readAsArrayBuffer(audioData.encodePCM()); audioData.clear(); }; this.start = function () { audioInput.connect(recorder); recorder.connect(context.destination); } this.stop = function () { recorder.disconnect(); window.clearInterval(timeInte); audioData.clear(); } this.getBlob = function () { return audioData.encodePCM(); } this.clear = function () { audioData.clear(); } recorder.onaudioprocess = function (e) { console.log('测试一下', e) var inputBuffer = e.inputBuffer.getChannelData(0); audioData.input(inputBuffer); console.log('显示', inputBuffer) sendData(); } } /* * WebSocket */ function useWebSocket() { ws = new WebSocket("wss://api.tl.supremind.cloud"); ws.binaryType = 'arraybuffer'; //传输的是 ArrayBuffer 类型的数据 ws.onopen = function (event) { console.log('连接成功'); let obj = { "action": "audio_lock", "data": [{ "projectJid": "fe843627233020c110101c8f7e85ba53", "guid": "12c00001363b21cf", "playVolume": 20 }], "requestId": "cf3253b2-e491-4ce0-bf66-4a5bc36d46a1" } ws.send(JSON.stringify(obj)) timeInte = setInterval(function () { record.start(); }, 300); }; ws.onmessage = function (msg) { console.info(msg) } ws.onerror = function (err) { } } /* * 开始对讲 */ begin.onclick = function () { navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; if (!navigator.getUserMedia) { alert('浏览器不支持音频输入'); } else { navigator.getUserMedia({ audio: true }, function (mediaStream) { console.log('ddddd', mediaStream) init(new Recorder(mediaStream)); console.log('开始对讲'); useWebSocket(); }, function (error) { switch (error.message || error.name) { case 'PERMISSION_DENIED': case 'PermissionDeniedError': console.info('用户拒绝提供信息。'); break; case 'NOT_SUPPORTED_ERROR': case 'NotSupportedError': console.info('浏览器不支持硬件设备。'); break; case 'MANDATORY_UNSATISFIED_ERROR': case 'MandatoryUnsatisfiedError': console.info('无法发现指定的硬件设备。'); break; default: console.info('无法打开麦克风。异常信息:' + (error.code || error.name)); break; } } ) } } /* * 关闭对讲 */ end.onclick = function () { if (ws) { record.stop(); var tmparr = new Int8Array(1024); let obj = { "action": "audio_unlock", "data": [{ "projectJid": "fe843627233020c110101c8f7e85ba53", "guid": "12c00001363b21cf", "playVolume": 80 }], "requestId": "cf3253b2-e491-4ce0-bf66-4a5bc36d46a1" } ws.send(JSON.stringify(obj)) console.log('关闭对讲'); } }</script></html>共有1个答案
程正阳
1. 提取 JS 代码到 src/assets/record.js，去除dom操作，改为 export beginRecord 和 stopRecord 函数
// var begin = document.getElementById('intercomBegin')// var end = document.getElementById('intercomEnd')var ws = null // 实现WebSocketvar record = null // 多媒体对象，用来处理音频var timeIntefunction init(rec) { record = rec}// 录音对象var Recorder = function(stream) { var sampleBits = 16 var sampleRate = 16000 var context = new AudioContext() var audioInput = context.createMediaStreamSource(stream) var recorder = context.createScriptProcessor(4096, 1, 1) var audioData = { size: 0, buffer: [], inputSampleRate: 48000, // 输入采样率 inputSampleBits: 16, // 输入采样数位 outputSampleRate: sampleRate, // 输出采样数位 oututSampleBits: sampleBits, // 输出采样率 clear: function() { this.buffer = [] this.size = 0 }, input: function(data) { this.buffer.push(new Float32Array(data)) this.size += data.length }, compress: function() { // 合并压缩 // 合并 var data = new Float32Array(this.size) var offset = 0 for (var i = 0; i < this.buffer.length; i++) { data.set(this.buffer[i], offset) offset += this.buffer[i].length } // 压缩 var compression = parseInt(this.inputSampleRate / this.outputSampleRate) var length = data.length / compression var result = new Float32Array(length) var index = 0, j = 0 while (index < length) { result[index] = data[j] j += compression index++ } return result }, encodePCM: 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 * (sampleBits / 8) var buffer = new ArrayBuffer(dataLength) var data = new DataView(buffer) var offset = 0 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) } return new Blob([data]) } } var sendData = function() { // 对以获取的数据进行处理(分包) var reader = new FileReader() console.log('读取的文件对象', reader) reader.onload = e => { var outbuffer = e.target.result console.log('文件读取后的结果', outbuffer) var arr = new Int8Array(outbuffer) console.log('转化的二进制数据', arr) if (arr.length > 0) { var tmparr = new Int8Array(1024) var j = 0 for (var i = 0; i < arr.byteLength; i++) { tmparr[j++] = arr[i] if (((i + 1) % 1024) == 0) { console.log('断点测试', tmparr) ws.send(tmparr) if (arr.byteLength - i - 1 >= 1024) { tmparr = new Int8Array(1024) } else { tmparr = new Int8Array(arr.byteLength - i - 1) } j = 0 } if ((i + 1 == arr.byteLength) && ((i + 1) % 1024) != 0) { ws.send(tmparr) } } } } reader.readAsArrayBuffer(audioData.encodePCM()) audioData.clear() } this.start = function() { audioInput.connect(recorder) recorder.connect(context.destination) } this.stop = function() { recorder.disconnect() window.clearInterval(timeInte) audioData.clear() } this.getBlob = function() { return audioData.encodePCM() } this.clear = function() { audioData.clear() } recorder.onaudioprocess = function(e) { console.log('测试一下', e) var inputBuffer = e.inputBuffer.getChannelData(0) audioData.input(inputBuffer) console.log('显示', inputBuffer) sendData() }}/* * WebSocket */function useWebSocket() { ws = new WebSocket('wss://api.tl.supremind.cloud') ws.binaryType = 'arraybuffer' // 传输的是 ArrayBuffer 类型的数据 ws.onopen = function(event) { console.log('连接成功') const obj = { 'action': 'audio_lock', 'data': [{ 'projectJid': 'fe843627233020c110101c8f7e85ba53', 'guid': '12c00001363b21cf', 'playVolume': 20 }], 'requestId': 'cf3253b2-e491-4ce0-bf66-4a5bc36d46a1' } ws.send(JSON.stringify(obj)) timeInte = setInterval(function() { record.start() }, 300) } ws.onmessage = function(msg) { console.info(msg) } ws.onerror = function(err) { }}/* * 开始对讲 */export function beginRecord() {// begin.onclick = function() { navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia if (!navigator.getUserMedia) { alert('浏览器不支持音频输入') } else { navigator.getUserMedia({ audio: true }, function(mediaStream) { console.log('ddddd', mediaStream) init(new Recorder(mediaStream)) console.log('开始对讲') useWebSocket() }, function(error) { switch (error.message || error.name) { case 'PERMISSION_DENIED': case 'PermissionDeniedError': console.info('用户拒绝提供信息。') break case 'NOT_SUPPORTED_ERROR': case 'NotSupportedError': console.info('浏览器不支持硬件设备。') break case 'MANDATORY_UNSATISFIED_ERROR': case 'MandatoryUnsatisfiedError': console.info('无法发现指定的硬件设备。') break default: console.info('无法打开麦克风。异常信息:' + (error.code || error.name)) break } } ) }}/* * 关闭对讲 */// end.onclick = function() {export function stopRecord() { if (ws) { record.stop() var tmparr = new Int8Array(1024) const obj = { 'action': 'audio_unlock', 'data': [{ 'projectJid': 'fe843627233020c110101c8f7e85ba53', 'guid': '12c00001363b21cf', 'playVolume': 80 }], 'requestId': 'cf3253b2-e491-4ce0-bf66-4a5bc36d46a1' } ws.send(JSON.stringify(obj)) console.log('关闭对讲') }}2. 在vue代码中这样写
<template> <div> <button @click="beginRecord">开始对讲</button> <button @click="stopRecord">关闭对讲</button> </div></template><script>// 引入封裝的函數import { beginRecord, stopRecord } from 'src/assets/record.js'export default { methods: { // 定义方法，方便在dom綁定@click beginRecord() { beginRecord() }, stopRecord() { stopRecord() } }}</script>3. 代码中的问题
如下图，这个变量的意义不明
希望这个解答可以帮到你！
类似资料：
-
el-table 里的输入框实现递增输入，正常输入没有问题，当删掉其中一个值后，再输入符合条件的也不生效了，不知道是什么原因
-
请求各位大哥帮忙解密，祝大哥们发财娶漂亮老婆！！ 完整版：【腾讯文档】 https://docs.qq.com/doc/DV2FaZ0J4c1lzYUtB (function(_0x319d23,_0x253eaa){const _0x17f6bd=_0x319d23();function _0x5ef634(_0x4d9bcf,_0x332385,_0x131a87,_0xdb2988){ret
-
我正在根据参考指南学习使用Map结构。日食验证是 面向Web开发人员的Eclipse Java EE IDE。版本：开普勒服务版本2 pom。xml如下所示，与参考指南相同 它表示在构建项目时将生成实现代码。但是，它似乎不会在目标/生成的源文件夹下生成
-
本文向大家介绍ReactNative-JS 调用原生方法实例代码，包括了ReactNative-JS 调用原生方法实例代码的使用技巧和注意事项，需要的朋友参考一下 第一步首先创建ReactNative 模块类继承ReactContextBaseJavaModule 第二步创建一个React包管理器实现ReactPackage将每个模块放到模块集合中 第三步在应用入口注册这个React包管理器 第四
-
本文向大家介绍JavaScript 随机验证码的生成实例代码，包括了JavaScript 随机验证码的生成实例代码的使用技巧和注意事项，需要的朋友参考一下 随机验证码的生成 1： 主体部分 接下来时如何放入到验证框里面了 <input type="text" id="checkCode" class="unchanged" style="width: 80px" readonly/> 接