// 音频文件上传示例
new Blob()// Binary Large Object 二进制类型的大对象，Blob是JavaScript内建对象，表示不可变的原始数据，类似文件的对象。
// https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/Blob
// let aBlob = new Blob( array, options );
let dataBlob = new Blob([音频文件原数据], { type: 'audio/basic' }) //不要去处理发送的数据
const formData = new FormData()
formData.append('file', dataBlob, 'audio.mp3')//append参数均需前后端统一
new FormData()
// 1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个请求参数
// 2.异步上传二进制文件
// FormData对象的操作方法，全部在原型中，自己本身没任何的属性及方法
let formData = new FormData()
formData.append('user', '小明')
formData.get('user') //小明
formData.delete('user')
具体实现代码：
let dataBlob = new Blob([音频文件原数据], { type: 'audio/basic' }) //不要去处理发送的数据
const formData = new FormData()
formData.append('file', dataBlob, 'audio.mp3')
将formData传给接口就可以啦
vue3中实现录音发送等功能
在vue项目中做聊天功能中涉及到语音发送功能,搭配js-audio-recorder插件的使用,能很好的帮助我们开发，下面是具体使用步骤。
npm安装js-audio-recorder插件包
npm i js-audio-recorder
在需要使用的组件中导入插件
import Recorder from 'js-audio-recorder'
在setup中定义响应的方法
const data = reactive({
//用于存储创建的语
Vue 调用录音以及录音上传
录音调用以及录音上传调用了Recorder，这里给出github链接 https://github.com/xiangyuecn/Recorder。 试了好几个录音调用的工具包，这个是唯一能用的。要注意的一点是，录音调用必须要用https请求，不然没有办法请求到麦克风权限。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Html5网页JavaScript录制MP3音频</title>
<meta charset="utf-8" />
</head>
Html5网页JavaScript录制MP3音频
调试信息：
[removed][removed]
[removed]
var recorder = new MP3Recorder({
debug:true,
funOk: function () {
btnStart.disabled = false;
log('初始化成功');
funCancel: function (msg) {
log(msg);
recorder = null;
var mp3Blob;
function funStart(button) {
btnStart.disabled = true;
btnStop.disabled = false;
btnUpload.disabled = true;
log('录音开始...');
recorder.start();
function funStop(button) {
recorder.stop();
btnStart.disabled = false;
btnStop.disabled = true;
btnUpload.disabled = false;
log('录音结束，MP3导出中...');
recorder.getMp3Blob(function (blob) {
log('MP3导出成功');
mp3Blob = blob;
var url = URL.createObjectURL(mp3Blob);
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() + '.mp3';
hf[removed] = hf.download;
div.appendChild(au);
div.appendChild(hf);
recordingslist.appendChild(div);
function log(str) {
recordingslist[removed] += str + '';
function funUpload() {
var fd = new FormData();
var mp3Name = encodeURIComponent('audio_recording_' + new Date().getTime() + '.mp3');
fd.append('mp3Name', mp3Name);
fd.append('file', mp3Blob);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
recordingslist[removed] += '上传成功：' + mp3Name + '';
xhr.open('POST', 'upload.ashx');
xhr.send(fd);
[removed]
</body>
</html>
[javascript] view plain copy
在CODE上查看代码片派生到我的代码片
(function (exports) {
var MP3Recorder = function (config) {
var recorder = this;
config = config || {};
config.sampleRate = config.sampleRate || 44100;
config.bitRate = config.bitRate || 128;
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({
audio: true
function (stream) {
var context = new AudioContext(),
microphone = context.createMediaStreamSource(stream),
processor = context.createScriptProcessor(16384, 1, 1),//bufferSize大小，输入channel数，输出channel数
mp3ReceiveSuccess, currentErrorCallback;
config.sampleRate = context.sampleRate;
processor.onaudioprocess = function (event) {
//边录音边转换
var array = event.inputBuffer.getChannelData(0);
realTimeWorker.postMessage({ cmd: 'encode', buf: array });
var realTimeWorker = new Worker('js/worker-realtime.js');
realTimeWorker.onmessage = function (e) {
switch (e.data.cmd) {
case 'init':
log('初始化成功');
if (config.funOk) {
config.funOk();
break;
case 'end':
log('MP3大小：', e.data.buf.length);
if (mp3ReceiveSuccess) {
mp3ReceiveSuccess(new Blob(e.data.buf, { type: 'audio/mp3' }));
break;
case 'error':
log('错误信息：' + e.data.error);
if (currentErrorCallback) {
currentErrorCallback(e.data.error);
break;
default:
log('未知信息：', e.data);
recorder.getMp3Blob = function (onSuccess, onError) {
currentErrorCallback = onError;
mp3ReceiveSuccess = onSuccess;
realTimeWorker.postMessage({ cmd: 'finish' });
recorder.start = function () {
if (processor && microphone) {
microphone.connect(processor);
processor.connect(context.destination);
log('开始录音');
recorder.stop = function () {
if (processor && microphone) {
microphone.disconnect();
processor.disconnect();
log('录音结束');
realTimeWorker.postMessage({
cmd: 'init',
config: {
sampleRate: config.sampleRate,
bitRate: config.bitRate
function (error) {
var msg;
switch (error.code || error.name) {
case 'PERMISSION_DENIED':
case 'PermissionDeniedError':
msg = '用户拒绝访问麦客风';
break;
case 'NOT_SUPPORTED_ERROR':
case 'NotSupportedError':
msg = '浏览器不支持麦客风';
break;
case 'MANDATORY_UNSATISFIED_ERROR':
case 'MandatoryUnsatisfiedError':
msg = '找不到麦客风设备';
break;
default:
msg = '无法打开麦克风，异常信息:' + (error.code || error.name);
break;
if (config.funCancel) {
config.funCancel(msg);
} else {
if (config.funCancel) {
config.funCancel('当前浏览器不支持录音功能');
function log(str) {
if (config.debug) {
console.log(str);
exports.MP3Recorder = MP3Recorder;
})(window);
因为公司事做语音翻译的，在官网上有个试用的功能，需要在网页上录音，并传到后台进行翻译并进行语音合成。
业务需求就是在网页上使用录音功能，每100ms 通信一次，将数据传输到后端进行一套链路处理，
原来的业务逻辑是使用http 进行通信，每1s 通信一次，但是想优化下准备使用websocket 通信，降低翻译延迟，将延时降低为100ms，所以进行优化。
1、项目问题
项目使用的前端框架是Vue，但是因为我是后端开发，所以我对vue不懂，前端的开发使用的插件是recorderX 。在每秒发送数据的时候还
如果有不需要的逻辑或其它东西可以进行删除，html里面也有一些多余的东西，不需要删除就可以了。大家好，今天和大家分享一下使用vue和element组件来实现语音上传和语音播放这个功能。我用到的也只有一个上传upload和音频audio。下面的代码没有必要说都写下来，看自己需要什么吧！其实上传音频其实和上传图片差不多。
项目使用的vue3.0版本（这个插件同时支持vue2.0、也支持uniapp，很强！），录音过程中会显示可视化波形，同时能够做到兼容PC端、Android、和iOS，一次编码 到处运行，哈哈~省了不少事。vue3项目打包后，放服务器里面，同时开启https访问（必须https才能录音，本地localhost没有这个限制），然后电脑、Android、iOS上打开这个网页就都能录音了（但有些浏览器不能录音，比如UC、夸克，不过好在手机系统自带浏览器、微信里面都能录音，效果还是很不错的）。开始录音，和结束录音。
