audio distorted, choppy, slow on Chrome in recent p5.sound versions

[hibouambigu]

Issue p5.sound playback has audible distorted artefacts, slow speed, wonky behaviour on Chrome in recent versions of p5.sound. Older versions work fine (p5.sound v0.3.7 tested ok)

Affected

• Personal sketches and p5js.org examples using recent versions of p5.sound, eg: https://p5js.org/reference/#/p5.SoundFile [linked example does not work]

What fixes it

• Firefox or
• Switching to a pretty old version of: p5.sound (v0.3.7), p5 (v0.6.0) tested, not sure about others.

What has been tried

• Tested that desktop audio, Spotify web player, YouTube, etc (in Chrome) all work as expected.
• Have tried all sorts of things on the desktop audio interface settings to see if that's at fault
• other audio formats, bitrates loaded into p5 sketch
• web audio demos at https://webaudiodemos.appspot.com/ work fine

Versions where issues observed p5.sound: v0.3.12 p5: v1.0.0 Chrome: 83 OS: Ubuntu 20.04 (also observed on 19.04, 19.10, not sure about 18.04, haven't tested) Audio interface: onboard generic HD audio

[jtpio]

Also experiencing distorted artefacts on a similar setup (Ubuntu 20.04 with Chromium 83), as well as with a recent Chromium developer build (85.0.4153.0).

[endurance21]

it is also malfunctioning in my android chrome !

[therewasaguy]

I'm curious if this has to do with AudioWorklet. Do these examples work on the devices you've tested with @jtpio @hibouambigu @endurance21 https://googlechromelabs.github.io/web-audio-samples/audio-worklet/basic/one-pole-filter/

It might also be memory/performance issues, especially if issues are present on an Android mobile device, too.

[hibouambigu]

Sure thing, @therewasaguy - tested with that link, the issue persists.

I clean booted into Ubuntu 20.04, and then opened Chrome with only that page.

Is there some other place you think it could be performance oriented in nature? System is a Ryzen desktop, 32GB of memory.

In an Arch-based OS on the same machine, the issues are not present there. It's a pretty different kernel version, but I don't know how useful of a comparison that is to make since there are also other things different about the systems.

[therewasaguy]

thank you so much @hibouambigu! This is really helpful. And assuming it says "Audio Worklet Ready" in green in the top right when you visit the page? https://googlechromelabs.github.io/web-audio-samples/audio-worklet/basic/one-pole-filter/

That website does not have any p5.sound specific stuff happening and isn't using much memory either, so that leads me to believe that the issue has to do with the implementation of the Web Audio Worklet for Ubuntu 20.04 with Chrome/Chromium 83. Not sure exactly what could be different, but I'm sure it would be appreciated if you could file a bug with the Chromium project: https://www.chromium.org/for-testers/bug-reporting-guidelines

[hibouambigu]

@therewasaguy Yes, that's right. I can hear what it's supposed to sound like, as well.

The way it is messed up sounding is exactly like the sketches I initially tested with of my own, and also the p5 website ones.

Good to know that helped narrow it down! Makes sense, if there's no p5 on that website it must be elsewhere with the browser.

Should I close this issue now, or is there some benefit to having it open if a Chromium bug is ongoing?

[atagger]

Is there any fix for this? Have this same problem + tons of the ringbuffer.push() undefined errors which are ruining my project.

4671c3e94-9218-40df-8fc9-63a2f3636dbb:75 Uncaught TypeError: Cannot read property 'length' of undefined at RingBuffer.push (671c3e94-9218-40df-8fc9-63a2f3636dbb:75) at AudioWorkletProcessor.process (671c3e94-9218-40df-8fc9-63a2f3636dbb:170)

running: Version 85.0.4183.102 (Official Build) (64-bit) also happens on my phone: chrome 85.0.4183.81 this happens to a much lesser extent on the iPhone.

On Android + PC there are major sound artifacts. Mostly sounds like clicking / popping. Same thing happens on the example here: https://googlechromelabs.github.io/web-audio-samples/audio-worklet/basic/one-pole-filter/

but NOT on the web audio link. https://webaudiodemos.appspot.com/

[hibouambigu]

@atagger I can confirm, I have the RingBuffer.push errors persisting as well, even in non-Ubuntu Linux (where the artefacts and glitching do not appear to exist).

[atagger]

Really frustrating. I'm working on a virtual project for an artist since galleries are shuttered and the sound design is one of the components for her project. At first I thought I was playing too many tracks at once, or that the file format or size was a factor but debugged everything and still have the sound with artifacts, even just playing one song. Seems to work the best on the iPhone 6s. It seems like a lot of people are pushing similar issues with the ringbuffer.push errors as well. I thought of using webaudio, but the syntax is really weird and it might not integrate well.

[hibouambigu]

Not sure if it works for you, but older versions of p5 do not have this issue as far as I know (check my OP for specific version number I observed this on).

For me it's a no go as there are many features in recent version's WebGL updates I'm depending on with p5 at the moment.

Worth a look though! Maybe you can use that for now.

On Tue., Sep. 15, 2020, 19:45 Andreas Tagger, [email protected] wrote:

Really frustrating. I'm working on a virtual project for an artist since galleries are shuttered and the sound design is one of the components for her project. At first I thought I was playing too many tracks at once, or that the file format or size was a factor but debugged everything and still have the sound with artifacts, even just playing one song. Seems to work the best on the iPhone 6s. It seems like a lot of people are pushing similar issues with the ringbuffer.push errors as well. I thought of using webaudio, but the syntax is really weird and it might not integrate well.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/processing/p5.js-sound/issues/494#issuecomment-693072821, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMHNDMV33GI6HQWWMK7UBQDSF74BTANCNFSM4NGMNXPQ .

[atagger]

That's actually a brilliant idea I didn't fully consider. THANK YOU for this suggestion.

[estafaa]

I have the same problem. In our project, we use small files + oscillators. On mobile chrome (Pixel 3 XL) with a new version of p5 sounds crackles. Even if playing just one oscillator. It crackles from time to time, I got more crackles when I minimize the app or scroll page. Feels like it really struggles to process... I rolled back to the oldest version (I actually was using exactly p5.sound v0.3.7 before and did not have complaints from users that it crackles), and now it is better. almost does not have crackles/distortions

v0.3.7

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.min.js"></script>

[atagger]

Does anyone know if it matters which p5.sound.js you are using in conjuction with the p5 version? The official releases here are often different than the releases included in the p5 packages.

If I download 0.3.0 or 0.3.5 from the official release page here and replace p5.sound.js it greatly reduces the artifacts and all the ring.buffer.push errors disappear. I'm using p5 v1.0.0 w/either 0.3.0, 0.3.5 of the p5.sound.js. Seems to work better for me, but there are more pops artifacts on the iPhone 6s now. The artifacts always sound like a loud crackly / crunchy thing almost like inserting or disconnecting a jack from audio equipment where it is not grounded.

Release 0.3.7 does not work for me on Android, and this was originally part of the .61 P5 release located package here as far as I can tell:

https://github.com/processing/p5.js/releases/tag/0.6.1

[hibouambigu]

Perhaps some progression here.

Maybe someone can confirm?

It was working ok for me in Chrome, despite the buffer errors in the console (consistently). The audio itself sounded ok.

I just switched from Linux ALSA audio drivers to PulseAudio, for unrelated reasons.

The audio issue is back. I suspect this is why it seemed like switching from Ubuntu fixed it. I think there's something going on RE: Linux audio toolkits (maybe something with pulseaudio?) + Chrome.

Firefox works ok. Still on the latest p5 + sound quoted in my OP.

[atagger]

I rolled back to v.0.3.0 of p5.sound. It makes the ringbuffer() errors disappear entirely and removes the glitches for the Android phone + PC running Windows 10. Oddly, some of the audio artifacts now happen on the iPhone 6s in Safari, but I can live with that I think.

[ethanmuller]

I was also experiencing distortion/choppiness in Chrome on Android (Firefox worked fine) using 0.3.12.

Rolling back to 0.3.0 caused my page to stop loading But rolling back to 0.3.5 loaded successfully, and fixed the distortion/choppiness

[brianpeiris]

I was pretty surprised that p5.sound can't do the basic thing of playing an mp3 without crackling and popping on Chrome on Android. The crackle gets worse when you start adding animation or 3D canvases to the mix. Seems like this is a regression that should warrant a rollback of the AudioWorklet implementation, assuming that's the cause, or at least allow developers to disable any advanced AudioWorklet processing if all they want to do is play an mp3.

[atagger]

Any news on an update? I just started a video game project and had to rollback to 3.5 to get things to work like another poster had suggested.

[endurance21]

Hey ! @atagger Soon we are going to have a new release. But I am not sure about the fix , lots of things have been changed and lots of issue got fixed.

Can you please try the latest build files from master branch ? And let us know if the issue still persist

[atagger]

I just downloaded the newest version and tried again, but it does not work reliably, at least in Chrome for me. I'm using Version 88.0.4324.182 (Official Build) (64-bit) of chrome on a PC. There are tons of the ring buffer errors in the console and distorted / choppy sound. On top of it the program takes a performance hit from using the new version and the frame rate slows, while in v3.5 there are none of the console errors, frame rate is perfect and no choppiness. Everything seems to work as expected or better than expected. I'm not using anything other than the basic play, stop, check is playing and set/get vol. No pans, no oscillators, nothing complicated.

I'm also using .wav files. I have not tried mp3, but from the last project I was doing that did have mp3s the problem was also occurring with those files, and on mobile it was even more unpredictable.

I'm fine with using v3.5, but there still seems to be some issue with chrome that needs to get fixed if it's possible. The two things that happen are either a subtle crackling / pop type sound (almost like an audio clipping effect) when the sound stops or the sound will stutter and cuts out on instantiation when it is first played. If there's anything you need from to help you, feel free to reach out. I can try and give you a code snippet or the files and see if you can recreate the problem.

[JackMF]

There is a ticket on chrome regarding the choppy play back of audio on audioworklets ! https://bugs.chromium.org/p/chromium/issues/detail?id=1090441#c65

[micahscopes]

I made a new ticket for AudioWorklet issues I'm experiencing on Chrome/Linux with PulseAudio, including a little audio snippet to illustrate just how severe the issue is: https://bugs.chromium.org/p/chromium/issues/detail?id=1183161&q=audioworklet%20pulseaudio&can=2

[bendavis78]

This was resolved for me (Chrome/Linux/Pulseaudio) by updating Chrome to latest version >=92.0.4485.0 (currently dev version).

[estafaa]

Hi Everyone,

Recently I started getting messages from users with iPhones and iPads that they have cracking sounds. It can be an old iPhone or new, does not matter. Popping sounds come even when generating a simple sine wave. mobile chrome works okay so far. Any desktop browsers are okay as well. turning the screen off or not doing anything on the device while playing sounds seems to reduce poppings.
I am using these old ones:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.min.js"></script>

but also tried new release 1.4.0 - same issue.

can p5.js team fix that?

[brianpeiris]

@estafaa You might be seeing a regression with Safari itself. There are issues with WebAudio in the latest release of Safari as reported here: https://bugs.webkit.org/show_bug.cgi?id=227199. That particular bug is about spatialized audio with the PannerNode API, but I wouldn't be surprised if other parts of the WebAudio API are broken in a similar way. It might be worth filing a separate bug on the webkit tracker for the specific issue you're running into.

[estafaa]

thank you @brianpeiris for your message. interesting, as this issue with iOS started recently.

I forgot to mention that on mobile apple devices this issue is on Chrome, Firefox browsers as well. If I understand correctly, all browsers on iOS use the WebKit engine, as iOS only support that (https://en.wikipedia.org/wiki/Comparison_of_browser_engines) or there are some browsers for iOS that use something else than WebKit? but macOS also has safari on WebKit and P5.js works okay for our tasks, maybe because usually laptops has more CPU.

[sneyrenroeb]

hi, is there any solution in sight? latest version 1.4.1 is also still crackling on iphone and android chrome firefox and brave....