samirkumardas / pcm-player Goto Github PK
View Code? Open in Web Editor NEWA minimalist javascript audio player for PCM streaming audio
License: Other
A minimalist javascript audio player for PCM streaming audio
License: Other
Hi, I'm having some trouble passing my PCM arrays into the feed() method. I've initialized the player like so:
let player = new PCMPlayer({
encoding: "32bitFloat",
channels: 2,
sampleRate: 48000,
flushingTime: 10,
});
The opus decoding library that I'm using(opus stream decoder) decodes my stereo encoded bytes to left and a right PCM arrays. The feed() method only looks like it accepts one array. I did try to manually merge the left and right arrays together before passing the result into feed() but this action adds a huge amount of delay. Is this the only possible way I can go about using your pcm-player with left and right pcm arrays? Thanks
Hi @samirkumardas .
I'm trying to play audio with real-time created pcm data.
It comes slice by slice through websocket and use feed method on every websocket.onmessage.
It works cool , but sometimes or after long time sound is streched(delayed?).
I don't know the mechanism of this, but I assumed that pcm data is stacked in a queue while previous pcm data is processed(decoded or played).
but, i want to play the latest pcm data even if previous pcm is played to sync as real-time.
any idea to treat this ? like stop current played audio and play the latest every time when buffer is filled with the latest pcm
encoding: '16bitInt',
channels: 1,
sampleRate: 8000,
flushingTime: 1000
onended It is not accurate to judge the end of long audio playback,I solved the problem by counting bytes in onended. Is there an easier way?The audio starts playing and I can't think of a way to listen
I have clicking during playing tone signal.
It fixed if I comment next part:
/* fadein */
if (i < 50) {
audioData[i] = (audioData[i] * i) / 50;
}
/* fadeout*/
if (i >= (length - 51)) {
audioData[i] = (audioData[i] * decrement--) / 50;
}
Why did you append this part?
I have ported the libopus using emscripten and decoding opus to pcm.
Now I am sending this decoded pcm data to this pcm-player but it just playing noise and not the actual audio.
From libopus I am getting Uint8Array and I am converting the data to Float32Array before calling feed
method of pcm-player but it not playing.
Following code call back I have used to convert the data received from libopus to java script.
function convertBlock(incomingData) { // incoming data is a UInt8Array
var i, l = incomingData.length;
var outputData = new Float32Array(incomingData.length);
for (i = 0; i < l; i++) {
outputData[i] = (incomingData[i] - 128) / 128.0;
}
return outputData;
}
function frame_opusCallback(a,b)
{
//console.log("Getting callback from liobopus"+b);
var incomingData= new Uint8Array(Module.HEAP8.buffer, a, b);
var sampledata = convertBlock(incomingData);
pcmPlayer.feed(sampledata.data);
}
Please let me know what is going wrong in this implementation.
The player is used for network transport, and network transport is generally without sign bits ,
In this programall used inttype,not unit.I don't really understand why it was designed that way
。This has caused trouble for me, who is not specialized in web development, when using the player. How can I modify it if I want it to support uint8Array?
Hello, i want to dead with AudioContext 'ended' event within your player. Can i somehow reach it without modifying your code?
p.s And thank you for your great solution with my synchronization struggling 😄 👍
Hello, I really like your player. I am trying to create VOIP in JS using Web Audio Worklet and socket.io. I managed to make it work smoothly in one-to-many (input-outputs) scenario but when there are multiple PCM streams broadcasted simultaneously into one pcm-player feed then it slowly becomes broken. After a while there is like 1 minute delay and audio is disorted. I send them in default size (Float32Array 128) from worklet to socket and then broadcast it to all connected pcm-player feeds. (Approximately 125 messages per second for each stream)
How would you play multiple raw PCM microphone streams in your pcm-player? Should they be merged together? If so then how? Or you can just feed them into the player all at the same time?
Thanks a lot for help!
when i run code on ie11, i got the message
SCRIPT445: 对象不支持此操作 pcm-player.js (44,5)
can u help me to solve this problem?
I'd like to display VU meter as Audio gain value.
The raw file HZ is 44100,I set
var player = new PCMPlayer({
encoding: '16bitInt',
channels: 2,
sampleRate: 44100,
flushingTime: 2000
but the sound discontinuity,please help.I think analyze data'time is small current video.
start vs current 2.010666666666667 vs 2.010666666666667 duration: 0.54421768707483 pcm-player.min.js:1 start vs current 4 vs 4 duration: 0.7256235827664399 pcm-player.min.js:1 start vs current 6 vs 6 duration: 0.7256235827664399 pcm-player.min.js:1 start vs current 8 vs 8 duration: 0.7256235827664399 pcm-player.min.js:1 start vs current 10 vs 10 duration: 0.7256235827664399 pcm-player.min.js:1 start vs current 12 vs 12 duration: 0.7256235827664399 pcm-player.min.js:1 start vs current 14 vs 14 duration: 0.7256235827664399
When the Safari application is minimized and running in the background, the audio will pause and buffer up until the user reopens the app. I don't think this is expected behaviour, but maybe I am underestimating Apple's walled garden.
Our team got an lss with the sample sound. Whats the song title? lol TY
Hi first of all, thanks for your great repos! Jmuxer has been huge for me. I have an application that can receive audio packets in 8 different sample rates/channel counts, I currently handle this with 8 different ffplay instances that I pass those packets to. If I were to switch to this package would it be possible dynamically change the sample rate? I am guessing not, if not would you forsee any issues with running 8 instances of pcm-player?
Thanks Again!
Hi I can't manage to make your example work on safari 13.1? Do you have any idea why? The console doesn't show any error messages.
Edit: I manage to get Safari play some sound only when the sample rate is set above 25000.
Hi, you're library helped me out getting audio to work on my websocket desktopstreamer.
I made some alterations you might consider implementing.
See my own version here:
https://github.com/Kjos/OculusGoStreamer/blob/master/website/pcm-player.js
Since I use websockets I parse the msg.data as Int8Array immediately, leaving out the conversion afterwards. Also I use a BufferSource as actual buffer, no tmp array. This saves another iterated copy.
I removed the interval method and act only on feed() call.
It runs almost fine on mobile, although I get some noise which I'm not sure comes from my audio output or not.
Last thing, I think there might be something to gain from slowing the plackbackRate slightly, my reasoning being there might be less seams, but thats just a theory.
Hi guys.
I'm trying to play PCM audio received via Web sockets.
Everything is cool except playing is occurring after a 1-second delay. Every time I speak at the server microphone, a 1-second delay occurs before the PCMPlayer plays it.
I tried to investigate the source code but didn't find a solution.
Also, I am convinced that the server side sends sound data accurately.
Could you help me to find a workaround?
Let me show you the code of my player class:
initPlayer() {
this.player = new PCMPlayer({
encoding: '16bitInt',
channels: 1,
sampleRate: 8000,
flushingTime: 100 // 1, 400, 1000 tested, no effect
});
}
play(data) { // data retrieved from WebSockets
const dataArray = new Uint8Array(data);
if (this.player) {
this.player.feed(dataArray);
}
}
the lib can not play in safari.
sampleRate 44100
live stream by webscocket
Hey, your player is very cool. I connected it to an audio source, sampling data at 20Khz on an ESP32. The problem is that I get these glitches in the sound as the player is a little ahead of the true audio source. I have verified this by popping up an alert in the browser at startup, thus making it possible to collect some data. The sound is then perfect for a while. Not that you can run this, but I have attached my script designed for the ESP32.
pcmplayer.txt
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.