使用 AudioBufferSourceNode 连续播放多个音频片段可能会出现杂音问题,这个是怎么解决的呢。
小程序怎么按顺序播放音频?一个数组中有六条音频链接,怎么按顺序在小程序中播放出来? [图片] [图片] pop出来不会从第一个开始,也只是播放其中一个,用循环的话所有音频会一起播放,求助有什么办法可以一个一个按顺序播放?
11-05可以播放,但是两个buffer音频播放不是很流畅。 因为每次创建新的 AudioBufferSourceNode 并连接到音频上下文时,可能会引入微小的延迟或不连续性 看看有没有人有解决方法 import { Vue, Component } from 'vue-property-decorator'; import { BASE_URL, ACCESS_TOKEN, BASE_REQUEST_PARAMS, extractAudioValues, hexStringToArrayBuffer, uint8ArrayToString } from './constant'; const text = '这篇文章详细介绍了前端流式播放TTS语音的实现方法,通过示例代码讲解了如何使用关键帧和音频通道来播放音频文件,对于理解TTS语音播放的技术细节很有帮助。代码中对音频播放状态的控制逻辑清晰,对于正在研究或实现类似功能的开发者来说,是一篇不错的参考文章。'; @Component export default class VkThreejs extends Vue { audioCtx: any = undefined; source; arrayBuffers = []; audioIndex = 0; isDecoding = false; initInnerAudioContext() { // this.audioCtx = wx.createInnerAudioContext({ // useWebAudioImplement: true // 是否使用 WebAudio 作为底层音频驱动,默认关闭。对于短音频、播放频繁的音频建议开启此选项,开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长,因此对于长音频建议关闭此选项 // }) this.audioCtx = wx.createWebAudioContext(); this.source = this.audioCtx.createBufferSource(); } getData() { return new Promise((resolve) => { let read = []; const requestTask = uni.request({ url: BASE_URL, //调用后端接口 method: 'POST', //获取文件流 // responseType: 'text', enableChunked: true, header: { 'content-type': 'application/json', Authorization: 'Bearer ' + ACCESS_TOKEN }, data: { ...BASE_REQUEST_PARAMS, text: text } }); requestTask.onChunkReceived((res) => { const resData = res.data; const stringData = uint8ArrayToString(resData); const bufferData = hexStringToArrayBuffer(stringData); this.audioCtx.decodeAudioData( bufferData, (buffer) => { this.loadAudioFile(buffer, resData); }, (err) => { console.error('decodeAudioData fail', err); } ); }); }); } // 加载音频文件并解码为音频缓冲区 loadAudioFile(decodeBuffer: ArrayBuffer, originBuffer: ArrayBuffer): void { // if (originBuffer.byteLength < 10) { // // 因为是采用 SSE 数据格式为:data:xxxxxx\n\n // // 这里就是为了排除 data: 和 \n\n,只接受中间的数据 // // 通过打印开源发现data:的Uint8Array:[100, 97, 116, 97, 58],\n\n的Uint8Array:[10, 10] // return; // } this.arrayBuffers.push(decodeBuffer); this.playNextAudio(); } // 创建播放下一个音频的方法 playNextAudio(): void { const len = this.arrayBuffers.length; // 检查是否还有要播放的音频,如果有,继续播放 if (this.audioIndex < len && !this.isDecoding && this.audioIndex !== len - 1) { this.isDecoding = true; this.playAudio(this.arrayBuffers[this.audioIndex++]); } } // 播放音频 playAudio(arrayBuffer: ArrayBuffer): void { let source = this.audioCtx.createBufferSource(); source.buffer = arrayBuffer; source.connect(this.audioCtx.destination); // 播放音频 source.start(0); // 监听音频结束事件 source.onended = () => { // 在微信小程序中,由于 Web Audio API 的限制,使用 AudioBufferSourceNode 连续播放多个音频片段可能会出现杂音问题。 // 这是因为每次创建新的 AudioBufferSourceNode 并连接到音频上下文时,可能会引入微小的延迟或不连续性。 this.isDecoding = false; this.playNextAudio(); }; } // 进入页面 onLoad() { this.initInnerAudioContext(); this.getData(); } }
微信小程序中的TTS如何实现流式播放的?目前在做微信小程序的demo,发现微信小程序关于语音的api只能通过音频地址播放,这样的话就需要合成好以后才能播放,对于大量的文本,会大大增加等待时间,想问一下,在小程序中,tts的流式播放是如何实现的,或者有什么其他办法,可以一边播放,一边合成
11-04同问
ScriptProcessor替代品https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/WebAudioContext.createScriptProcessor.html 在浏览器中,ScriptProcessor已被标记为deprecated。需要考虑用AudioWorklet替代。微信小程序是否有计划支持相关API(如AudioContext.audioWorklet)?
10-28使用两个video通过z-index,显示隐藏的方式,能解决切换两个视频出现黑屏的问题 <image :class="{ 'virtual-image': true, 'virtual-image-lower': virtualPersonPosition === 1, 'virtual-player-show': !isShow && posterSrc, 'virtual-player-hidden': isShow }" v-is="isShow" :src="posterSrc" mode="aspectFill" /> <video id="bizui" :class="{ 'virtual-player': true, 'virtual-player-lower': virtualPersonPosition === 1, 'virtual-player-show': isShow && videoStatus === 'bizui', 'virtual-player-hidden': !isShow || videoStatus !== 'bizui' }" :show-center-play-btn="false" :enable-play-gesture="false" :controls="false" object-fit="cover" :poster="xxx" src="xx.mp4" :loop="true" :enable-progress-gesture="false" :autoplay="true" :direction="direction" :muted="true" @play="onPlay" /> <video :class="{ 'virtual-player': true, 'virtual-player-lower': virtualPersonPosition === 1, 'virtual-player-show': isShow && videoStatus === 'zhangzui', 'virtual-player-hidden': !isShow || videoStatus !== 'zhangzui' }" id="zhangzui" :show-center-play-btn="false" :enable-play-gesture="false" :controls="false" :object-fit="'cover'" :poster="posterSrc" src="xx" :loop="true" :enable-progress-gesture="false" :autoplay="true" :direction="direction" :muted="true" @play="onPlay" /> onPlay() { // // 视频可以播放的时候,显示视频,黑屏问题 if (!this.isShow) { this.playTimer = setTimeout(() => { this.isShow = true; }, 300); } } public changeVideoStatus(status = 'bizui') { if (this.videoStatus === status) return; this.videoStatus = status; }
微信小程序video视频预加载问题- 需求的场景描述(希望解决的问题) 微信小程序video标签及相关api中没有找到有提供视频预加载,及其预加载进度的api,请问现在视频支持预加载吗?或者有什么方案解决这个问题吗? - 希望提供的能力 支持预加载并返回进度,100%后给予回调方法。
10-17同求
小程序有没有类似原生MediaSource功能?需求:websocket协议下 连续接受和播放Mp3文件流,并且实现自动播放 遇到的问题: 小程序环境下文件流片段衔接处播放卡顿.h5环境下无法实现自动播放 采用的协议: websocket 实现过程: 服务器将MP3格式的音频流通过websocket的方式转发至小程序端.小程序端没有类似MediaSource媒体源来保存和追加文件流.只能将文件片段一段一段塞进队列.然后再按顺序播放.这种方式须监听上一个片段播放结束事件然后再启动下一个片段的播放. 结果: 能播放,并且能够实现自动播放但整段语音听起来在衔接处不流畅,有卡顿. 想通过webview内嵌H5的方式实现,因为有MediaSource,可以实现一边播一遍往后面append接收到的流,能流畅播放,但是由于浏览器限制,无法做到自动播放,只能pass 诉求:小程序有没有类似MediaSource的功能,赋值给video源的同时还能不断追加文件流?或者根据代码片段,有没有其他更好的方式,来消除衔接处的卡顿?
09-23