必威-必威-欢迎您

必威,必威官网企业自成立以来,以策略先行,经营致胜,管理为本的商,业推广理念,一步一个脚印发展成为同类企业中经营范围最广,在行业内颇具影响力的企业。

要先获取当前设备是否支持 Audio 必威API,大致就

2019-09-15 03:09 来源:未知

得了录音

完工录音的艺术,作者动用的是先暂停,之后必要试听或然别的的操作先执行,然后再将存款和储蓄流的数COO度置为 0。

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

开篇闲扯

前一段时间的三个案子是支付多少个有声课件,大约正是通过导入文书档案、图片等能源后,页面变为类似 PPT 的布局,然后选中一张图片,能够插入音频,有单页编辑和大局编辑三种形式。当中音频的导入格局有三种,一种是从财富库中程导弹入,还应该有一种就是要提到的录音。

说实话,一同头都没接触过 HTML5 的 奥迪o API,並且要基于在大家接手前的代码中展开优化。当然在那之中也踩了相当多坑,此次也会围绕那多少个坑来讲说感触(会简单一些为主目的的起初化和获得,因为这个内容不是本次的要紧,风野趣的同室能够活动物检疫索 MDN 上的文档):

  1. 调用 奥迪(Audi)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;
 }
);

一切顺遂的话,大家就能够步入下一步了。

(这里有对获取上下文的艺术举行了大约,因为那不是这一次的重要)

始于录音、暂停录音

那边有个相比极度的点,正是亟需增加壹当中级变量来标志是不是当前是或不是在录音。因为在火狐浏览器上,大家开采二个题目,录音的流程都以符合规律的,但是点击暂停时却发掘怎么也虎头蛇尾不了,我们当正是选拔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 为采样率
}

那般就可见拿走科学的录音时间长度了。

完工录音

终结录音的办法,小编动用的是先暂停,之后必要试听大概其余的操作先实行,然后再将存储流的数总裁度置为 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,当然还应该有二个节奏品质的标题,这里就不赘述了。

结语

此次蒙受的许多问题都是包容性的主题素材,因而在上边踩了广黄竹坑,极其是运动端的难题,一开头还恐怕有出现因为获取录音时间长度写法错误的难点,导致一向卡死的景况。这一次的经历也弥补了 HTML5 API 上的有的空白,当然最重大的还是要提醒一下豪门,这种原生的 API 文书档案还是直接查看 MDN 来的简短惨酷!

上述正是本文的全体内容,希望对我们的就学抱有帮忙,也期待大家多多协理帮客之家。

录音的踩坑之旅,详解html5坑之旅 开篇闲扯 前一段时间的八个案子是付出二个有声课件,大概正是通过导入文档、图片等能源后,...

4、api央求配置

什么是 Headless Chrome

Headless Chrome 是 Chrome 浏览器的无分界面形态,能够在不张开浏览器的前提下,使用全体 Chrome 协助的风味运维你的次第。比较于当代浏览器,Headless Chrome 特别便于测量检验web 应用,获得网址的截图,做爬虫抓取音信等。比较于出道较早的 PhantomJS,SlimerJS 等,Headless Chrome 则越来越邻近浏览器景况。

一、中间件的定义

为了精晓中间件,让我们站在框架小编的角度思虑难题:如若要增多效果,你会在哪些环节加上?

(1)Reducer:纯函数,只担当总括 State 的效用,不合适承担其余成效,也负担不了,因为理论上,纯函数不能够拓宽读写操作。

(2)View:与 State 一一对应,能够看成 State 的视觉层,也不妥当承担其余效能。

(3)Action:存放数据的目的,即音讯的载体,只可以被人家操作,自身不可能开展任何操作。

想来想去,独有发送 Action 的那么些手续,即store.dispatch()格局,能够增加效果。举个例子来讲,要加上日志功用,把 Action 和 State 打字与印刷出来,能够对store.dispatch进展如下改变。

JavaScript

let next = store.dispatch; store.dispatch = function dispatchAndLog(action) { console.log('dispatching', action); next(action); console.log('next state', store.getState()); }

1
2
3
4
5
6
let next = store.dispatch;
store.dispatch = function dispatchAndLog(action) {
  console.log('dispatching', action);
  next(action);
  console.log('next state', store.getState());
}

地点代码中,对store.dispatch进行了重定义,在出殡和埋葬 Action 前后增多了打字与印刷功用。那便是中间件的雏形。

中间件就是二个函数,对store.dispatch主意开展了改换,在发生 Action 和实施 Reducer 这两步之间,增添了别的功能。

HTML5 录音的踩坑之旅

2017/12/25 · HTML5 · 录音

原著出处: 翁旺   

4.2编纂query.js中呼吁接口

必威 1

图4

import { fetch,custom } from '@/axios/api'

// 1. 仓库储存查询

export function stock_list(query) {

  return fetch({

    url: '/inventory/stock/list/search',

    method: 'POST',

    params: query

  })

}


小结

正文简要介绍了弹指间 Headless Chrome 在巅峰的用法,以及怎么样运用 Headless Chrome 获取截图、获取页面中的CSS和DOM、设置UA和Cookie、运行JS脚本、同盟Karma 实行单元测量试验。接下来,就等着你搜求越来越多关于 Headless Chrome 的用法了…

参考:

https://developers.google.com/web/updates/2017/04/headless-chrome
How to install and use Headless Chrome on OSX

1 赞 1 收藏 评论

必威 2

怎么本领 Reducer 在异步操作结束后自行执可以吗?那就要选取新的工具:中间件(middleware)。

结语

本次蒙受的大大多主题素材都是包容性的标题,因而在上头踩了过多坑,特别是活动端的难题,一开头还会有出现因为获取录音时长写法错误的主题素材,导致一贯卡死的景况。此番的经验也弥补了 HTML5 API 上的有的单手,当然最重大的依然要提醒一下豪门,这种原生的 API 文书档案依旧直接查看 MDN 来的简便冷酷!

1 赞 3 收藏 评论

必威 3

2、配置访谈路径

 在类型支付的时候,接口联调的时候一般都是同域名下,且不设有跨域的事态下开展接口联调,可是当我们今Smart用vue-cli打开项目打包的时候,大家在本地运行服务器后,举例本地开荒服务下是 那样的拜候页面,可是大家的接口地址是 那样的接口地址,大家那样直接运用会存在跨域的呼吁,导致接口央浼不成事,由此我们需求在卷入的时候配置一下,大家进入config/index.js 代码下如下配置就能够:

必威 4

图2


怎么在极端中应用

在Mac上运用前,提议先绑定 Chrome 的别称

JavaScript

alias google-chrome="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

1
alias google-chrome="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

Linux下无需绑定别名,从官方网站络下载最新版 Chrome 之后直接运营以下命令即可。

接下来,在终端中输入:

google-chrome --headless --disable-gpu --remote-debugging-port=9222

1
google-chrome --headless --disable-gpu --remote-debugging-port=9222  https://github.com

充实 –disable-gpu 首倘使为着挡住现阶段恐怕接触的失实。

那时候,Headless Chrome已经打响运维了。打开浏览器,输入 http://localhost:9222,你会看出如下的分界面:必威 5

在极端中,我们还足以做以下操作:

赢得显示器截图:

JavaScript

google-chrome --headless --disable-gpu --screenshot --window-size=1280,1696

1
google-chrome --headless --disable-gpu --screenshot --window-size=1280,1696 https://github.com

收获页面为PDF:

JavaScript

google-chrome --headless --disable-gpu --print-to-pdf

1
google-chrome --headless --disable-gpu --print-to-pdf https://github.com

打字与印刷页面DOM:

JavaScript

google-chrome --headless --disable-gpu --dump-dom

1
google-chrome --headless --disable-gpu --dump-dom https://github.com/

二、中间件的用法

本课程不涉及什么编写中间件,因为常用的中间件都有现存的,只要引用外人写好的模块就能够。比如,上一节的日志中间件,就有现存的redux-logger模块。这里只介绍怎么使用中间件。

JavaScript

import { applyMiddleware, createStore } from 'redux'; import createLogger from 'redux-logger'; const logger = createLogger(); const store = createStore( reducer, applyMiddleware(logger) );

1
2
3
4
5
6
7
8
import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';
const logger = createLogger();
 
const store = createStore(
  reducer,
  applyMiddleware(logger)
);

上边代码中,redux-logger提供贰个生成器createLogger,能够生成日志中间件logger。然后,将它献身applyMiddleware措施之中,传入createStore格局,就成功了store.dispatch()的意义加强。

此地有两点供给潜心:

(1)createStore方式基本上能用一切应用的开头状态作为参数,那样的话,applyMiddleware正是第五个参数了。

JavaScript

const store = createStore( reducer, initial_state, applyMiddleware(logger) );

1
2
3
4
5
const store = createStore(
  reducer,
  initial_state,
  applyMiddleware(logger)
);

(2)中间件的主次有爱戴。

JavaScript

const store = createStore( reducer, applyMiddleware(thunk, promise, logger) );

1
2
3
4
const store = createStore(
  reducer,
  applyMiddleware(thunk, promise, logger)
);

地点代码中,applyMiddleware艺术的八个参数,正是八个中间件。有的中间件有先后须要,使用前要查一下文书档案。举个例子,logger就决然要放在最终,不然输出结果会不得法。

TAG标签:
版权声明:本文由必威发布于必威-前端,转载请注明出处:要先获取当前设备是否支持 Audio 必威API,大致就