<template>
<div>
<h1>{{tipMsg}}</h1>
<button @click="onStartVoice">开始</button>
<button @click="onEndVoice">结束</button>
<button @click="onPlayAudio">播放</button>
<div v-show="isFinished">
<h2>Current voice player is:</h2>
<audio id="audioVoice"
controls
autoplay></audio>
</div>
</div>
</template>
<script>
// 录音插件
import Recorder from "../../static/js/sdk.js";
export default {
data () {
return {
isVoice: false,
isFinished: false,
tipMsg: '录音',
audio: "",
recorder: new Recorder()
}
},
mounted () { // 页面加载完调用
this.$login.user = localStorage.getItem('patientNum')
this.$conn.open(this.$login) // 登录环信
this.$conn.listen({
onOpened: function ( message ) { //连接成功回调
console.log('登录成功')
}
})
},
methods: {
// 开始录音
onStartVoice () {
this.onStopAudio()
this.isFinished = false;
this.recorder.startRecord({
success: res => {
this.isVoice = true
},
error: e => {
this.isVoice = false
this.$toast(e)
}
});
},
// 结束录音
onEndVoice () {
this.isFinished = false;
this.recorder.stopRecord({
success: res => {
this.isVoice = false
//此处可以获取音频源文件(res),用于上传等操作
// console.log('音频源文件', res)
// var arr = WebIM.utils.parseDownloadResponse.call(WebIM.conn, res)
// console.log(arr)
// let files = new window.File([res], '文件名字', {type: 'audio/mp3'})
// console.log('file', files)
// var obj = {
// url: arr,
// filename: '文件名字',
// filetype: 'mp3',
// data: files
// }
// console.log(obj)
// var file = WebIM.utils.getFileUrl(obj); // 将音频转化为二进制文件
// console.log(file)
let taht = this
var id = taht.$conn.getUniqueId(); // 生成本地消息id
var msg = new WebIM.message('audio', id); // 创建音频消息
console.log('音频源文件', res); // blob文件
var input = new window.File([res], '录音文件', {type: 'audio/mp3'});
console.log('音频源input文件', input); // 转file对象
var urlPath = window.URL.createObjectURL(input); // 生成blob链接
console.log(urlPath)
var file = { // 伪造二进制对象
url: urlPath,
filename: '录音',
filetype: 'mp3',
data: input
}
console.log(file);
var allowType = {
'mp3': true,
'amr': true,
'wmv': true
};
file.filename = input.name || '';
var index = file.filename.lastIndexOf('.');
if(index != -1) {
file.filetype = file.filename.substring(index + 1).toLowerCase();
}
console.log('file', file);
console.log('类型', file.filetype.toLowerCase());
if (file.filetype.toLowerCase() in allowType) {
var option = {
apiUrl: WebIM.config.apiURL,
file: file, // 二进制对象
length: '3', // 音频文件时长,单位(s)
to: localStorage.getItem('userId'), // 接收消息对象
roomType: false,
onFileUploadError: function (e) { // 消息上传失败
console.log("上传失败")
},
onFileUploadComplete: function () { // 消息上传成功
console.log("上传成功")
},
success: function () { // 消息发送成功
console.log("发送成功")
},
flashUpload: WebIM.flashUpload,
ext: {file_length: file.data.size}
};
console.log(option)
msg.set(option);
taht.$conn.send(msg.body);
console.log(msg.body)
}
},
error: e => {
this.isVoice = false
}
});
},
// 播放录音
onPlayAudio () {
this.isVoice = false
this.isFinished = true;
this.audio = document.getElementById("audioVoice");
this.recorder.play(this.audio);
},
// 停止播放录音
onStopAudio () {
this.recorder.clear(this.audio);
}
}
}
</script>
<style>
</style>
录音插件:插件地址