Comments on: It’s Friday. Play some drums…. HTML5 style http://ajaxian.com/archives/its-friday-play-some-drums-html5-style Cleaning up the web with Ajax Thu, 09 Feb 2012 06:55:33 +0000 hourly 1 http://wordpress.org/?v=3.2 By: turntayble81 http://ajaxian.com/archives/its-friday-play-some-drums-html5-style/comment-page-1#comment-285373 turntayble81 Mon, 18 Oct 2010 22:43:52 +0000 http://ajaxian.com/?p=7046#comment-285373 Hey guys, I know its been over a year since this article was written, but I wanted to share with you something I built over the past couple months: http://patternsketch.com It is another HTML5 drum machine with a few extra bells and whistles, including the ability to download created loops in ogg, wav and mp3 format. It currently works best in Firefox. Really good work on your project, Brian! It didn't even dawn on me until a few months ago that maybe an HTML5 sequencer/drum machine would be possible. Hey guys, I know its been over a year since this article was written, but I wanted to share with you something I built over the past couple months: http://patternsketch.com It is another HTML5 drum machine with a few extra bells and whistles, including the ability to download created loops in ogg, wav and mp3 format. It currently works best in Firefox.

Really good work on your project, Brian! It didn’t even dawn on me until a few months ago that maybe an HTML5 sequencer/drum machine would be possible.

]]> By: rXc3NtR1c http://ajaxian.com/archives/its-friday-play-some-drums-html5-style/comment-page-1#comment-274279 rXc3NtR1c Tue, 07 Jul 2009 06:48:52 +0000 http://ajaxian.com/?p=7046#comment-274279 Needs more cowbell ;-) Needs more cowbell ;-)

]]> By: mjuhl http://ajaxian.com/archives/its-friday-play-some-drums-html5-style/comment-page-1#comment-274276 mjuhl Mon, 06 Jul 2009 22:49:04 +0000 http://ajaxian.com/?p=7046#comment-274276 Pretty cool, but I had to click the back button about 500 times to get back here and leave a comment! Pretty cool, but I had to click the back button about 500 times to get back here and leave a comment!

]]> By: RichardJohansson http://ajaxian.com/archives/its-friday-play-some-drums-html5-style/comment-page-1#comment-274272 RichardJohansson Mon, 06 Jul 2009 13:03:56 +0000 http://ajaxian.com/?p=7046#comment-274272 Awsome. Here is my quick DJ effort! http://www.randomthink.net/labs/html5drums/#00000010000000010000001000001000000000000000000000000000000000001000000010001000000010000000000000000000000000000100000001000000001000000010000000000000000000001000000000000010000001000000000001001000000000001001000000000000%7C110 Best enjoyed while programming! Awsome. Here is my quick DJ effort!

http://www.randomthink.net/labs/html5drums/#00000010000000010000001000001000000000000000000000000000000000001000000010001000000010000000000000000000000000000100000001000000001000000010000000000000000000001000000000000010000001000000000001001000000000001001000000000000%7C110

Best enjoyed while programming!

]]> By: Ajaxerex http://ajaxian.com/archives/its-friday-play-some-drums-html5-style/comment-page-1#comment-274269 Ajaxerex Fri, 03 Jul 2009 16:27:04 +0000 http://ajaxian.com/?p=7046#comment-274269 Suggestion: Test the sound of the instrument clicking on the instrument label. Great! Suggestion: Test the sound of the instrument clicking on the instrument label.

Great!

]]> By: Schill http://ajaxian.com/archives/its-friday-play-some-drums-html5-style/comment-page-1#comment-274268 Schill Fri, 03 Jul 2009 15:56:34 +0000 http://ajaxian.com/?p=7046#comment-274268 This is: 1) Awesome. 2) The future.   The timing is really off for me on Firefox 3.5 (OS X), but it's very smooth in Safari 4. This is:
1) Awesome.
2) The future.
 
The timing is really off for me on Firefox 3.5 (OS X), but it’s very smooth in Safari 4.

]]> By: brianarn http://ajaxian.com/archives/its-friday-play-some-drums-html5-style/comment-page-1#comment-274267 brianarn Fri, 03 Jul 2009 14:49:50 +0000 http://ajaxian.com/?p=7046#comment-274267 I did some last-minute optimization last night. * I replaced the beats as shown in the screenshot with cleaner tones generated from GarageBand. * Rather than stopping all audio now on each beat, it only resets the ones that are going to play again. That way, things like the crash cymbal that I added in are allowed to ring out for their full second or so if they're not repeated. I realize it's less of a realistic drum machine that way, but I like the effect. * Using setTimeout was causing some laggy beat issues, depending on the browser. I've converted it over to using setInterval and it seems a lot smoother. I'm having a ton of fun with this thing. Stuff I learned in the HTML 5 kit I used to start Fivorion, and then I backported some of those experiences. It's been a nice and iterative learning experience. I'm looking forward to some video experiments soon too. =) I did some last-minute optimization last night.

* I replaced the beats as shown in the screenshot with cleaner tones generated from GarageBand.
* Rather than stopping all audio now on each beat, it only resets the ones that are going to play again. That way, things like the crash cymbal that I added in are allowed to ring out for their full second or so if they’re not repeated. I realize it’s less of a realistic drum machine that way, but I like the effect.
* Using setTimeout was causing some laggy beat issues, depending on the browser. I’ve converted it over to using setInterval and it seems a lot smoother.

I’m having a ton of fun with this thing. Stuff I learned in the HTML 5 kit I used to start Fivorion, and then I backported some of those experiences. It’s been a nice and iterative learning experience. I’m looking forward to some video experiments soon too. =)

]]>