最近在开发中,需求中有实时聊天功能实现,但是在在之前项目中集成的,所以并不能选择类似uniapp等已经封装好的框架,经过多方查询,最后总算实现了这个功能。
重要的事情强调:只能用https
重要的事情强调:只能用https
重要的事情强调:只能用https
vue开发转换为https方法:
在vue.config.js中添加
module.exports = {
publicPath: './',
devServer: {
port: 8080, //这是用来更改默认端口号
open: true, //运行自启动
https: true, //https模式开启
},
}
一、实现原理
在web API中提供了getUserMedia这个方法,就是用来给我们获取各种媒体应用的,想了解底层的可以百度一下这个方法,介绍的很详细,了解这个东西,自己也能手动封装插件,但是既然是实战,咱们要的就是用最快的方法实现我们需要的功能,所以,下面我们就介绍一个插件
二、录音插件js-audio-recorder
官方地址:gitHub官方地址
官方上有各种api以及在线演示,如果本次内容中有未涉及到的地方可去官方查看api
三、使用方式
1、安装
npm i js-audio-recorder (cnpm和yarn的请适当转换)
2、需要的地方引入
import Recorder from ‘js-audio-recorder’;
3、实例化
let recorder = new Recorder();
实例化这里可根据自己需求来,也可像我一样整个页面都用,在初识实例化
import Recorder from 'js-audio-recorder';
let recorder = new Recorder();
export default {
components: {},
data() {
return {}
}
4、开始结束录音
//按下录音(方法)
recording(e) {
let that = this
Recorder.getPermission().then(() => { //点击录音按钮获取权限,也可在created里进入页面就获取录音权限
console.log('给权限了');
}, (error) => {
console.log(`${error.name} : ${error.message}`);
});
//这里获取起始坐标,备用上滑取消发送功能,不需要的请删除
this.startY = e.changedTouches[0].pageY;
//获取录音时长,这个可全局监听
recorder.onprogress = function (params) {
that.rideoTimesNow = parseInt(params.duration)
}
// 开始录音
recorder.start().then(() => {
}, (error) => {
// 出错了
console.log(`${error.name} : ${error.message}`);
});
this.startRecor = true //开始录音标识
},
//录音结束
changeRideoSize(e) {
if (this.startRecor) { //判断是否已经开始
let thisclass = e.target.className
let EndmoveY = ''
EndmoveY = e.changedTouches[0].pageY //获取手指移动到最后的纵坐标
if (this.rideoTimesNow < 1) { //判断录音时长小于一秒停止录音
this.$message({
message: '提示,录音时间太短',
type: 'warning'
});
}
if (thisclass === 'recordBox' && this.rideoTimesNow >= 1) { //判断是否是录音按钮并且时间大于1秒
if (this.startY - EndmoveY >= 80) {
console.log('上滑取消')
recorder.stop() //停止录音
} else {
let wavData = recorder.getWAVBlob(); //获取wav数据
let files = new window.File([wavData], '新语音', { type: 'audio/wav' }) //blob数据转化为文件信息(这是上传服务器时需要的转换,也可以不转换直接存储二进制blob数据,不了解的可以百度或者直接问知道后台的)
}
} else {
// 停止录音
recorder.stop()
}
this.startRecor = false //结束重置录音状态
}
},
以上就是一个简单的录音功能
另外,我监听了全局的鼠标点击事件和手指点击事件用来获取一些参数,一些参数获取失败的,请自己加一下事件监听
5、简单介绍官网的一些方法
初始化时可添加参数
let recorder = new Recorder({
sampleBits: 16, // 采样位数,支持 8 或 16,默认是16
sampleRate: 16000, // 采样率,支持 11025、16000、22050、24000、44100、48000,根据浏览器默认值,我的chrome是48000
numChannels: 1, // 声道,支持 1 或 2, 默认是1
// compiling: false,(0.x版本中生效,1.x增加中) // 是否边录边转换,默认是false
});
获取录音时数据
recorder.onprogress = function(params) {
console.log(params.data); // 当前获取到到音频数据
console.log(recorder.duration); // 获取录音的总时长。
console.log(recorder.fileSize); //录音文件大小(单位:字节)。
}
开始录音。
返回: Promise。
recorder.start().then(() => {
// 开始录音
}, (error) => {
// 出错了
console.log(`${error.name} : ${error.message}`);
});
录音暂停。
返回: void
recorder.pause();
继续录音。
返回: void。
recorder.resume()
结束录音。
返回: void。
recorder.stop();
获取音频已经播的时长。
返回: number。
recorder.getPlayTime();
暂停录音播放。
返回: void。
recorder.pausePlay();
恢复录音播发。
返回: void。
recorder.resumePlay();
停止播放。
返回: void。
recorder.stopPlay();
销毁实例。
返回: Promise。
// 销毁录音实例,置为null释放资源,fn为回调函数,
recorder.destroy().then(function() {
recorder = null;
});
获取 PCM 数据,在录音结束后使用。
返回: Blob
注:使用该方法会默认调用 stop() 方法。
recorder.getPCMBlob();
获取 WAV 数据,在录音结束后使用
返回: Blob
注:使用该方法会默认调用 stop() 方法。
recorder.getWAVBlob();
获取左声道和右声道音频数据。
recorder.getChannelData();
下载 PCM 格式
fileName String 重命名文件
返回: Blob
注:使用该方法会默认调用 stop() 方法。
recorder.downloadPCM(fileName ?);
下载 WAV 格式
fileName String 重命名文件
返回: Blob
注:使用该方法会默认调用 stop() 方法。
recorder.downloadWAV(fileName ?);
返回的是一个1024长的,0-255大小的Uint8Array类型。用户可以根据这些数据自定义录音波形。此接口获取的是录音时的。
let dataArray = recorder.getRecordAnalyseData();
返回数据同 getRecordAnalyseData(),该方法获取的是播放时的。
let dataArray = recorder.getPlayAnalyseData();
获取麦克风权限。
返回:promise。
Recorder.getPermission().then(() => {
console.log('给权限了');
}, (error) => {
console.log(`${error.name} : ${error.message}`);
});
基本上就是这些方法可以被我们用到了,如果是播放外部音频,以及转换为mp3格式文件的 请参照官网API,我再复制粘贴就差不多纯粹抄袭行为了
虽然基本可以复制粘贴使用,但是建议还是看思路就好,别人写的始终是别人写的,并不一定适用于自己,请根据自己实际情况进行取舍