pkjy/pcm-player

PCM real-time player . play pcm data/stream in browser through ajax/websocket or others. 网页播放PCM数据。

PCMPlayer

A minimalist javascript audio player for PCM streaming data for the browsers.
浏览器端简单的PCM数据流播放器

How to use?（使用说明）

var player = new PCMPlayer(options);

Available options are:
可配置项如下:

Name	Parameter	Default	Type	Remark
inputCodec	Int8 / Int16 / Int32 / Float32	Int16	string	编码格式
channels		1	number	声道数
sampleRate		8000	number	采样率
flushTime		1000	number	flushing interval of PCM data to be played in milisecond（PCM数据缓冲多久进行播放）

Complete example（使用示例）:

Install（安装）

install by CDN or npm

CDN

<script src="https://unpkg.com/pcm-player"></script>

ES6

npm i pcm-player

// in your js/ts file
import PCMPlayer from 'pcm-player'

use（使用）

var player = new PCMPlayer({
    inputCodec: 'Int16',
    channels: 2,
    sampleRate: 8000,
    flushTime: 2000
});

// Now feed PCM data into player getting from websocket or ajax whatever the transport you are using.Accept ArrayBuffer or TypedArray
// 接收PCM格式的原始数据，ArrayBuffer 类型或者 TypedArray 类型
player.feed(pcm_data);

Available Methods（方法）

Name	Parameter	Remark
feed	raw PCM data	Usually get from ajax or websocket
volume	decimal value 0 to +∞ ()	For controlling volume of the player, default is 1
destroy	-	Destroy the player instance and release the resources
pause	-	pause playing
continue	-	resume playing

Available Attributes（属性）

Name	Remark
audioCtx	current AudioContext

Available Event（事件）

Name	Parameter	Remark
onstatechange	(node, event, type)	node: AudioContext, event: Event, type: AudioContextState
onended	(node, event)	node: AudioBufferSourceNode, event: Event

How to run example?（体验example里的文件）

An example with simple node server script is available that include some raw pcm data that will be served by websocket and at the client end, it will be played through PCM player.

1. open server directory （进入到server目录）

   cd example/server

2. run a local server （把本地的服务端跑起来，会起一个websocket服务，用来发送数据）

   node server.js

3. then, just open example/index.html page.（直接双击example里面的index.html）

Thoubleshooting（常见问题）

Safari only allow to play large than 22050Hz voice.
Safari浏览器播放的音频数据，采样率不能低于22050Hz。

更多webaudio经验可以在此查看：websocket pcm webaudio 经验

online demo（在线demo)

pcm-player demo

Thanks to（鸣谢）

Inspired by pcm-player

pcm-player's Issues

调用destroy方法会报错

bindAudioContextEvent() {
    ...
        self.audioCtx && self.option.onstatechange(this, event, self.audioCtx.state)  // 感觉这里可以加一个判断，不然destroy方法中close的回调触发时self.audioCtx已经被设置为null了
    ...
}

播放不连续呢？

tts返回的数据是以整句的模式返回的，在一整段中，会先后返回多个句子的PCM。我按照返回的顺序，将每一句PCM通过player.feed()进行播放。但是句与句之间播放不连续，时间间隔较长。这个怎么解决呢？

您好，请问能处理音频降噪吗

safari for ios没有声音.

safari for ios没有声音,有没有人遇到过.

建议添加analyser用于波形显式

作者的PCMPlayer非常易用，不过在有波形显式需求时无法connect到内部的bufferSource，建议可以内置一个analyser

initAudioContext() {
        // 初始化音频上下文的东西
        this.audioCtx = new (window.AudioContext || window.webkitAudioContext)()
        // 控制音量的 GainNode
        // https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createGain
        this.gainNode = this.audioCtx.createGain()
        this.gainNode.gain.value = 0.1
        this.gainNode.connect(this.audioCtx.destination)
        this.startTime = this.audioCtx.currentTime
        this.analyser = this.audioCtx.createAnalyser() // 初始化添加一个analyser
        this.analyser.fftSize = 2048;
    }

flush() {
        if (!this.samples.length) return
        const self = this
        var bufferSource = this.audioCtx.createBufferSource()
        if (typeof this.option.onended === 'function') {
            bufferSource.onended = function (event) {
                self.option.onended(this, event)
            }
        }
        const length = this.samples.length / this.option.channels
        const audioBuffer = this.audioCtx.createBuffer(this.option.channels, length, this.option.sampleRate)

        for (let channel = 0; channel < this.option.channels; channel++) {
            const audioData = audioBuffer.getChannelData(channel)
            let offset = channel
            let decrement = 50
            for (let 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.connect(this.analyser) // bufferSource连接到analyser
        bufferSource.start(this.startTime)
        this.startTime += audioBuffer.duration
        this.samples = new Float32Array()
    }

感谢！

串流傳遞 PCM 會有延遲

Hi,
我有一個需求是將裝置錄到的 PCM 串流傳給 Web，我使用這個 lib 發現持續傳遞一段時間後，播放會有很大的延遲，想請問如果我的 PCM 即時且持續的傳遞下，pcm-player 是否有針對這個進行優化呢？

why the player is distorting the audio?

I recorded some audio from retroarch but every audio I play using this lib, the audio gets distorted.
The speed of audio is OK, and yet is a recognizable audio, but the sound gets distorted.
I have run the commands below (you may test in your own env just replacing the retroarch command by any software that emits sound):

# create audio sink to redirect emulator sound
pactl load-module module-null-sink sink_name=RetroArch format=u8 channels=1 rate=44100 sink_properties=device.description="RetroArch_Virtual_Sink"

# run emulator redirecting sound to the new sink
PULSE_SINK=RetroArch retroarch -L /home/unknown/snap/retroarch/957/.config/retroarch/cores/stella_libretro.so /home/unknown/Downloads/Atari\ 2600/Frogger.bin

# start recording the audio from the sink
parec -d RetroArch.monitor --raw --channels=1 --rate=44100 --format=u8 --latency-msec=100 -v > /tmp/output.raw

# after you captured the sound, you can play it using the command
cat /tmp/output.raw | pacat --raw --channels=1 --rate=44100 --format=u8

The sound is played very well when using pacat, but when I try to load it in the browser using the lib, the audio gets distorted.
Also I tried other formats like s16le, s16be, float32le, float32se, etc... And configured the lib to inputCodec as Int16, Int32, Float32 and the audio yet gets distorted.

Is this a bug or it just needs tweaking the configs?

可以添加一个从头播放的方法吗？

现在pcm数据全部播放一遍之后，就不能从头播放了，组件内部能否保存接收到的pcm数据，以便支持从头播放，就像 html 的 audio 标签那样

同时添加一个player.replay()的方法

Add download method for PCMPlayer class

Would it be possible to add a .download() method on PCMPlayer? Since it's raw PCM data, I'd like to download a .wav or .pcm file that is ready to be read with VLC or another media player directly. I thought since you already added the corresponding Header for the web version to work, can you implement the .download() method or guide me a little so i can do it myself (I don't have knowledge on audio data i might do wrong things). Thanks

请问后端传过来的ArrayBufer是什么样子的，作者介意给截图一下吗

目前对接的是java后端，直接ws传过来的是bytes数组，我在前端用Uint8Array转化了一下，不知道是否可行？看作者方便提供一下联系方式，加下wx或者qq交流一下吗~感谢

A new feature - a callback function that is fired when audio is played out

Hi,

May I propose a new feature to your project? The feature is to add a new property (onended) to the options. The property is optional and can be assinged to a callback function that is fired when audio is played out. I could make a pull request if you don't mind.

Best regards

Not working on ios safari

Hi,
If i try to play the example into a ios 15 iphone, it does not work. How can i fix it?

br

Call flush on destroy to make sure the buffer is played out

Hi,
I think it would make sense to play flush inside destroy to ensure the buffer is played out. There is no reliable other way to flush the buffer before calling destroy

typescript类型定义问题

后面两个参数的类型定义写错了吧？eslint会报错，应该改为这样？

onstatechange: (node: AudioContext, event: Event, type: AudioContextState) => void
onended: (node: AudioBufferSourceNode, event: Event) => void

另外这两个参数可以改为可选吗？

音频效果对比

您好，我使用s16le + 48khz，感觉您的js效果有很大的底噪，对比了一下这个效果很不错，没有细看哪里不同。
https://github.com/samirkumardas/pcm-player

32768写成了327168

pcm-player/src/pcm-player.js

Line 28 in 7a5ebd3

'Int16': 327168,

无法播放ffmpeg编码s16be格式的pcm音频，s16le可以小端序字节可以

如题，后续会添加支持吗