10 ms·

A 909 drum machine in HTML5

50 points by slater 16y ago

phreeza 16y ago
I can't hear anything on Chrome...
- dogas 16y ago
  same here. And then, the page crashed.
diggum 16y ago
the timing leaves much to be desired. what is so HTML 5'y about this? why couldn't this have been done in previous HTML versions?
- armandososa 16y ago
  there's no audio tag in previous versions?
  - points 16y ago
    <object <embed bgsound etc etc It's not like audio didn't exist before HTML5...
    - armandososa 16y ago
      Well you asked what was so html5'y about this, so I answered. Otherwise it would have been java'y or flash'y. Only HTML5 allows to do this with no plugins at all.
      - rimantas 16y ago
        Also, some HTML5 types are used for inputs: number, range. Of coure they fall back to simple type=text if not supported, but everything works fine on Safari 5.
chipsy 16y ago
This is a much better implementation of HTML5 sequencing: http://jonbro.tk/blog/2010/09/19/html_5_chip_tracker.html http://jonbro.tk/blog/2010/09/19/html_5_chip_tracker.html And I'm currently working on something even better than that one. This all requires the Audio API in beta version of FF4, though. Otherwise you can't properly control the mix or timing.
- rbxbx 16y ago
  Interested in what you're working on... is the source up anywhere? Will it be?
  - chipsy 16y ago
    I'm also doing a tracker, but I opted to do a complex synthesis model(samples, ring-modulation, LFSR noise, table-based parameter programming) - I think I started almost the same time as the guy I linked to, but I've exposed almost nothing to the UI yet so a lot of the fun stuff is still buried in test code. http://dl.dropbox.com/u/254701/chipsy/Chipsy.html http://dl.dropbox.com/u/254701/chipsy/Chipsy.html http://dl.dropbox.com/u/254701/chipsy/Chipsy.hx http://dl.dropbox.com/u/254701/chipsy/Chipsy.hx My goal is to get it to a stage where I can put together a demo track and, then try to fund a more polished version through Kickstarter. I haven't thought about license yet but I suppose something open-source would be appropriate(so that the sound engine can be integrated in games etc.). edit: Also, it uses Canvas and the performance has varied widely in FF4 builds. Current Minefield seems like the best option.
    - rbxbx 16y ago
      There's some madness in there! Pretty exciting stuff too though. I'd love to get into audio(software) work someday, it just seems so intense. It would be really cool to be able to import IT modules and whatnot... actually an (embeddable) js/html5 mod player would be cool on it's own as well. Keep up the good work, will definitely keep my eye on this :)
    - jonbro 16y ago
      seems cool! I am excited that more people are getting into this stuff. Sorry mine is so limited from a synthesis perspective, I would really like to add more controls as well. I was getting a bit bogged down in all of the UI stuff.
ck2 16y ago
Works fine on Firefox. Needs a way to save/load/share the setups?
cageface 16y ago
I'll be very surprised if anybody can get timing on an HTML5 sequencer tight enough to be musically useful. It's hard enough as it is in native apps.
- thereticent 16y ago
  I would think it would be possible to do the sequencing in an HTML5 interface, then export a WAV file using more precise timing.
  - cageface 16y ago
    That should be workable, but if you have tools to do something useful with a rendered wav you probably don't need an html 909.
    - jonbro 16y ago
      if you are using the new mozilla/chrome audio apis, you can do sample accurate timing.
deleted 16y ago
[deleted]
deleted 16y ago
[deleted]
powrtoch 16y ago
Timing is great in Opera. Even though it seems like this basic idea "comes out" twice a month, I still waste 10 minutes being hypnotized by it every time...
VMG 16y ago
Over Quota
- jasonkester 16y ago
  App Engine seems to serve exactly the opposite of its stated purpose. The idea with scaling is that when demand increases, you allocate more resources. With appengine, when demand increases they turn off the server. It's really the only platform you could pick that's guaranteed not to scale.
  - lsb 16y ago
    When demand increases they turn off the server until you pay for more. It's not a charity! If you want to just serve static HTML, put it somewhere cheap like nearlyfreespeech.net
    - ez77 16y ago
      As an aside, where's the cost benefit in nearlyfreespeech.net? After transferring a hefty 10,000GB you are still charged $0.20/GB, while (say) linode charges you $20/200GB = $0.10/GB from the outset.
  - drawkbox 16y ago
    True but that is for the free GB transfer per day. They probably wouldn't ever make any money if they took the hit for everyone's spikes. Otherwise you'd just offload all heavy spike situations to AppEngine. If you pay for bandwidth you get past the quotas. I agree though in demonstration it seems silly. They shouldn't even have a free plan because all of them end up like this, bad perception.
turntayble81 16y ago
Check out: http://patternsketch.com http://patternsketch.com I built this over the past couple months. You can create, share and download created patterns in wav, ogg and mp3 format. The timing capabilities of JavaScript leave much to be desired, and I tried many ideas to get the timing as solid as possible. Currently works best in Firefox (3.6.10 is the current release version as of this writing). Tests in FF4 B6 are very promising as well. Works well in Chrome, too.

50 points by slater 16y ago

phreeza 16y ago

I can't hear anything on Chrome...

dogas 16y ago
same here. And then, the page crashed.

diggum 16y ago

the timing leaves much to be desired. what is so HTML 5'y about this? why couldn't this have been done in previous HTML versions?

armandososa 16y ago
there's no audio tag in previous versions?
- points 16y ago
  <object <embed bgsound etc etc It's not like audio didn't exist before HTML5...
  - armandososa 16y ago
    Well you asked what was so html5'y about this, so I answered. Otherwise it would have been java'y or flash'y. Only HTML5 allows to do this with no plugins at all.
    - rimantas 16y ago
      Also, some HTML5 types are used for inputs: number, range. Of coure they fall back to simple type=text if not supported, but everything works fine on Safari 5.

chipsy 16y ago

This is a much better implementation of HTML5 sequencing: http://jonbro.tk/blog/2010/09/19/html_5_chip_tracker.html http://jonbro.tk/blog/2010/09/19/html_5_chip_tracker.html And I'm currently working on something even better than that one. This all requires the Audio API in beta version of FF4, though. Otherwise you can't properly control the mix or timing.

rbxbx 16y ago
Interested in what you're working on... is the source up anywhere? Will it be?
- chipsy 16y ago
  I'm also doing a tracker, but I opted to do a complex synthesis model(samples, ring-modulation, LFSR noise, table-based parameter programming) - I think I started almost the same time as the guy I linked to, but I've exposed almost nothing to the UI yet so a lot of the fun stuff is still buried in test code. http://dl.dropbox.com/u/254701/chipsy/Chipsy.html http://dl.dropbox.com/u/254701/chipsy/Chipsy.html http://dl.dropbox.com/u/254701/chipsy/Chipsy.hx http://dl.dropbox.com/u/254701/chipsy/Chipsy.hx My goal is to get it to a stage where I can put together a demo track and, then try to fund a more polished version through Kickstarter. I haven't thought about license yet but I suppose something open-source would be appropriate(so that the sound engine can be integrated in games etc.). edit: Also, it uses Canvas and the performance has varied widely in FF4 builds. Current Minefield seems like the best option.
  - rbxbx 16y ago
    There's some madness in there! Pretty exciting stuff too though. I'd love to get into audio(software) work someday, it just seems so intense. It would be really cool to be able to import IT modules and whatnot... actually an (embeddable) js/html5 mod player would be cool on it's own as well. Keep up the good work, will definitely keep my eye on this :)
  - jonbro 16y ago
    seems cool! I am excited that more people are getting into this stuff. Sorry mine is so limited from a synthesis perspective, I would really like to add more controls as well. I was getting a bit bogged down in all of the UI stuff.

ck2 16y ago

Works fine on Firefox. Needs a way to save/load/share the setups?

cageface 16y ago

I'll be very surprised if anybody can get timing on an HTML5 sequencer tight enough to be musically useful. It's hard enough as it is in native apps.

thereticent 16y ago
I would think it would be possible to do the sequencing in an HTML5 interface, then export a WAV file using more precise timing.
- cageface 16y ago
  That should be workable, but if you have tools to do something useful with a rendered wav you probably don't need an html 909.
  - jonbro 16y ago
    if you are using the new mozilla/chrome audio apis, you can do sample accurate timing.

deleted 16y ago

[deleted]

deleted 16y ago

[deleted]

powrtoch 16y ago

Timing is great in Opera. Even though it seems like this basic idea "comes out" twice a month, I still waste 10 minutes being hypnotized by it every time...

VMG 16y ago

Over Quota

jasonkester 16y ago
App Engine seems to serve exactly the opposite of its stated purpose. The idea with scaling is that when demand increases, you allocate more resources. With appengine, when demand increases they turn off the server. It's really the only platform you could pick that's guaranteed not to scale.
- lsb 16y ago
  When demand increases they turn off the server until you pay for more. It's not a charity! If you want to just serve static HTML, put it somewhere cheap like nearlyfreespeech.net
  - ez77 16y ago
    As an aside, where's the cost benefit in nearlyfreespeech.net? After transferring a hefty 10,000GB you are still charged $0.20/GB, while (say) linode charges you $20/200GB = $0.10/GB from the outset.
- drawkbox 16y ago
  True but that is for the free GB transfer per day. They probably wouldn't ever make any money if they took the hit for everyone's spikes. Otherwise you'd just offload all heavy spike situations to AppEngine. If you pay for bandwidth you get past the quotas. I agree though in demonstration it seems silly. They shouldn't even have a free plan because all of them end up like this, bad perception.

turntayble81 16y ago

Check out: http://patternsketch.com http://patternsketch.com I built this over the past couple months. You can create, share and download created patterns in wav, ogg and mp3 format. The timing capabilities of JavaScript leave much to be desired, and I tried many ideas to get the timing as solid as possible. Currently works best in Firefox (3.6.10 is the current release version as of this writing). Tests in FF4 B6 are very promising as well. Works well in Chrome, too.