8 ms·
Show HN: Wavvy – web-based audio editor (Audacity port)
I originally developed a WASM port of wxWidgets for https://dj.app/ https://dj.app/. When it came time to open source wxWidgets-wasm, I decided to port another complex app as a test case, and Audacity seemed like the obvious choice. In the process, I also needed to write a new host API for PortAudio for playback and recording in the browser.
https://github.com/ahilss/wxWidgets-wasm https://github.com/ahilss/wxWidgets-wasm
https://github.com/ahilss/portaudio-wasm https://github.com/ahilss/portaudio-wasm
https://github.com/ahilss/wavvy https://github.com/ahilss/wavvy
- nmstoker 4y agoIt's really impressive. Playback seems not to work in Firefox Nightly on Android but Chrome on Android works great.
- nu11ptr 4y agoNice! Is it possible to merge this WASM port back into the wxWidgets main project? It just seems like a valuable target addition and could breathe some life back into wxWidgets.
- paskozdilar 4y agoThis is so awesome :)
- tambourine_man 4y agoThis is amazing. I’m sure many HN would appreciate an in depth exploration of the porting process.
- tgv 4y agoWow. How much work was the porting of audicity? It seems there's no commit history for wavvy.
- ilitirit 4y ago> Audacity seemed like the obvious choice Tangential question, but why did Audacity seem like the obvious choice? Not a knock on the product - I use it often - but I'm just curious about why it was chosen.
- samwillis 4y agoAudacity is one of the largest (if not the largest?) still active projects using wxWidgets, it seems like fairly obvious if you are somewhat aware of that.
- tambourine_man 4y agoWhy did wxWidgets fell out of favor?
- samwillis 4y agoI don't think it did, the world just moved to mobile and web based apps, then backward towards the desktop with Electron. I would say wxWidget and QT are probably still the most used cross platform desktop GUI toolkits.
- ekianjo 4y agoNot used much anywhere.
- klodolph 4y agoI think there were some problems with wxWidgets and generally people moved to Qt, if they were still making cross-platform desktop apps, and if they haven’t migrated to Electron.
- ahilss 4y agoIt's probably the most visible project using the wxWidgets framework and in the audio domain which fits well with my experience building the DJ app.
- paulgb 4y agoCool! The UI even works on iPhone (alas, playback doesn’t work, so my dreams of multitrack audio editing with just my thumbs are dashed /s) I’m curious what porting wxwidgets involved — are you rendering them with the 2D canvas API, WebGL, or is all the rendering done by WxWidgets and you just have to send a framebuffer into a canvas?
- samwillis 4y agoNot the OP, but taking a look at the DOM, it's rendering each "window" as a canvas. So you have a main window canvas, then canvases for popup menus, message boxes etc. All canvases are using a 2d context, and there are many offscreen canvases created for each interaction for each widget which I assume are then composited to the window canvases. It's an amazing project! If the OP is here, do you have any plans for accessibility to screen readers? I suppose it's a similar problem to that with Flutter. I also wander if there is a possibility to combine your wxWidget port with the work going into WASM Python... Edit: Taking a closer looks at how the wxWidget port works, wxWidgets has multiple backends using native widgets on each platform. They also have wxUniversal which draws each widget itself to a frame buffer, this port uses that as a base to draw the ui to html canvases.
- tobsterius 4y agoDoesn't the iOS version of GarageBand allow for multi-track editing?
- ahilss 4y agoIt is rendering using the 2D canvas API. There's a device context class (wxDC) for each wxWidgets port that implements primitive drawing ops (DrawLine, DrawText, etc). For the WASM port, I created a glue library in javascript [1] that wxDC calls into for each primitive. [1] https://github.com/ahilss/wxWidgets-wasm/blob/master/build/wasm/wx.js https://github.com/ahilss/wxWidgets-wasm/blob/master/build/w...
- ycuser2 4y agoWow! It feels like the native app.
- bluelightning2k 4y agoThis seems like a really impressive technical work. Well done! I'd be interested in a write up of the process
- stjohnswarts 4y agoMe too. Maybe just a blog post with the big details and some lessons learned. I tried a Qt app once to wasm. and it was just painfully slow and so buggy when I got done (mostly just unexplained crashes). I'm no pro though, it was just a weekend project.
- thement_ 4y agoVery well done! Thanks!
- fareesh 4y agoI recently needed a crop component that allowed my users to record something and trim it to their desired size. I ended up using wavesurfer.js with the regions plugin. It seems like there are very few components that meet this type of requirement.
- ycombinete 4y agoIs there a way to record the output audio? Audacity on windows has the WASAPI option, which my wife has to use a lot.
- mkl 4y agoIs File > Export not suitable? And if WASAPI can be used with your browser, won't it work for this? I don't really understand the use case though.
- ycombinete 4y agoI mean record system output audio. E.g. audio streamed to speakers. Desktop Audacity can capture this audio directly on Windows. The specific use case is extracting the audio from long videos, to upload to a transcription service. It’s an edge case for sure. Since the video is hosted weirdly and no video downloaders I’ve tried can get the video downloaded with the audio. So we simply stream the video normally in the browser, and capture the audio output directly into Audacity.
- mkl 4y agoOh, I see, WASAPI as Audacity's input not output. Setting up a virtual microphone with something like VoiceMeeter might do it, since the browser would just see it as a microphone.
- ycombinete 4y agoOh, that looks promising! Thank you.
- chaosprint 4y agoimpressive. everything looks very smooth. did you manually manage the sharedarraybuffer?
- elevaet 4y agoBravo! This is fantastic! I was excited to see Dr. Jeep's Hardcore mix of Dissociate in the default library for dj.app - that's been my jam lately, really niche track to come across in the wild :)
- jbverschoor 4y agoI feel so productive with this 90s type UI, and crisp mouse pointer
- alkonaut 4y agoWhat other options exist for "complex native-ish browser interfaces" in this style? E.g. if you wanted to develop a new app which is a traditional desktop GUI app with tons of menus and buttons that need to be custom rendered (so wasm/canvases presumably, rather than html), what options exist aside from this effort with wxWidgets? For example, say you wanted to make a 3D editor/CAD program or full-featured DAW from scratch - what would you use?
- chaosprint 4y agoI will use rust egui
- squarefoot 4y agoNot a popular language/RAD these days, but I wouldn't rule out Lazarus/FPC. https://github.com/zamtmn/zcad https://github.com/zamtmn/zcad https://wiki.freepascal.org/Projects_using_Free_Pascal https://wiki.freepascal.org/Projects_using_Free_Pascal
- badsectoracula 4y agoNote that Lazarus isn't (yet) able to do web-based GUIs. Free Pascal only just added wasm support (not in a release yet, but it is part of the main branch), so all is needed (which TBH is kind of a big "all" :-P) is someone to make an LCL backend for it, so it might happen at some point.
- kethinov 4y agoNow we just need to wrap this in Electron so we can run it on desktop! ;)
- hrdwdmrbl 4y agoA cheap way to do it is to use Nativefier. It's not perfect but it's like a 80% solution.
- xd1936 4y agoI think this was tongue-in-cheek. Nobody would actually want to take a native C/C++ Audacity, port it to WASM, and then wrap it in Electron to make it a "desktop app" again.
- sitkack 4y agoIt would give you safety properties that native Audacity doesn't have. It would also make distribution much easier.
- lelanthran 4y ago> It would give you safety properties that native Audacity doesn't have. It would also make distribution much easier. Has Audacity ever had safety issues in the past? Because it sounds like you'll be going to a lot of effort to prevent a problem that had never surfaced in over a decade of use.
- antoineMoPa 4y agoThis is awesome, and also awesome is this: > I originally developed a WASM port of wxWidgets I had some fun looking at the commits here[1] and I can imagine a lot of classic wxWidgets apps are going to be ported to wasm now. Congrats, that a lot of dedication! [1] https://github.com/wxWidgets/wxWidgets/compare/master...ahilss:wxWidgets-wasm:master https://github.com/wxWidgets/wxWidgets/compare/master...ahil...
- ClawsOnPaws 4y agoI feel like I should preemptively apologize and I'm really not trying to knock the project in any way, and the achievement is pretty epic, but those who have seen my username on this site before know what's coming, especially in regards to people seriously considering using WX Widgets on the web... This app is inaccessible. Audacity on its own is already a bit difficult to use with a screen reader, but sadly, this port, unsurprisingly, is even worse. I've managed to at least explore some of the UI using OCR, but it was very cumbersome and I could never get it to do what I wanted. Just uttering my careful warning that you should please, please, please think 3, 4, 5 times before deciding to actually use this UI library for serious projects. The benefits of using what the browser already gives you is that, if you're not going too crazy, accessibility comes for free and there's very little you need to do to make sure that we can still use your app. Again, I understand that this is a port of Audacity, and I believe that what we can do in browsers is pretty amazing and my aim is not to discourage anyone from trying out new things. I'm just saying that this app is 100% screen reader inaccessible so please make sure you have a valid reason for keeping out users with disabilities (hint, you almost never do) by using WX widgets drawn directly to a canvas. And if you do, please think hard about what you can do to still keep your app accessible. I'm sure there are ways to add accessibility to a web port of WX, but if you can, sticking with the things the browsers give you is usually the better idea.
- tssva 4y agoUnless you have a legal requirement to provide accessibility, I encourage everyone to ignore this advice. It is basically letting perfect be the enemy of good. Especially if your project is opensource. Someone that cares, which may even be you at a later date when other things on the to-do list are done, can submit patches to address accessibility later.
- realyashnag 4y agoThank you for this. I've been looking for something like this for quick audio editing.
- chaosprint 4y agoVery impressive work! I tried to play some loops and add some effects. They all went well. Did you manually handle the audio or is it wrapped in the portaudio-wasm? One thing I can learn from your work is to how the canvas is rendered. For my project Glicol (https://glicol.org https://glicol.org) I use the Web Audio Analyser Node for visualisation but I am considering to use SAB to send even non-audio channels and render the canvas in real-time. It would be great to explore the process if you can write more on your GH repo.
- squarefoot 4y agoI'm generally against web apps, but have to admit this one is really cool; it also loads surprisingly fast. So far the only difference with the original seems the waveform display which uses a smaller resolution, probably not to slow down too much the UI.
- qolop 4y agoAre there terminal based keyboard first audio/video editors? Sort of like vim but for multimedia.
- radarsat1 4y agoprobably not what you're looking for but you might enjoy reading about Snd if you're not familiar [0]. side note, such a fun list of abandoned projects here [1] and here [2] to browse through.. many sadly broken links but i remember checking some of them out back in the day. there was so much activity in the open source audio sphere back in the early 2000s. [0]: https://ccrma.stanford.edu/software/snd/snd/snd.html https://ccrma.stanford.edu/software/snd/snd/snd.html [1]: http://www.linux-sound.org/one-page.html http://www.linux-sound.org/one-page.html [2]: https://wiki.linuxaudio.org/apps/daw_apps https://wiki.linuxaudio.org/apps/daw_apps
- flanbiscuit 4y agoThis is awesome! Bookmarking this for sure! I really dig your dj.app, it looks a lot like an app I sometime I use called Mixxx[1], which is open source[2]. But I think it's built using QT instead of wxWidgets. Anyways, now that I know there's a similar web-app available I might start trying dj.app out! thanks! 1. https://mixxx.org/ https://mixxx.org/ 2. https://github.com/mixxxdj/mixxx https://github.com/mixxxdj/mixxx
- arendtio 4y agoI like this very much, especially because I love Audacity, but lately Audacity seems to be somewhat buggy as a native app on (Arch) Linux. With some versions I had rendering problems and buttons that didn't work (probably related to the widgets), with other version the whole sound system didn't work.
- smrtinsert 4y agoFeels very similar to the real app. Zooming in with key macros isn't as accurate for some reason. Blown away by wasm. Truly the next frontier.
- aaaaaasss 4y ago
- miduil 4y agoOMG, finally a audacity version that won't crash my Wayland window manager. Unfortunately the recorded audio is really weird. Basically it tunes down the audio once I'm speaking, maybe some weird autogain racecondition between PulseAudio/Pipewire and Firefox?
- bfors 4y agoExcellent work!
- DustinBrett 4y agoAwesome work, I love these kinds of ports! As someone working on a desktop environment in the browser, it's great seeing more apps coming to the browser.
- pippy360 4y agoCan you comment on how difficult this was? and how much time it took? I've thought about doing something similar with some open source games but have just never had the time. The work is fantastic! I hope you enjoyed making it!
- elviejo 4y agoI bow my head to you sir... You have done what I've dreamed of many times. Thank you.
- swyx 4y agoi use Audacity -daily- for my podcast mixtape. its a bit buggy, occasionally crashes, and i have to reboot it everytime i plug in/out a different mic. hoping this solves my problems!
- stevehiehn 4y agovery nice
- futhey 4y agoThis is amazing work. Very well done. Congrats on the launch!
- fuzzy2 4y agoIt leaks HTML elements (div + canvas) for every dialog (or maybe just About?), but I have to say, it is fucking impressive. Good work!
- squeaky-clean 4y agoWow, it loads so quickly for me.
- poisonarena 4y agoits crazy how this works better in my browser than on my macbook air M1
- shaicoleman 4y agoFor me it plays back audio during recording, causing audio feedback screeches
- imposter 4y agowoah dude