pkjy / pcm-player Goto Github PK
View Code? Open in Web Editor NEWPCM real-time player . play pcm data/stream in browser through ajax/websocket or others. 网页播放PCM数据。
Home Page: https://pkjy.github.io/pcm-player/
License: MIT License
PCM real-time player . play pcm data/stream in browser through ajax/websocket or others. 网页播放PCM数据。
Home Page: https://pkjy.github.io/pcm-player/
License: MIT License
作者的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()
}
感谢!
您好,我使用s16le + 48khz,感觉您的js效果有很大的底噪,对比了一下这个效果很不错,没有细看哪里不同。
https://github.com/samirkumardas/pcm-player
Hi,
If i try to play the example into a ios 15 iphone, it does not work. How can i fix it?
br
🙏求助: 有没有可以放大音量的方法,设置参数如下
inputCodec: 'Int16',
channels: 1,
sampleRate: 16000,
flushTime: 800,
播放时一直有底噪,请问下如何调节
Hi,
我有一個需求是將裝置錄到的 PCM 串流傳給 Web,我使用這個 lib 發現持續傳遞一段時間後,播放會有很大的延遲,想請問如果我的 PCM 即時且持續的傳遞下,pcm-player 是否有針對這個進行優化呢?
目前对接的是java后端,直接ws传过来的是bytes数组,我在前端用Uint8Array转化了一下,不知道是否可行?看作者方便提供一下联系方式,加下wx或者qq交流一下吗~感谢
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
safari for ios没有声音,有没有人遇到过.
tts返回的数据是以整句的模式返回的,在一整段中,会先后返回多个句子的PCM。我按照返回的顺序,将每一句PCM通过player.feed()进行播放。但是句与句之间播放不连续,时间间隔较长。这个怎么解决呢?
现在pcm数据全部播放一遍之后,就不能从头播放了,组件内部能否保存接收到的pcm数据,以便支持从头播放,就像 html 的 audio 标签那样
同时添加一个player.replay()
的方法
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
Line 28 in 7a5ebd3
Hello,
A like the onended function, how can we access onstart?
Would love to have this update to the package!
bindAudioContextEvent() {
...
self.audioCtx && self.option.onstatechange(this, event, self.audioCtx.state) // 感觉这里可以加一个判断,不然destroy方法中close的回调触发时self.audioCtx已经被设置为null了
...
}
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?
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
目前使用websocket持续接收后端传回来的音频流,然后调用feed持续进行播放,然后在播放途中会多次触发onended。播放的音频越长,onended触发的次数就越多。在使用中,feed了大概20次,后端ws传输音频中间没有断,在播放中onended大概会触发3、4次。
如题,后续会添加支持吗
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.