uniapp 播放 opus 数据流

### 实现 Opus 音频数据流的播放 在 UniApp 中处理 Opus 音频数据流涉及多个方面，包括获取音频流、解码以及通过合适的 API 进行播放。由于 WebRTC 对某些编码头的支持有限[^1]，对于 Opus 编码而言，现代浏览器通常具备较好的兼容性。 #### 使用 Web Audio API 解码并播放 Opus 数据流 Web Audio API 提供了一种强大的方式来处理音频数据，可以用于解码和播放来自不同源的数据。然而需要注意的是，直接加载 Opus 文件可能不是所有环境都支持的操作；因此推荐先将 Opus 数据转换成 PCM 或其他更广泛受支持的形式再进行播放。 为了实现在 UniApp 上播放 Opus 音频流的功能，可以通过如下方法： - **引入第三方库**：利用 `opus-decoder.js` 来在线解码 Opus 流至 PCM 格式。 - **创建脚本标签动态加载依赖项** ```html <script src="https://cdn.jsdelivr.net/npm/opusDecoder@latest/dist/opusdecoder.min.js"></script> ``` - **编写 JavaScript 函数完成解码与播放逻辑** ```javascript async function playOpusStream(opusDataUrl) { const response = await fetch(opusDataUrl); const arrayBuffer = await response.arrayBuffer(); let decoder = new opusDecoder.OpusDecoder({ channels: 2, sampleRate: 48000 }); // 创建AudioContext实例 var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); var source; try { let pcmData = decoder.decode(arrayBuffer); // 创建缓冲区并将PCM数据放入其中 var buffer = audioCtx.createBuffer(2, pcmData.length / 2, 48000); for (var channel = 0; channel < 2; ++channel) { var dataChannel = buffer.getChannelData(channel); for (var i = 0; i < pcmData.length / 2; ++i) { dataChannel[i] = pcmData[(i * 2) + channel]; } } source = audioCtx.createBufferSource(); source.buffer = buffer; // 将source连接到destination节点上以发出声音 source.connect(audioCtx.destination); source.start(); } catch(error){ console.error('Error during decoding or playback:', error); } finally { if(decoder && typeof decoder.free === 'function'){ decoder.free(); // 清理资源 } } } ``` 此函数接收一个指向 Opus 音频文件 URL 的参数，并执行以下操作： - 获取远程 Opus 数据； - 利用 `opusDecoder.js` 库对其进行解码得到原始 PCM 数据； - 构建 Web Audio API 所需的声音上下文对象及其关联组件； - 设置好音轨信息后启动回放过程。 上述方案适用于大多数场景下的 Opus 音频流播放需求，但仍建议开发者根据实际项目情况调整优化代码结构及性能表现。