vue获取麦克风_HTML5操作麦克风获取音频数据（WAV）的一些基础技能

基于HTML5的新特性，操作其实思路很简单。

第一部分： 代码案例

下面，我这里是基于一个Github上的例子，做了些许调整，为了自己的项目做准备的。这里，重点不是说如何通过H5获取Audio数据，重点是说这个过程中涉及的坑或者技术元素知识。直接上代码！

1. HTML测试页面

语音转写

Voice Robot

录音

转写

播放

---

你好啊

页面效果如下：

2. JS代码(分为两个部分，main.js，以及recorder.js)

2.1 main.js

//=======================================================================//author: shihuc//date: 2018-09-19//动态获取服务地址//=======================================================================

var protocol =window.location.protocol;var baseService =window.location.host;var pathName =window.location.pathname;var projectName = pathName.substring(0,pathName.substr(1).indexOf('/')+1);var protocolStr =document.location.protocol;var baseHttpProtocol = "http://";if(protocolStr == "https:") {

baseHttpProtocol= "https://";

}var svrUrl = baseHttpProtocol + baseService + projectName + "/audio/trans";//=========================================================================

var recorder = null;var startButton = document.getElementById('btn-start-recording');var stopButton = document.getElementById('btn-stop-recording');var playButton = document.getElementById('btn-start-palying');//var audio = document.querySelector('audio');

var audio = document.getElementById('audioSave');

function startRecording() {if(recorder != null) {

recorder.close();

}

Recorder.get(function (rec) {

recorder=rec;

recorder.start();

});

stopButton.disabled= false;

playButton.disabled= false;

}

function stopRecording() {

recorder.stop();

recorder.trans(svrUrl, function(res, errcode){if(errcode != 500){

alert(res);

}

});

}

function playRecording() {

recorder.play(audio);

}

2.2 reocrder.js

(function (window) {//兼容

window.URL = window.URL ||window.webkitURL;//请求麦克风

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||navigator.msGetUserMedia;var Recorder =function (stream, config) {//创建一个音频环境对象

audioContext = window.AudioContext ||window.webkitAudioContext;var context = newaudioContext();

config= config ||{};

config.channelCount= 1;

config.numberOfInputChannels=config.channelCount;

config.numberOfOutputChannels=config.channelCount;

config.sampleBits= config.sampleBits || 16; //采样数位 8, 16//config.sampleRate = config.sampleRate || (context.sampleRate / 6);//采样率(1/6 44100)

config.sampleRate = config.sampleRate || 8000; //采样率16K//创建缓存，用来缓存声音

config.bufferSize = 4096;//将声音输入这个对像

var audioInput =context.createMediaStreamSource(stream);//设置音量节点

var volume =context.createGain();

audioInput.connect(volume);//创建声音的缓存节点，createScriptProcessor方法的//第二个和第三个参数指的是输入和输出都是声道数。

var recorder =context.createScriptProcessor(config.bufferSize, config.channelCount, config.channelCount);//用来储存读出的麦克风数据，和压缩这些数据，将这些数据转换为WAV文件的格式

var audioData ={

size:0 //录音文件长度

, buffer: [] //录音缓存

, inputSampleRate: context.sampleRate //输入采样率

, inputSampleBits: 16 //输入采样数位 8, 16

, outputSampleRate: config.sampleRate //输出采样率

, oututSampleBits: config.sampleBits //输出采样数位 8, 16

, input: function (data) {this.buffer.push(new Float32Array(data)); //Float32Array

this.size +=data.length;

}

,