Skip to content

李宁 / Activity

Go to a project
Commit 75d6ec4d by 李宁
Options

音频逻辑改完后的版本

1 parent 4bc1122d
Inline Side-by-side
Showing 3 changed files with 213 additions and 97 deletions
huaian/css/demo.css
......@@ -906,6 +906,7 @@ html,body{
top: -0.84rem;
left: 50%;
transform: translateX(-50%);
z-index: 99;
}
.warningCon .detail{
font-size: .32rem;
......@@ -938,6 +939,8 @@ html,body{
}
.warningCon .detail .des{
line-height: .6rem;
text-align: justify;
text-indent: 2em;
}
.warningCon .detail .dess{
display: none;
......@@ -973,4 +976,8 @@ div{
position: absolute;
left: 0px;
top: 0px;
}
em{
font-style: normal;
}
\ No newline at end of file
huaian/demo.html
......@@ -7,7 +7,7 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>江苏移动</title>
<link rel="stylesheet" href="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/css/vant.css"/>
<link rel="stylesheet" href="css/demo.css?676333276">
<link rel="stylesheet" href="css/demo.css?6763332736999">
</head>
<body>
......@@ -115,7 +115,7 @@
</div>
</div>
<audio id="mp3Source" muted playsinline src=""></audio>
<!-- <audio id="mp3Source" muted playsinline src=""></audio> -->
<div class="alertDiv" id="accountAlertDiv">
<div class="inner">
......@@ -373,7 +373,7 @@
<script src="js/util.js?1212"></script>
<script src="js/vue.min.js"></script>
<script src="js/vant.min.js"></script>
<script src="js/demo.js?2333333"></script>
<script src="js/demo.js?1203334330"></script>
</body>
</html>
\ No newline at end of file
huaian/js/demo.js
......@@ -55,6 +55,7 @@ function createClient() {
async function createTrackAndPublish() {
const tracks = await Promise.all([
AgoraRTC.createMicrophoneAudioTrack({
mediaStreamTrack: window.webAudioTrack,
encoderConfig: "music_standard"
}),
AgoraRTC.createCameraVideoTrack({
......@@ -153,7 +154,7 @@ function getProcess(){
callId: callId,
applyId: applyId,
}
}).then(res=>{
}).then(async res=>{
if(res.code == 200){
res = res.data
......@@ -165,7 +166,12 @@ function getProcess(){
if(res.checkStatus && res.checkStatus==1){
$('#waitting').show()
$("#mp3Source")[0].pause()
//$("#mp3Source")[0].pause()
if (currentSource) {
try { currentSource.stop(); } catch (e) { }
currentSource = null;
}
//处理下图片提交的等待框
submitPictureSucc()
......@@ -240,57 +246,37 @@ function getProcess(){
stepId = res.voiceCode
$("#contextDiv").html(res.context)
if(!ifListener){
$("#mp3Source")[0].addEventListener('play', function() {
util.httpRequest({
url: '/startOrEnd',
data: {
callId: callId,
voiceStartType: 1,
applyId: applyId,
voiceCode: stepId
}
})
});
// if(!ifListener){
// $("#mp3Source")[0].addEventListener('play', function() {
// audioStart()
// });
$("#mp3Source")[0].addEventListener('ended', function() {
util.httpRequest({
url: '/startOrEnd',
data: {
callId: callId,
voiceStartType: 2,
applyId: applyId,
voiceCode: stepId
}
})
if(stepId.includes('end')){
free()
window.location.replace('result.html?time='+ new Date().getTime())
}
});
$("#mp3Source")[0].addEventListener('error', e => {
if(voiceUrl){
("#mp3Source")[0].muted = false
$("#mp3Source").attr('src', voiceUrl)
$("#mp3Source")[0].play()
}
console.warn('解码失败', e.target.error);
});
}
ifListener = true
// $("#mp3Source")[0].addEventListener('ended', function() {
// audioEnd()
// });
// $("#mp3Source")[0].addEventListener('error', e => {
// if(voiceUrl){
// ("#mp3Source")[0].muted = false
// $("#mp3Source").attr('src', voiceUrl)
// $("#mp3Source")[0].play()
// }
// console.warn('解码失败', e.target.error);
// });
// }
//ifListener = true
if(res.voiceUrlMp3){
$("#mp3Source")[0].pause()
$("#mp3Source")[0].muted = false
voiceUrl = res.voiceUrlMp3
setTimeout(()=>{
$("#mp3Source").attr('src', voiceUrl)
$("#mp3Source")[0].play()
},350)
// $("#mp3Source")[0].pause()
// $("#mp3Source")[0].muted = false
// voiceUrl = res.voiceUrlMp3
// setTimeout(()=>{
// $("#mp3Source").attr('src', voiceUrl)
// $("#mp3Source")[0].play()
// },350)
let buff = await loadPrompt(res.voiceUrlMp3); // 先解码
playPrompt(buff);
}
audioSet(false)
......@@ -380,12 +366,116 @@ function getProcess(){
if(stepId.startsWith('end')){
$("#contextDiv").css('font-size','.28rem')
}
setStepButt()
}
})
}
function audioStart(){
util.httpRequest({
url: '/startOrEnd',
data: {
callId: callId,
voiceStartType: 1,
applyId: applyId,
voiceCode: stepId
}
})
}
function audioEnd(){
util.httpRequest({
url: '/startOrEnd',
data: {
callId: callId,
voiceStartType: 2,
applyId: applyId,
voiceCode: stepId
}
})
if(stepId.includes('end')){
free()
window.location.replace('result.html?time='+ new Date().getTime())
}
}
//---------音频播放新逻辑---------
let mainCtx = null;
let webAudioTrack = null ;
async function startWebAudioChain() {
/* 1. 麦克风节点（同一上下文） */
const stream = await navigator.mediaDevices.getUserMedia({
audio: {
echoCancellation: { exact: true },
noiseSuppression: { exact: true },
autoGainControl: { exact: true },
volume: 0.05
}
});
let micSource = mainCtx.createMediaStreamSource(stream);
/* 2. 加载「真实提示音」→ 音量压到 0.0001 → loop 永驻 */
// ① 先加载同一条提示音（已缓存
const buf = await loadPrompt('https://zjaudio.eos-wuxi-5.cmecloud.cn/IqiVe4GU.mp3');
// ② 创建 BufferSource
let shadowBufNode = mainCtx.createBufferSource();
shadowBufNode.buffer = buf;
shadowBufNode.loop = true;
const shadowGain = mainCtx.createGain();
shadowGain.gain.value = 0.0001; // 用户听不见，但系统认为“有声音”
shadowBufNode.connect(shadowGain).connect(mainCtx.destination);
shadowBufNode.start(); // 永不 stop
/* 3. 送回 LiveKit */
const dest = mainCtx.createMediaStreamDestination();
micSource.connect(dest);
webAudioTrack = dest.stream.getAudioTracks()[0]
}
// const audioCtx = new AudioContext({
// latencyHint: 'interactive',
// sinkId: 'default'
// });
// let gainNode = audioCtx.createGain();
// gainNode.gain.value = 0.8;
// gainNode.connect(audioCtx.destination);
async function loadPrompt(url) {
if (!mainCtx) return;
const res = await fetch(url);
const arr = await res.arrayBuffer();
let promptBuffer = await mainCtx.decodeAudioData(arr);
return promptBuffer
}
let currentSource = null;
function playPrompt(buffer) {
if (!mainCtx) return;
// 1. 停掉上一条
if (currentSource) {
try { currentSource.stop(); } catch (e) { }
currentSource = null;
}
// 2. 创建新节点
const src = mainCtx.createBufferSource();
src.buffer = buffer;
src.connect(mainCtx.destination);
src.start();
audioStart()
// 3. 记录引用
currentSource = src;
// 4. 播放完毕自动清空
src.onended = () => {
currentSource = null;
audioEnd()
};
}
//---------音频播放新逻辑---------
function audioSet(flag){
if(isHuaweiPhone() == '1'){
if(flag){
......@@ -1002,7 +1092,8 @@ async function setEnabled(type, state) {
}
}
async function initOrigin(data){
//声网的入会逻辑
async function initSw(data){
createClient()
options.channel = data.data.data.channel
......@@ -1019,6 +1110,48 @@ async function initOrigin(data){
await createTrackAndPublish()
}
//livekit的入会逻辑
async function initLk(){
// 创建房间实例，启用自适应流和动态发布
room = new LivekitClient.Room({
adaptiveStream: true,
dynacast: true,
videoCaptureDefaults: {
resolution: LivekitClient.VideoPresets.h720.resolution,
frameRate: 25,
}
});
//resolution: LivekitClient.VideoPresets.h720.resolution,
//new VideoPreset(1280, 720, 1_700_000, 30)
//LivekitClient.VideoPresets.h720.resolution
//frameRate: 25,
// 设置事件监听器
room
.on(LivekitClient.RoomEvent.LocalTrackPublished, handleLocalTrackPublished)
let url = 'wss://lk.lgyzpt.com'
let roomToken = data.data.data.token
// 预连接以加速连接过程
await this.room.prepareConnection(url, roomToken);
// 连接到房间
await this.room.connect(url, roomToken);
util.toast('livekit入会成功')
await this.room.localParticipant.setCameraEnabled(true)
await room.localParticipant.publishTrack(webAudioTrack, {
name: 'mic',
source: LivekitClient.Track.Source.Microphone
});
//util.toast('摄像头开启成功')
// await this.room.localParticipant.setMicrophoneEnabled(true)
// util.toast('麦克风开启成功')
// await room.localParticipant.enableCameraAndMicrophone()
// util.toast('录像开启成功')
const devices = await LivekitClient.Room.getLocalDevices('videoinput');
cams = devices
}
var room = null
var rtcType = ''
......@@ -1037,15 +1170,15 @@ async function init(){
noShootNum = window.noShootNum||3
accountInputNum = window.accountInputNum||5
$("#mp3Source").attr('src', 'https://lgyztest.obs.cidc-rp-12.joint.cmecloud.cn/file/temp/2025-01-08/hhT2XXAj.mp3')
$("#mp3Source")[0].autoplay = true
$("#mp3Source")[0].play()
// $("#mp3Source").attr('src', 'https://lgyztest.obs.cidc-rp-12.joint.cmecloud.cn/file/temp/2025-01-08/hhT2XXAj.mp3')
// $("#mp3Source")[0].autoplay = true
// $("#mp3Source")[0].play()
let data = await util.httpRequest({
url: '/createRoom',
data: {
applyId: applyId,
rtcType: '1'
rtcType: '2'
}
})
......@@ -1060,43 +1193,9 @@ async function init(){
rtcType = data.data.data.rtcType
if(data.data.data.rtcType == 1){
await initOrigin(data)
await initSw(data)
}else{
// 创建房间实例，启用自适应流和动态发布
room = new LivekitClient.Room({
adaptiveStream: true,
dynacast: true,
videoCaptureDefaults: {
resolution: LivekitClient.VideoPresets.h720.resolution,
frameRate: 25,
}
});
//resolution: LivekitClient.VideoPresets.h720.resolution,
//new VideoPreset(1280, 720, 1_700_000, 30)
//LivekitClient.VideoPresets.h720.resolution
//frameRate: 25,
// 设置事件监听器
room
.on(LivekitClient.RoomEvent.LocalTrackPublished, handleLocalTrackPublished)
let url = 'wss://lk.lgyzpt.com'
let roomToken = data.data.data.token
// 预连接以加速连接过程
await this.room.prepareConnection(url, roomToken);
// 连接到房间
await this.room.connect(url, roomToken);
util.toast('livekit入会成功')
await this.room.localParticipant.setCameraEnabled(true)
util.toast('摄像头开启成功')
await this.room.localParticipant.setMicrophoneEnabled(true)
util.toast('麦克风开启成功')
// await room.localParticipant.enableCameraAndMicrophone()
// util.toast('录像开启成功')
const devices = await LivekitClient.Room.getLocalDevices('videoinput');
cams = devices
await initLk(data)
}
$('#loading').hide()
......@@ -1163,8 +1262,7 @@ $('#cheatClose').click(()=>{
})
release()
$('#videoBegin').click(()=>{
$('#videoBegin').click(async ()=>{
if(!AgoraRTC.checkSystemRequirements()){
util.toast('暂不支持')
return
......@@ -1172,6 +1270,17 @@ $('#videoBegin').click(()=>{
$('#beginAlert').hide()
mainCtx = new (window.AudioContext || window.webkitAudioContext)({
latencyHint: 'interactive'
});
if (mainCtx.state === 'suspended') await mainCtx.resume();
navigator.mediaDevices.getUserMedia({audio: true, video: false})
.then(tmp => tmp.getTracks().forEach(t => t.stop()))
.catch(() => {});
await startWebAudioChain()
init()
})
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!