vue中使用封装的axios,录音的踩坑之旅

vue中使用封装的axios,录音的踩坑之旅

取得频率

JavaScript

getVoiceSize = analyser => { const dataArray = new
Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(dataArray); const data =
dataArray.slice(100, 1000); const sum = data.reduce((a, b) => a + b);
return sum; };

1
2
3
4
5
6
7
getVoiceSize = analyser => {
const dataArray = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(dataArray);
const data = dataArray.slice(100, 1000);
const sum = data.reduce((a, b) => a + b);
return sum;
};

切切实实能够参见

详解HTML5 录音的踩坑之旅,详解html5坑之旅

开始竞技闲扯

前一段时间的三个案件是支付二个有声课件,大概就是经过导入文档、图片等财富后,页面变为类似
PPT
的布局,然后选中一张图纸,能够插入音频,有单页编辑和全局编辑三种形式。当中音频的导入形式有三种,一种是从财富库中程导弹入,还有一种正是要涉及的录音。

说实话,一早先都没接触过 HTML5 的 奥迪o
API,而且要基于在大家接手前的代码中进行优化。当然个中也踩了累累坑,此次也会围绕那多少个坑来说说感受(会简单一些为主目标的初阶化和获得,因为那些内容不是这一次的重大,有趣味的同室能够活动物检疫索
MDN 上的文书档案):

  1. 调用 奥迪o API 的包容性写法
  2. 得到录音声音的大小(应该是功效)
  3. 暂停录音的兼容性写法
  4. 收获当前录音时间

录音前的预备

始发录音前,要先拿走当前设施是或不是补助 奥迪o API。早期的措施
navigator.getUserMedia 已经被 navigator.mediaDevices.getUserMedia
所代表。平常来说将来半数以上的当代浏览器都早已协助navigator.mediaDevices.getUserMedia 的用法了,当然 MDN
上也交由了包容性的写法

const promisifiedOldGUM = function(constraints) {
 // First get ahold of getUserMedia, if present
 const getUserMedia =
 navigator.getUserMedia ||
 navigator.webkitGetUserMedia ||
 navigator.mozGetUserMedia;

 // Some browsers just don't implement it - return a rejected promise with an error
 // to keep a consistent interface
 if (!getUserMedia) {
 return Promise.reject(
 new Error('getUserMedia is not implemented in this browser')
 );
 }

 // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
 return new Promise(function(resolve, reject) {
 getUserMedia.call(navigator, constraints, resolve, reject);
 });
};

// Older browsers might not implement mediaDevices at all, so we set an empty object first
if (navigator.mediaDevices === undefined) {
 navigator.mediaDevices = {};
}

// Some browsers partially implement mediaDevices. We can't just assign an object
// with getUserMedia as it would overwrite existing properties.
// Here, we will just add the getUserMedia property if it's missing.
if (navigator.mediaDevices.getUserMedia === undefined) {
 navigator.mediaDevices.getUserMedia = promisifiedOldGUM;
}

因为这些艺术是异步的,所以大家得以对不能够合作的装备举行本身的晋升

navigator.mediaDevices.getUserMedia(constraints).then(
 function(mediaStream) {
 // 成功
 },
 function(error) {
 // 失败
 const { name } = error;
 let errorMessage;
 switch (name) {
 // 用户拒绝
 case 'NotAllowedError':
 case 'PermissionDeniedError':
 errorMessage = '用户已禁止网页调用录音设备';
 break;
 // 没接入录音设备
 case 'NotFoundError':
 case 'DevicesNotFoundError':
 errorMessage = '录音设备未找到';
 break;
 // 其它错误
 case 'NotSupportedError':
 errorMessage = '不支持录音功能';
 break;
 default:
 errorMessage = '录音调用错误';
 window.console.log(error);
 }
 return errorMessage;
 }
);

一切顺遂的话,大家就足以进去下一步了。

(那里有对得到上下文的形式实行了简要,因为那不是本次的要害)

开班录音、暂停录音

此间有个相比较尤其的点,便是内需加上两在那之中档变量来标识是或不是当前是或不是在录音。因为在火狐浏览器上,大家发现3个题材,录音的流程都以正规的,但是点击暂停时却发现怎么也中止不了,大家即刻是选择disconnect
方法。那种方法是卓殊的,那种方法是需求断开全体的连年才方可。后来意识,应该增添叁在那之中级变量
this.isRecording 来判断当前是不是正在录音,当点击开头时,将其安装为 true
,暂停时将其安装为 false 。

当大家初步录音时,会有一个录音监听的轩然大波 onaudioprocess ,借使回去 true
则会将流写入,如若回去 false 则不会将其写入。因而断定 this.isRecording
,要是为 false 则直接 return

// 一些初始化
const audioContext = new AudioContext();
const sourceNode = audioContext.createMediaStreamSource(mediaStream);
const scriptNode = audioContext.createScriptProcessor(
 BUFFER_SIZE,
 INPUT_CHANNELS_NUM,
 OUPUT_CHANNELS_NUM
);
sourceNode.connect(this.scriptNode);
scriptNode.connect(this.audioContext.destination);
// 监听录音的过程
scriptNode.onaudioprocess = event => {
 if (!this.isRecording) return; // 判断是否正则录音
 this.buffers.push(event.inputBuffer.getChannelData(0)); // 获取当前频道的数据,并写入数组
};

当然那里也会有个坑,便是无力回天再利用,自带获取当前录音时间长度的办法了,因为其实并不是当真的中止,而是没有将流写入罢了。于是我们还索要获得一下脚下录音的时间长度,供给经过一个公式实行获取

const getDuration = () => {
    return (4096 * this.buffers.length) / this.audioContext.sampleRate // 4096为一个流的长度,sampleRate 为采样率
}

如此那般就可见赢得科学的录音时间长度了。

甘休录音

终止录音的点子,作者动用的是先暂停,之后必要试听只怕其余的操作先执行,然后再将存款和储蓄流的数COO度置为
0。

取得频率

getVoiceSize = analyser => {
 const dataArray = new Uint8Array(analyser.frequencyBinCount);
 analyser.getByteFrequencyData(dataArray);
 const data = dataArray.slice(100, 1000);
 const sum = data.reduce((a, b) => a + b);
 return sum;
};

切实可以参考

其它

  1. HTTPS:在 chrome 下须求全站有 HTTPS 才允许行使
  2. 微信:在微信内置的浏览器必要调用 JSSDK 才能动用
  3. 音频格式转换:音频格式的章程也有为数不少了,能查到的大部分素材,我们基本上是互为
    copy,当然还有3个节奏品质的标题,这里就不赘述了。

结语

本次蒙受的多数题目都以包容性的难点,由此在地点踩了很多坑,特别是移动端的问题,一起首还有出现因为获取录音时间长度写法错误的标题,导致一贯卡死的意况。这一次的阅历也弥补了
HTML5 API 上的有的空荡荡,当然最要害的还是要提示一下豪门,那种原生的 API
文书档案照旧间接查看 MDN 来的简短惨酷!

以上正是本文的全体内容,希望对大家的上学抱有帮忙,也意在大家多多扶助帮客之家。

录音的踩坑之旅,详解html5坑之旅
开篇闲扯
前一段时间的三个案件是开发2个有声课件,大概就是经过导入文档、图片等能源后,…

贰 、配置访问路径

 在品种费用的时候,接口联调的时候一般都是同域名下,且不存在跨域的情形下进行接口联调,不过当大家先天选拔vue-cli进展项目打包的时候,大家在本地运维服务器后,比如本地开发服务下是
那样的访问页面,不过大家的接口地址是

那样的接口地址,咱们如此直白动用会设有跨域的乞求,导致接口请求不成功,由此大家须求在卷入的时候配置一下,大家进去
config/index.js 代码下如下配置即可:

图片 1

图2


得了录音

终止录音的艺术,小编利用的是先暂停,之后须求试听大概别的的操作先执行,然后再将存款和储蓄流的数主管度置为
0。

4.2编写制定query.js中呼吁接口

图片 2

图4

import { fetch,custom } from ‘@/axios/api’

// 1. 仓库储存查询

export function stock_list(query) {

  return fetch({

    url: ‘/inventory/stock/list/search’,

    method: ‘POST’,

    params: query

  })

}


其它

  • HTTPS:在 chrome 下须求全站有 HTTPS 才允许接纳
  • 微信:在微信内置的浏览器须要调用 JSSDK 才能使用
  • 音频格式转换:音频格式的办法也有不可胜举了,能查到的多数资料,大家基本上是互相copy,当然还有一个旋律品质的标题,那里就不赘述了。

1、axios安装

1.1、 利用npm安装npm install axios –save

1.2、 利用bower安装bower install axios –save

1.叁 、 直接动用cdn引入<script
src=”;

图片 3

图1

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图