基于vue+websocket实现web端的实时pcm音频播放

pcm-player是一个JavaScript库，用于在浏览器中播放PCM音频文件。PCM是一种数字音频编码格式，它将模拟音频信号转换为数字信号。在Vue中使用PCMPlayer可以让你在Web应用中轻松处理音频播放。

安装pcm-player

npm install pcm-player

在Vue组件中引入PCMPlayer

在你的Vue组件中，你需要引入PCMPlayer库。你可以在组件的<script>标签中添加如下代码：

import PCMPlayer from 'pcm-player'

创建PCMPlayer实例

在Vue组件的data中创建一个PCMPlayer实例，并初始化相关配置。例如：




// 创建实例




this.player = new PCMPlayer({ 



    encoding: '16bitInt', // 采样位数




    channels: 1,  // 通道




    sampleRate: 44100,  // 采样率




    flushingTime: 2000,  // pcm刷新间隔




    onstatechange: (node, event, type) => {},  // 播放状态变化事件




    onended: (node, event) => {},  // 播放结束事件




});

加载PCM音频数据

vue中websocket的使用网上有很多的教程,就不赘述,直接上代码了

通过获取PCM格式的音频数据，然后使用PCMPlayer的feed方法加载音频数据





var url = 'ws://xxx'





this.socket = new WebSocket(url)



 




this.socket.addEventListener('open', () => {



    var json = {status: start}



    this.socket.send(JSON.stringify(json))



})




this.socket.addEventListener('message', (data) => {



    var audioData = new Uint8Array(data.audio)



    this.player.feed(audioData) // 将PCM音频数据写入pcm-player




})

播放音频

this.player.continue()

暂停音频

this.player.pause()

通过以上步骤，你就可以在Vue中使用PCMPlayer来处理和播放PCM格式的音频数据。希望这个简单的教程能够帮助你成功集成PCMPlayer到你的Vue应用中。

pcmplayer参考:GitHub - samirkumardas/pcm-player: A minimalist javascript audio player for PCM streaming audio

秒客网