如果对讲双方分别是网页和设备，那一边需要js通过网页获取麦克风音频给java，java播放；然后另一边是 java获取设备音频流，发给js，js播放。以下内容实现了js和java互相进行语音对讲功能。
playAudio.vue
<template>
<div class="play-audio">
<el-button @click="startCall" ref="start">开始对讲</el-button>
<el-button @click="stopCall" ref="stop">结束对讲</el-button>
<el-button @click="silent" ref="stop">静音</el-button>
<el-button @click="unSilent" ref="stop">取消静音</el-button>
</div>
</template>
<script>
import PCMPlayer from '../utils/player-pcm'
import Recorder from '../utils/recorder'
export default {
data() {
return {
ws: null,
play: true,
player: null,
interval: null,
recorder: null
}
},
mounted() {
this.player = new PCMPlayer({
encoding: '16bitInt',
channels: 1,
sampleRate: 44100,
flushingTime: 100
})
this.recorder = new Recorder({
sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
sampleRate: 44100, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，
numChannels: 1, // 声道，支持 1 或 2， 默认是1
compiling: true // (0.x版本中生效,1.x增加中) // 是否边录边转换，默认是false
})
},
methods: {
unSilent() {
// 取消静音
this.player.volume(1)
},
silent() {
// 静音
this.player.volume(0)
},
initWs() {
// 连接 websocket,边端发送音频流
const httpType = location.protocol === 'https:' ? 'wss://' : 'ws://'
this.ws = new WebSocket(
httpType + `${location.host}/websocket/audio/robot`
)
this.ws.binaryType = 'arraybuffer'
this.ws.onopen = () => {
console.log('握手成功')
if (this.ws.readyState === 1) {
//ws进入连接状态，则每隔500毫秒发送一包数据
this.interval = setInterval(() => {
this.ws.send(this.recorder.getNextData())
}, 500)
}
}
this.ws.onmessage = ({ data }) => {
const buffer = new Uint8Array(data)
this.player.feed(buffer)
}
this.ws.onerror = (e) => {
console.log('error', e)
}
this.ws.onclose = () => {
console.log('socket closed')
}
},
startRecording() {
console.log('recordButton clicked')
this.recorder.start().then(
() => {
// 开始录音
this.initWs()
},
(error) => {
// 出错了
console.log(`出错了`)
}
)
},
// 开始对讲
startCall() {
this.play = true
this.startRecording()
},
// 关闭麦克风
stopCall() {
this.play = false
this.recorder.stop()
if (this.ws) {
this.ws.close()
}
clearInterval(this.interval)
}
}
}
</script>
<style>
</style>
player-pcm.js
function PCMPlayer(option) {
this.init(option);
}
PCMPlayer.prototype.init = function (option) {
var defaults = {
encoding: '16bitInt',//编码格式
channels: 1,//声道
sampleRate: 44100,//采样率
flushingTime: 100//pcm数据刷新间隔
};
this.option = Object.assign({}, defaults, option);
this.samples = new Float32Array();
this.flush = this.flush.bind(this);
this.interval = setInterval(this.flush, this.option.flushingTime);
this.maxValue = this.getMaxValue();
this.typedArray = this.getTypedArray();
this.createContext();
};
PCMPlayer.prototype.getMaxValue = function () {
var encodings = {
'8bitInt': 128,
'16bitInt': 32768,
'32bitInt': 2147483648,
'32bitFloat': 1
}
return encodings[this.option.encoding] ? encodings[this.option.encoding] : encodings['16bitInt'];
};
PCMPlayer.prototype.getTypedArray = function () {
var typedArrays = {
'8bitInt': Int8Array,
'16bitInt': Int16Array,
'32bitInt': Int32Array,
'32bitFloat': Float32Array
}
return typedArrays[this.option.encoding] ? typedArrays[this.option.encoding] : typedArrays['16bitInt'];
};
PCMPlayer.prototype.createContext = function () {
this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
this.gainNode = this.audioCtx.createGain();
this.gainNode.gain.value = 1;
this.gainNode.connect(this.audioCtx.destination);
this.startTime = this.audioCtx.currentTime;
};
PCMPlayer.prototype.isTypedArray = function (data) {
return (data.byteLength && data.buffer && data.buffer.constructor == ArrayBuffer);
};
// 播放原始pcm裸数据
PCMPlayer.prototype.feed = function (data) {
if (!this.isTypedArray(data)) return;
data = this.getFormatedValue(data);
var tmp = new Float32Array(this.samples.length + data.length);
tmp.set(this.samples, 0);
tmp.set(data, this.samples.length);
this.samples = tmp;
};
// 格式化
PCMPlayer.prototype.getFormatedValue = function (data) {
var data = new this.typedArray(data.buffer),
float32 = new Float32Array(data.length),
i;
for (i = 0; i < data.length; i++) {
float32[i] = data[i] / this.maxValue;
}
return float32;
};
// 控制播放器音量
PCMPlayer.prototype.volume = function (volume) {
this.gainNode.gain.value = volume;
};
// 销毁播放器实例
PCMPlayer.prototype.destroy = function () {
if (this.interval) {
clearInterval(this.interval);
}
this.samples = null;
this.audioCtx.close();
this.audioCtx = null;
};
PCMPlayer.prototype.flush = function () {
if (!this.samples.length) return;
var bufferSource = this.audioCtx.createBufferSource(),
length = this.samples.length / this.option.channels,
audioBuffer = this.audioCtx.createBuffer(this.option.channels, length, this.option.sampleRate),
audioData,
channel,
offset,
i,
decrement;
for (channel = 0; channel < this.option.channels; channel++) {
audioData = audioBuffer.getChannelData(channel);
offset = channel;
decrement = 50;
for (i = 0; i < length; i++) {
audioData[i] = this.samples[offset];
/* fadein */
if (i < 50) {
audioData[i] = (audioData[i] * i) / 50;
}
/* fadeout*/
if (i >= (length - 51)) {
audioData[i] = (audioData[i] * decrement--) / 50;
}
offset += this.option.channels;
}
}
if (this.startTime < this.audioCtx.currentTime) {
this.startTime = this.audioCtx.currentTime;
}
console.log('start vs current ' + this.startTime + ' vs ' + this.audioCtx.currentTime + ' duration: ' + audioBuffer.duration);
bufferSource.buffer = audioBuffer;
bufferSource.connect(this.gainNode);
bufferSource.start(this.startTime);
this.startTime += audioBuffer.duration;
this.samples = new Float32Array();
};
export default PCMPlayer
recorder.js
/*!
*
* js-audio-recorder - js audio recorder plugin
*
* @version v0.5.7
* @homepage https://github.com/2fps/recorder
* @author 2fps <echoweb@126.com> (https://www.zhuyuntao.cn)
* @license MIT
*
*/
!function (t, e) {
"object" == typeof exports && "object" == typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define([], e) : "object" == typeof exports ? exports.Recorder = e() : t.Recorder = e()
}(this, function () {
return function (t) {
var e = {};
function i(n) {
if (e[n]) return e[n].exports;
var r = e[n] = {
i: n,
l: !1,
exports: {}
};
return t[n].call(r.exports, r, r.exports, i), r.l = !0, r.exports
}
return i.m = t, i.c = e, i.d = function (t, e, n) {
i.o(t, e) || Object.defineProperty(t, e, {
enumerable: !0,
get: n
})
}, i.r = function (t) {
"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag, {
value: "Module"
}), Object.defineProperty(t, "__esModule", {
value: !0
})
}, i.t = function (t, e) {
if (1 & e && (t = i(t)), 8 & e) return t;
if (4 & e && "object" == typeof t && t && t.__esModule) return t;
var n = Object.create(null);
if (i.r(n), Object.defineProperty(n, "default", {
enumerable: !0,
value: t
}), 2 & e && "string" != typeof t)
for (var r in t) i.d(n, r, function (e) {
return t[e]
}.bind(null, r));
return n
}, i.n = function (t) {
var e = t && t.__esModule ? function () {
return t.default
} : function () {
return t
};
return i.d(e, "a", e), e
}, i.o = function (t, e) {
return Object.prototype.hasOwnProperty.call(t, e)
}, i.p = "", i(i.s = 0)
}([function (t, e, i) {
"use strict";
Object.defineProperty(e, "__esModule", {
value: !0
});
var n = function () {
function t(e) {
void 0 === e && (e = {}), this.isplaying = !1, this.lBuffer = [], this.rBuffer = [], this.tempPCM = [], this.inputSampleBits = 16, this.playStamp = 0, this.playTime = 0, this.totalPlayTime = 0, this.offset = 0, this.fileSize = 0;
var i, n = new (window.AudioContext || window.webkitAudioContext);
this.inputSampleRate = n.sampleRate, this.config = {
sampleBits: ~[8, 16].indexOf(e.sampleBits) ? e.sampleBits : 16,
sampleRate: ~[8e3, 11025, 16e3, 22050, 24e3, 44100, 48e3].indexOf(e.sampleRate) ? e.sampleRate : this.inputSampleRate,
numChannels: ~[1, 2].indexOf(e.numChannels) ? e.numChannels : 1,
compiling: !!e.compiling || !1
}, this.outputSampleRate = this.config.sampleRate, this.oututSampleBits = this.config.sampleBits, this.littleEdian = (i = new ArrayBuffer(2), new DataView(i).setInt16(0, 256, !0), 256 === new Int16Array(i)[0]), t.initUserMedia()
}
return t.prototype.initRecorder = function () {
var t = this;
this.context && this.destroy(), this.context = new (window.AudioContext || window.webkitAudioContext), this.analyser = this.context.createAnalyser(), this.analyser.fftSize = 2048;
var e = this.context.createScriptProcessor || this.context.createJavaScriptNode;
this.recorder = e.apply(this.context, [4096, this.config.numChannels, this.config.numChannels]), this.recorder.onaudioprocess = function (e) {
if (t.isrecording && !t.ispause) {
var i, n = e.inputBuffer.getChannelData(0),
r = null;
if (t.lBuffer.push(new Float32Array(n)), t.size += n.length, 2 === t.config.numChannels && (r = e.inputBuffer.getChannelData(1), t.rBuffer.push(new Float32Array(r)), t.size += r.length), t.config.compiling) {
var o = t.transformIntoPCM(n, r);
t.tempPCM.push(o), t.fileSize = o.byteLength * t.tempPCM.length
} else t.fileSize = Math.floor(t.size / Math.max(t.inputSampleRate / t.outputSampleRate, 1)) * (t.oututSampleBits / 8);
i = 100 * Math.max.apply(Math, n), t.duration += 4096 / t.inputSampleRate, t.onprocess && t.onprocess(t.duration), t.onprogress && t.onprogress({
duration: t.duration,
fileSize: t.fileSize,
vol: i,
data: t.tempPCM
})
}
}
}, t.prototype.start = function () {
var t = this;
if (!this.isrecording) return this.clear(), this.initRecorder(), this.isrecording = !0, navigator.mediaDevices.getUserMedia({
audio: !0
}).then(function (e) {
t.audioInput = t.context.createMediaStreamSource(e), t.stream = e
}).then(function () {
t.audioInput.connect(t.analyser), t.analyser.connect(t.recorder), t.recorder.connect(t.context.destination)
})
}, t.prototype.pause = function () {
this.isrecording && !this.ispause && (this.ispause = !0)
}, t.prototype.resume = function () {
this.isrecording && this.ispause && (this.ispause = !1)
}, t.prototype.stop = function () {
this.isrecording = !1, this.audioInput && this.audioInput.disconnect(), this.recorder.disconnect()
}, t.prototype.play = function () {
this.stop(), this.source && this.source.stop(), this.isplaying = !0, this.playTime = 0, this.playAudioData()
}, t.prototype.getPlayTime = function () {
var t = 0;
return (t = this.isplaying ? this.context.currentTime - this.playStamp + this.playTime : this.playTime) >= this.totalPlayTime && (t = this.totalPlayTime), t
}, t.prototype.pausePlay = function () {
!this.isrecording && this.isplaying && (this.source && this.source.disconnect(), this.playTime += this.context.currentTime - this.playStamp, this.isplaying = !1)
}, t.prototype.resumePlay = function () {
this.isrecording || this.isplaying || 0 === this.playTime || (this.isplaying = !0, this.playAudioData())
}, t.prototype.stopPlay = function () {
this.isrecording || (this.playTime = 0, this.isplaying = !1, this.source && this.source.stop())
}, t.prototype.getWholeData = function () {
return this.tempPCM
}, t.prototype.getNextData = function () {
var t1 = this.tempPCM.length,
e1 = this.tempPCM.slice(this.offset)
if (e1.length) {
var e = new ArrayBuffer(e1.length * e1[0].byteLength),
i = new DataView(e),
n = 0;
e1.forEach(function (t) {
for (var e = 0, r = t.byteLength; e < r; ++e) i.setInt8(n, t.getInt8(e)), n++
}), this.PCM = i, this.tempPCM = []
}
if (this.PCM) return this.PCM;
var r = this.flat();
r = t.compress(r, this.inputSampleRate, this.outputSampleRate), this.PCM = t.encodePCM(r, this.oututSampleBits, this.littleEdian)
this.offset = t1
return new Blob([r])
// return e1
}, t.prototype.playAudioData = function () {
var e = this;
this.context.decodeAudioData(this.getWAV().buffer, function (t) {
e.source = e.context.createBufferSource(), e.source.buffer = t, e.totalPlayTime = e.source.buffer.duration, e.source.connect(e.analyser), e.analyser.connect(e.context.destination), e.source.start(0, e.playTime), e.playStamp = e.context.currentTime
}, function (e) {
t.throwError(e)
})
}, t.prototype.getRecordAnalyseData = function () {
if (this.ispause) return this.prevDomainData;
var t = new Uint8Array(this.analyser.frequencyBinCount);
return this.analyser.getByteTimeDomainData(t), this.prevDomainData = t
}, t.prototype.getPlayAnalyseData = function () {
return this.getRecordAnalyseData()
}, t.prototype.getPCM = function () {
if (this.tempPCM.length) {
var e = new ArrayBuffer(this.tempPCM.length * this.tempPCM[0].byteLength),
i = new DataView(e),
n = 0;
this.tempPCM.forEach(function (t) {
for (var e = 0, r = t.byteLength; e < r; ++e) i.setInt8(n, t.getInt8(e)), n++
}), this.PCM = i, this.tempPCM = []
}
if (this.PCM) return this.PCM;
var r = this.flat();
return r = t.compress(r, this.inputSampleRate, this.outputSampleRate), this.PCM = t.encodePCM(r, this.oututSampleBits, this.littleEdian)
}, t.prototype.getPCMBlob = function () {
return this.stop(), new Blob([this.getPCM()])
}, t.prototype.downloadPCM = function (t) {
void 0 === t && (t = "recorder");
var e = this.getPCMBlob();
this.download(e, t, "pcm")
}, t.prototype.getWAV = function () {
var e = this.getPCM();
return t.encodeWAV(e, this.inputSampleRate, this.outputSampleRate, this.config.numChannels, this.oututSampleBits, this.littleEdian)
}, t.prototype.getWAVBlob = function () {
return this.stop(), new Blob([this.getWAV()], {
type: "audio/wav"
})
}, t.prototype.downloadWAV = function (t) {
void 0 === t && (t = "recorder");
var e = this.getWAVBlob();
this.download(e, t, "wav")
}, t.prototype.transformIntoPCM = function (e, i) {
var n = new Float32Array(e),
r = new Float32Array(i),
o = t.compress({
left: n,
right: r
}, this.inputSampleRate, this.outputSampleRate);
return t.encodePCM(o, this.oututSampleBits, this.littleEdian)
}, t.prototype.destroy = function () {
return this.stopStream(), this.closeAudioContext()
}, t.prototype.stopStream = function () {
this.stream && this.stream.getTracks && (this.stream.getTracks().forEach(function (t) {
return t.stop()
}), this.stream = null)
}, t.prototype.closeAudioContext = function () {
return this.context && this.context.close && "closed" !== this.context.state ? this.context.close() : new Promise(function (t) {
t()
})
}, t.prototype.download = function (e, i, n) {
try {
var r = document.createElement("a");
r.href = window.URL.createObjectURL(e), r.download = i + "." + n, r.click()
} catch (e) {
t.throwError(e)
}
}, t.prototype.clear = function () {
this.lBuffer.length = 0, this.rBuffer.length = 0, this.size = 0, this.fileSize = 0, this.PCM = null, this.audioInput = null, this.duration = 0, this.ispause = !1, this.isplaying = !1, this.playTime = 0, this.totalPlayTime = 0, this.source && (this.source.stop(), this.source = null)
}, t.prototype.flat = function () {
var t = null,
e = new Float32Array(0);
1 === this.config.numChannels ? t = new Float32Array(this.size) : (t = new Float32Array(this.size / 2), e = new Float32Array(this.size / 2));
for (var i = 0, n = 0; n < this.lBuffer.length; n++) t.set(this.lBuffer[n], i), i += this.lBuffer[n].length;
i = 0;
for (n = 0; n < this.rBuffer.length; n++) e.set(this.rBuffer[n], i), i += this.rBuffer[n].length;
return {
left: t,
right: e
}
}, t.playAudio = function (t) {
var e = document.createElement("audio");
e.src = window.URL.createObjectURL(t), e.play()
}, t.compress = function (t, e, i) {
for (var n = e / i, r = Math.max(n, 1), o = t.left, s = t.right, a = Math.floor((o.length + s.length) / n), u = new Float32Array(a), h = 0, c = 0; h < a;) {
var l = Math.floor(c);
u[h] = o[l], h++, s.length && (u[h] = s[l], h++), c += r
}
return u
}, t.encodePCM = function (t, e, i) {
void 0 === i && (i = !0);
var n = 0,
r = t.length * (e / 8),
o = new ArrayBuffer(r),
s = new DataView(o);
if (8 === e)
for (var a = 0; a < t.length; a++, n++) {
var u = (h = Math.max(-1, Math.min(1, t[a]))) < 0 ? 128 * h : 127 * h;
u = +u + 128, s.setInt8(n, u)
} else
for (a = 0; a < t.length; a++, n += 2) {
var h = Math.max(-1, Math.min(1, t[a]));
s.setInt16(n, h < 0 ? 32768 * h : 32767 * h, i)
}
return s
}, t.encodeWAV = function (t, e, i, n, o, s) {
void 0 === s && (s = !0);
var a = i > e ? e : i,
u = o,
h = new ArrayBuffer(44 + t.byteLength),
c = new DataView(h),
l = n,
p = 0;
r(c, p, "RIFF"), p += 4, c.setUint32(p, 36 + t.byteLength, s), r(c, p += 4, "WAVE"), r(c, p += 4, "fmt "), p += 4, c.setUint32(p, 16, s), p += 4, c.setUint16(p, 1, s), p += 2, c.setUint16(p, l, s), p += 2, c.setUint32(p, a, s), p += 4, c.setUint32(p, l * a * (u / 8), s), p += 4, c.setUint16(p, l * (u / 8), s), p += 2, c.setUint16(p, u, s), r(c, p += 2, "data"), p += 4, c.setUint32(p, t.byteLength, s), p += 4;
for (var f = 0; f < t.byteLength;) c.setUint8(p, t.getUint8(f)), p++, f++;
return c
}, t.throwError = function (t) {
throw new Error(t)
}, t.initUserMedia = function () {
void 0 === navigator.mediaDevices && (navigator.mediaDevices = {}), void 0 === navigator.mediaDevices.getUserMedia && (navigator.mediaDevices.getUserMedia = function (t) {
var e = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
return e ? new Promise(function (i, n) {
e.call(navigator, t, i, n)
}) : Promise.reject(new Error("浏览器不支持 getUserMedia !"))
})
}, t.getPermission = function () {
return this.initUserMedia(), navigator.mediaDevices.getUserMedia({
audio: !0
}).then(function (t) {
t.getTracks().forEach(function (t) {
return t.stop()
})
})
}, t
}();
function r(t, e, i) {
for (var n = 0; n < i.length; n++) t.setUint8(e + n, i.charCodeAt(n))
}
e.default = n
}]).default
});
//# sourceMappingURL=recorder.js.map
java获取麦克风音频请参考以下链接内容：
https://blog.csdn.net/weixin_42168430/article/details/109257345
java播放来着js的音频请参考以下链接内容
https://yzd1206.blog.csdn.net/article/details/118940037?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-118940037-blog-107579538.t0_edu_mix&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-118940037-blog-107579538.t0_edu_mix&utm_relevant_index=1
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
