Show HN: Wavepot – Digital audio workstation of the web

by stagas • 12 years ago

625 132 12 years ago

JonnieCache4• 12 years ago

This isn't really a DAW. For those unfamiliar, a DAW is a fully-featured music creation environment including sound design, composition, recording, arrangement and mixing in one interface. Examples include logic, cubase and ableton.

While I suppose this does allow for all of those things, as much as any programming language with access to an audio API does, this would be better described as a web-based DSP livecoding environment.

Apart from the naming quibbles, it looks excellent! I wonder what's generating the sound? I'm aware of the oscillator/filter primitives in the HTML5 audio API from the minimoog google doodle, but this seems more elaborate than that.

EDIT: for fun times, load "need more 303," scroll down to the bottom, and change some of the numbers around. Setting the slide() call to 1/1024 yields a nice FM-ish sound. You can even overdrive the filter. Reach for the lasers!

fat0wl6• 12 years ago

which controls are usable? everything i click just gives me an annoying "gimme $$" popup, haven't actually found a function that works

JonnieCache4• 12 years ago

I just loaded some example projects, hit the play button and started changing the code. The output responded immediately.

svantana• 12 years ago

It seems their goal is to make a full-fledged DAW in the browser, but they are not there yet (and far from it from what I can tell). How they would be able to fund all that for $2k is beyond me.

That said, it's a really clever idea to have all the source editable, since js is an interpreted language anyway. One can imagine a future where the community not only shares songs and sounds, but the DSP units themselves. Unlike desktop DAWs, which rely on dylibs (dlls) to supply external synths and effects, a js-based DAW can load, re-compile and hotswap units on the fly.

JonnieCache4• 12 years ago

This kind of thing has existed in desktop/native form for some years. Look up supercollider.

thuuuomas• 12 years ago

Sharing Supercollider snippets was a thing for awhile on twitter. THE FUTURE IS NOW.

yconst• 12 years ago

Seems $2k is just one of their milestones...

"development is split into milestones on which the features are discussed and decided upon in the mailing list with the help of the community.

a funding campaign is then setup for each next milestone which supports development and keeps the project up and alive."

chrisdevereux4• 12 years ago

Realtime audio DSP seems like about the last thing that in-browser JavaScript was designed to do well.

Janky audio is unnacceptable in a way that janky visuals aren't. It totally kills the experience.

Without very strong guarantees about GC latency and thread scheduling that are neither available nor on the horizon for in-browser js, it won't work for anything beyond fun hacks.

squeaky-clean• 12 years ago

a js-based DAW can load, re-compile and hotswap units on the fly.

REAPER does just this. It has its own audio scripting language, JesuSonic (also abbreviated JS, which can get confusing), which is interpreted. It's not incredibly popular, but people do share code and modules for it. There are some who sell VSTs/AUs/etc (dlls), but give away the same plugin in a JS format in order to support Reaper.

nnnnni• 12 years ago

Yeah, it's definitely cool for what it is -- but it is NOT a DAW.

I would call it the audio equivalent of OpenSCAD.

leeoniya2• 12 years ago

just saw this reply, also thought same thing!

http://www.openscad.org/

stagas13• 12 years ago

In my head, a DAW is exactly what it says. A workstation for digital audio. That said, this has the potential to evolve to something more similar to existing professional DAWs and maybe even surpass them.

I'm glad you like it. The sound is generated purely by a JavaScript function returning sample values that are then handled by the Web Audio API and buffered. That's how you hear sound.

On edit: It's really easy to remix tracks that way, even small changes to values yield quite different results. It's fun!

nitrogen• 12 years ago

Have you looked at the work of Bret Victor? Integrating some of his concepts for realtime feedback would be awesome (see http://worrydream.com/#!/LearnableProgramming and http://worrydream.com/#!2/LadderOfAbstraction)

vegedor• 12 years ago

I'm glad you like it. The sound is generated purely by a JavaScript function returning sample values

i feel like this belongs here: https://www.youtube.com/watch?v=tCRPUv8V22o - not in a DAW kinda sense, though

tomphoolery• 12 years ago

I'm aware of the oscillator/filter primitives in the HTML5 audio API from the minimoog google doodle, but this seems more elaborate than that.

An oscillator and a filter modulator are pretty much all you need to create this particular app. There's no reverb, and any delay effects are being "hard-coded" with simple degrading velocities. All synthesizers are built from these ultra-simple components, maybe 2 or 3 more and you have everything you need to build a digital synth purely with web technologies.

sunpazed• 12 years ago

This is awesome!

I'll certainly contribute to this. Will the source be opened up?

Here's a delay filter:

  var delay_array = [];
  var delay_length = 5;
  var delay_feedback = 0.6;
  var delay_volume = 0.4;

  function delay(x) {

    y = 0;
  
    if (delay_array.length < (delay_length * 1000)) {
      delay_array.push(x);  
    } else {
      y = delay_array.shift();
      delay_array.push(x + (y*delay_feedback));  
    }

    return (x) + ( y * delay_volume );
  
  }

Include this in the DSP return code, ie;

  return delay(synth);

Zubedar3• 12 years ago

Yes that's a good delay filter but it's also a good example why this type of user-programmable synth apparatus, which looks similar to CSound, won't catch on. There is much more going on in the typical delay sound itself than just a delayed iteration of a sample. A pure delay is boring. There is the possibility to model all kinds of analog and hardware digital delays with additional coding, but people have been doing that for years and it's no surprise really that commercial companies do it best (and they won't bother unless there's a way to protect proprietary code such as VST).

jrlocke• 12 years ago

Wonderful

be2mi9• 12 years ago

Great

chillingeffect2• 12 years ago

Holy crap! This is great!

chillingeffect2• 12 years ago

Would someone kindly explain why I and two other users (msane and jrlocke) were downvoted for simply expressing delight? Is that somehow unwelcome? I don't see anything against that in the guidelines: http://ycombinator.com/newsguidelines.html

Note, this isn't a complaint, it's merely a request to understand why my comment is inappropriate and to understand how I can express my approval of a submission without losing karma.

evo_93• 12 years ago

Usually, when someone bothers to tell you, it's because the comment 'doesn't contribute to the dialog' or some such reason. Aka, too obvious or perhaps seems pandering for +karma type thing.

Anyway, I didn't downvote you btw, just my 2 cents from what I've read in the past.

cdcarter• 12 years ago

It's not against the guidelines, but it doesn't create conversation. Many people find that fairly useless, and prefer comments with substance that advance the community.

The best way to express your approval of a submission? Upvote it.

Gracana3• 12 years ago

I once thanked someone for submitting something interesting after their article had been up for a few hours and nobody commented. Someone downvoted me and took the time to condescendingly explain why my comment was worthless. I really don't understand that attitude. :|

JonnieCache4• 12 years ago

If you had simply said why you liked it, you probably would have been OK. That at least adds something.

tonetheman• 12 years ago

this is really cool... it is really hard to see how the math ends up making music though. I almost would have an example of a scale or a 4 beat measure. very interesting stuff.

catshirt• 12 years ago

seems like this is really a window for executing javascript, no? where's the DAW?

PabloOsinaga3• 12 years ago

Wavepot team: really awesome stuff! love it.

At Bandhub ( http://bandhub.us ) we are looking for ways to integrate programmed music into our web DAW.

If you guys are up for a collaboration or want to discuss ideas, ping me osi (at) getbandhub (dot) com

castis• 12 years ago

Oh wow, I had this idea a few years ago and put together a handful of crap prototypes. Stoked someone is doing it. Well done, I love it!

evo_93• 12 years ago

Cool site. You need more genre categories however; Synth and/or Electronic would be a good start since you are missing anything along those lines. Probably a EDM category as well otherwise that's what either electronic and/or synth will end up being.

Also, Find Musicians doesn't seem to be working, at least not in Chrome on osx.

PabloOsinaga3• 12 years ago

what do you see? can you send me the console output too?

bbrennan2• 12 years ago

Cool site, can't wait to check it out. Would love to see deeper support for programming and mastering

PabloOsinaga3• 12 years ago

we do have some mixing support in beta - ping me if you want early access osi (at) getbandhub (dot) com

re: programming - we are trying to figure out what's the best model. One thing we are trying to avoid is complex timelines to make it easy for the average recreational musician.

elwell2• 12 years ago

This is really great. Reminds me of: https://github.com/overtone/overtone

robertfw• 12 years ago

using super for the keyboard shortcuts is problematic, at least for me - super-enter for me opens a new terminal, and that appears to take precedence over the browser shortcut

quaunaut• 12 years ago

This is such a great example of a great experience changing behavior. I haven't thought of making music in years, and I've seen other projects kinda similar to this in the past- but this reacts so quickly, so immediate to my inputs, that it's hard to step away from.

You've really got a great product here.

jchrisa• 12 years ago

That was fun. Here is my detuned remix of "on the verge tech mix" https://gist.github.com/jchris/04585454570853297974

lucb1e2• 12 years ago

I like it! It is cool to see not just the demo projects, but people actually making something with it :)

stagas13• 12 years ago

Awesome!

jarmitage2• 12 years ago

For another take on live coding in the browser: http://gibber.mat.ucsb.edu/

Check out http://algorave.com for more info on the live coding music scene, which has really taken off in the last year.

I can't wait for someone to combine live coding with Swift Playground/Bret Victor 'revealing the system' style interfaces.

notthetup4• 12 years ago

"I can't wait for someone to combine live coding with Swift Playground/Bret Victor 'revealing the system' style interfaces."

THIS!

Let's build it!

yaxu2• 12 years ago

There's also http://toplap.org/

msane• 12 years ago

This is dope

lucb1e2• 12 years ago

Making music with code seems pretty neat, perhaps I'll learn to play an instrument after all some day (that being the instrument of code)!

japhyr• 12 years ago

This is great! I teach high school math and science, and students often ask how sound waves can be turned into music. I give them a big-picture overview of sine waves and superposition, but I've never had a tool that lets students play with the math easily.

I look forward to showing this to students in the fall.

Gracana3• 12 years ago

You might also consider showing the Pure Data. The intro documentation/tutorial stuff is quite good at explaining the basics of sound synthesis.

noname123• 12 years ago

Can't wait to go to the next Girl Talk show where instead of DJ pressing space bar to play, they press F5 to "Compile and Run..."

saltyknuckles• 12 years ago

Very good work, I like this a lot.

jamesmoss• 12 years ago

A scene has sprung up around music based on algorithms, called Algorave http://en.wikipedia.org/wiki/Algorave

Vice did an article on the subject a few months back which gives an overview of the scene (from a layman's view) http://www.vice.com/en_uk/read/algorave-is-the-future-of-dan...

stagas13• 12 years ago

This is really, really interesting.

yaxu2• 12 years ago

come and do some wavepot at an algorave

elwell2• 12 years ago

it is quite contrary to normal raves due to the fact that the music can be very stop-and-start and the ingestion of MDMA, ketamine or other illicit drugs does not usually happen

- wikipedia

jimbobimbo• 12 years ago

Oh, this is so good, thanks for posting the link to Vice! Very much Oval-like performance, super awesome!

newrenowhore• 12 years ago

This is really, really impressive. Cool range of sounds. Have you thought about attaching a user-friendly, knobby interface to the modules? I could see it as a really easy way for non-programming musicians to learn how to use this and other music generation systems like it.

stagas13• 12 years ago

Thanks! That's a good idea, I have it planned for a next milestone as it is not one of the immediate priorities.

lukasm• 12 years ago

It goes into loop when I want to switch a file "You've made some edits!"

Also

yntaxError: Unexpected token * at Function (native) at t (blob:http%3A//wavepot.com/576aa761-8f7c-4918-b4e7-8bdd7c77ff39:2:16401) at Function.<anonymous> (blob:http%3A//wavepot.com/576aa761-8f7c-4918-b4e7-8bdd7c77ff39:2:16779) at Function.i.emit (blob:http%3A//wavepot.com/576aa761-8f7c-4918-b4e7-8bdd7c77ff39:1:2656) at DedicatedWorkerGlobalScope.i.isMaster.self.onmessage (blob:http%3A//wavepot.com/576aa761-8f7c-4918-b4e7-8bdd7c77ff39:2:12723)

Gracana3• 12 years ago

Cool! Reminds me of ChucK[1].

[1] http://chuck.cs.princeton.edu/

izolate• 12 years ago

I could easily see this become the future of music production. Lovely UI too.

dasmithii• 12 years ago

I'd love to help develop this (and experiment myself!). Is it open source?

If so, where can I find the repo?

thinkmassive• 12 years ago

Looks like a modern (in-browser) take on CSound[1]. I love the idea of modifying the code during runtime.

[1] http://www.csounds.com/

jbernier• 12 years ago

This is really cool. Anyone know of any good tutorials for learning how to make sounds like this?

chrislo3• 12 years ago

If you like this, you might also be interested in a newsletter I write called Web Audio Weekly. I link to interesting projects that use the Web Audio and Web MIDI APIs as well as more general stuff of interest to musicians and developers.

https://tinyletter.com/webaudioweekly

rwl4• 12 years ago

I love it! I want to see something like this for the iPad. I could also imagine a Soundcloud + Spotify + Github hybrid playlist site where you could actually present your creation for people to play in a playlist format.

sokrates• 12 years ago

https://gist.githubusercontent.com/jonasschneider/bfa93fbb35...

Extended the melody & progression a bit. I'm so proud, this is awesome!

lomocotive• 12 years ago

can you tell more about how you coded the fundraiser modal? is it just checking the balances on those addresses then converting them to USD? im sure its a simple solution but i'd be happy to hear more about it - i was thinking of making a similar one for my own project, but it would be good if it displayed different addresses per visitor for better obfuscation...lets say have half of a wallet full of addresses, then also check server side whether the displayed is a valid one

[edit: using something like coinbase would solve this, but how could you work it out without a 3rd party and any fees?]

stagas13• 12 years ago

It is using 3rd party APIs server-side to check wallets' balances, converts doge to btc and then converts the sum of btc to USD. I like the obfuscation idea but I'm not sure it's worth the complexity in this particular use-case.

ff7c11• 12 years ago

zapt022• 12 years ago

This is amazing, but I wish there was a clear way of knowing when there is an error causing your changes to not be output.

I fiddled for a couple of minutes without any changes before realizing i had forgotten to initialize a variable. (the x checkmarks don't seem to work for unassignad variables..)

stagas13• 12 years ago

A debug console is planned for milestone I that will help for those issues.

zapt022• 12 years ago

Slightly related question: Are there any courses I can take specifically aimed at making music by programming? Lynda or similar preferred, articles / books also work as long as they have examples using some sort of software (not just algorithms)

GuiA• 12 years ago

I quite like http://musicforgeeksandnerds.com

hmsimha• 12 years ago

Unfortunately the course materials aren't available any more, but you should watch for the next offering of this course by the California Institutes of the Arts on Coursera: https://www.coursera.org/course/chuck101

bbrennan2• 12 years ago

This looks way more user-friendly than stuff like CSound. Would be awesome to see a real DAW-like GUI built on top of it...I've always wanted a DAW that would let me flip between GUI editing and code.

If you could use any help coding, please let me know.

maxogden• 12 years ago

Seems similar to http://studio.substack.net/

thibauts• 12 years ago

It is. http://studio.substack.net/wavepot

notthetup4• 12 years ago

Wow.. So is Wavepot.com by substack too?

jm547ster• 12 years ago

This is really cool, really nice level of abstraction.

The 303 example in the environments in which I learned computer music fundamentals (PD, Max, CSound, Supercollider) would require either much more or less understanding and/or 3rd party implementations of components to generate something similar. Most importantly the sound is really nice.

Btw the categorisation of it being a DAW is dependent on the user perspective, I've created what I would consider to be DAW equivalents in Max/Pure Data, that facilitate audio/midi recording and playback; just because a toolkit doesn't do stuff for you automatically doesn't mean it isn't capable. DAW in my opinion is just a marketing term not a descriptive one.

stagas13• 12 years ago

Thanks! I have background in Music Technology but I'm just starting with DSP myself. Most of the stuff I use are ported from code I found online so I can't really take credit for those though.

A modular piece of software like this can achieve pretty much the same as professional DAWs. Consider modules that add UI elements, automations, etc. It won't be long until the abstraction is high enough so everyone just assembles their own custom DAWs on the fly.

recursive• 12 years ago

Is there a way to contribute without using bitcoin? This is awesome and I want to support it, but I'm not really interested in getting involved in bitcoin.

stagas13• 12 years ago

Paypal donations have been added to the crowdfund. Thank you people, I appreciate your enthusiasm, this is a project I am in love as well and I wanna see it going places.

anigbrowl2• 12 years ago

If you like this and have an iPad you should also check out Bitwiz: http://kymatica.com/bitwiz

sossles• 12 years ago

What a great idea. I want to make synthesized sound effects for a game I'm making, and building them algorithmically in Javascript would be great. My alternatives have involved twiddling a zillion predefined knobs in a overwhelming UI, but as a developer this is far more appealing.

If only I could export the generated sound!

stagas13• 12 years ago

Uncompressed code export with convenience methods like .play() is planned for milestone I. This exact use-case is what I had in mind.

leeoniya2• 12 years ago

reminds me of http://www.openscad.org/

hardikj• 12 years ago

You should also checkout - http://www.audiotool.com/ Its a DAW, but its more of a chrome plugin.

Pot• 12 years ago

Also, they're already on their way to migrate to HTML5!

zhodge• 12 years ago

As someone who's completely ignorant to the concepts behind algorave, could anyone more experienced outline the helpful prerequisites to know before I experiment with a tool like Wavepot?

I assume it's mostly the (basic?) physics of sound waves that I'd need to understand?

jarmitage2• 12 years ago

You don't need to know anything about the physics of sound or programming, to get algoraving with Tidal or Ixi Lang

http://yaxu.org/tidal/

http://www.ixi-audio.net/ixilang/

aaronsnoswell• 12 years ago

This is amazing - I had loads of fun playing with this for a couple of minutes - thanks!

yeureka• 12 years ago

This could be really useful for prototyping realtime sfx for games.

I am floored by how well it runs on my Moto G, specially the 303 and the subwah patches.

Great job!

tech-no-logical• 12 years ago

it's probably me, but I get nothing... - ff (latest beta) : waveform thingy works, no sound - chrome (latest beta) : no waveform, no sound - IE (11) : nothing

maho• 12 years ago

For me, using FF (various versions) and IE: Just a black background. It worked yesterday - they must be updating something.

iibewegung• 12 years ago

Linux Mint 14 (desktop) and CyanogenMod 10.2.1-flo (mobile, mod based on Android 4.3.1) user here.

For Mint: Firefox 29 - everything works; Chromium 34 - only grey background

For CyanogenMod: Chrome 35 - everything works; Dolphin 10.3.1 - only grey background

rabidmachine9• 12 years ago

This is perfect!

enen• 12 years ago

As a heavy Ableton user and coder I would like to have a coding environment that also has powerful gui libraries so I can quickly implement faders and knobs and stuff when needed but also be able to change code on the fly. Kind of get the best of both worlds for the ultimate hacking music environment. This is something similar and very interesting but for visual stuff based on openFrameworks: https://media.usfca.edu/app/plugin/embed.aspx?ID=mjWcGbE4DUK...

widdershins• 12 years ago

Yeah, I'd really like to see a DAW that incorporates SuperCollider in a transparent way along with traditional audio & MIDI tracks, a bit like how Max is integrated with Ableton.

stagas13• 12 years ago

That's about what I have in mind, picking the bits and pieces you need to create your custom audio workstations in a modular and hackable manner.

nader• 12 years ago

Awesome!

rsiqueira• 12 years ago

You can help the Wavepot project: Contributors can join the discussion and mailing list here: https://groups.google.com/forum/#!forum/wavepot

They also have a funding campaign (accepting paypal) to finish this project that will include modules like Oscillators, Sequencers and:

Effects: Amp, Chorus, Delay, Dynamics, Eq, Filter, Flanger, Modulation, Phaser, Reverb.

Synths: Ambient, Analog, Bass, Drums, Flute, FM, FX, Modular, Organ, Pads, Percussion, Piano, Samples and Strings.

stagas13• 12 years ago

Just want to clarify that the modules feature is the ability to create them and import them like this:

  import DiodeFilter from 'filters';
  
  var filter = new DiodeFilter;

thebeardisred• 12 years ago

I just want someone to put together a "hypnotoad" sample.

radmuzom• 12 years ago

Does not work in IE, but does in Firefox and Chrome. Is it just me or the application does not actually work in IE?

rkotcher• 12 years ago

Hi stagas, great job on wavepot! Is there any way we could get in touch off of this thread? My startup company is working on a very similar idea, and I think it would be great to know each other. If you'd like I can send write down my email onto this thread. Hope to talk soon!

objekt• 12 years ago

added a filter envelope to "got some 303" and now it sounds much more like a 303 :)

source code here:

http://pastebin.com/rWMt45ug

notthetup4• 12 years ago

Made a gist with some of the scripts people have been making.. Add yours to the comments and I'll curate the list.

https://gist.github.com/notthetup/65f100f8ecf0f44f568d

_druu• 12 years ago

Hey, Hey, Hey! I made something with it!

https://gist.github.com/druu/044b8103e2a4842828bd

It's the melody of the song 'Popcorn'. While this might not be special, I implemented a first draft of a (going-to-be) multi-track sequencer. </shameless self plug>

Whatcha think?

janesconference• 12 years ago

Another more DAW-esque pure HTML / js DAW in the browser: http://hya.io

marko123• 12 years ago

what language is this ? i see it is not php ...

Show HN: Wavepot – Digital audio workstation of the web

Related Stories