Friday, July 3rd, 2009
It’s Friday. Play some drums…. HTML5 style
Brian Arnold created a fun sample drum machine simulator using HTML5 <audio>.
JAVASCRIPT:
-
-
function playBeat() {
-
if (isPlaying) {
-
var nextBeat = 60000 / curTempo / 4;
-
// Turn off all lights on the tracker's row
-
$("#tracker li.pip").removeClass("active");
-
// Stop all audio
-
stopAllAudio();
-
// Light up the tracker on the current pip
-
$("#tracker li.pip.col_" + curBeat).addClass("active");
-
// Find each active beat, play it
-
$(".soundrow[id^=control] li.pip.active.col_" + curBeat).each(function(i){
-
document.getElementById($(this).data('sound_id')).play();
-
});
-
// Move the pip forward
-
curBeat = (curBeat + 1) % 16;
-
// Schedule the next one
-
setTimeout(playBeat, nextBeat);
-
}
-
}
-
That's not all Brian is working on:
I'm also working on something like the ToneMatrix or Tenori-on (Flash and actual devices, respectively) in pure HTML/JS. It works too, but the sounds aren't exactly designed to be great together (it's currently working on a C scale) and so if you're careful, you can get some decent sound but otherwise, it'll hurt your ears.
3.8 rating from 24 votes
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. =)
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.
Suggestion: Test the sound of the instrument clicking on the instrument label.
Great!
Awsome. Here is my quick DJ effort!
http://www.randomthink.net/labs/html5drums/#00000010000000010000001000001000000000000000000000000000000000001000000010001000000010000000000000000000000000000100000001000000001000000010000000000000000000001000000000000010000001000000000001001000000000001001000000000000%7C110
Best enjoyed while programming!
Pretty cool, but I had to click the back button about 500 times to get back here and leave a comment!
Needs more cowbell ;-)
With the changing trend of the world, wedding apart from white,Princess Strapless Satin Evening Dress ivory, beige and other traditional colors,are also increasingly popular in recent years, ghetto prom dressespink wedding package,gothic prom dresses such as pink, pink orange, baby blue, purple night, light green and light silver-gray, very soft and pleasing to wedding hair accessoriesthe eye; if you have the courage to try, dark green, purplish red, deep purple, decorated in pink wedding dress, the formation of rich colors,the dress, the effect is very special;Sash Lace Satin Flower Girl Dress, laden with flour colored silk flowers, butterflies, in order to add color.wedding dressIn fact, the wedding is the color of lesser importance, the most important prerequisite is to match the bride’s complexion. Oriental deep and yellowish color, wearing white Mermaid Satin Organdie Wedding Dress,will appear dull, wearing ivory would be more harmonious and natural, baby blue, wedding accessoriespurple night can not be coordinated with the yellow, but pink orange, light green with yellowish color match. As for the skin and rosy, or bronze skin, wearing white will look great, wedding dress
A wedding dresses is always
expensive. Every couple will agree on this.When you are planning for
your wedding, you will probably find that every item can be very
expensive. This is especially true when it comes to the wedding dress.
You may think that there is no way for you to get a Wedding gown dresswhich is
elegant and at the same time cheap. However, I can tell you that there
are some ways to save money on this item.
So, the question here is how to make your white wedding dressinexpensive.
In fact, one thing you need to understand is that it is totally
possible for you to find a cheap
wedding dress which is also elegant and beautiful. You do not need
to sacrifice the quality just because you will need to search for cheap wedding gowns items.
As a matter of fact, one of the ways to get a bridal gowns is to wear the one
your mother wore when she got married. The point here is that you will
be wearing a bridal dresses
item and it will certainly be very stylish.
The principal concern whenever lifting heavy objects on an uneven
surface is to ensure stability. The basic wedding dresses esign premise of
a cantilever hoist is to include a heavy counter weight that opposes
the load and ensures longitudinal seostability in use.
This use of a counterweight is backed up by a relatively wide chassis
on fully lockable 8 inches by 2 Electric hoist inches phenolic
casters.Whenever you need to be able to electric hoist or lift a
weighty object from the floor onto a higher level, having a lifting
system chain hoist that you
can rely on is essential. Unfortunately, there are always situations
where it is simply not possible to use conventional chain block lifting gear such as
jibs or fork lifts, and under these situations, when it is Snatch Block necessary to be able to raise a
weight quickly, then a cantilever hoist is often the best choice.