Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I generate random data that simulates an audio signal?

Tags:

I'm working on an animated logo that will be revealed by a spectrum analyzer going from zero to eleven. I'm looking for something that will work on a broad variety of browsers so wiring it up to an HTML5-audio element is likely not an option as the only libraries I've found that can do this work on only the newest WebKit and Firefox releases. So far I've be playing with just generating a random value at an interval. Here is an example of where I am currently stuck (using jQuery's animate function()):

<div id='Logo'>
    <div id='channelA' class='channel'></div>
    <div id='channelB' class='channel'></div>
    <div id='channelC' class='channel'></div>
    <div id='channelD' class='channel'></div>
    <div id='channelE' class='channel'></div>
    <div id='channelF' class='channel'></div>
    <div id='channelG' class='channel'></div>
</div>
<script>
  setInterval(function () {
    $('.channel').each(function () {
        $(this).animate({
            height: (Math.round(Math.random() * 185)) + 'px'
        });
    });
  }, 100);
</script>
<style>
#Logo {
    width: 245px;
    height: 245px;
    background: red;
}
div.channel {
    float: left;
    z-index: 9;
    background: white;
}
#channelA {
    width: 35px;
    height: 45px;
}
#channelB {
    width: 35px;
    height: 85px;
}
#channelC {
    width: 35px;
    height: 85px;
}
#channelD {
    width: 35px;
    height: 50px;
}
#channelE {
    width: 35px;
    height: 150px;
}
#channelF {
    width: 35px;
    height: 30px;
}
#channelG {
    width: 35px;
    height: 85px;
}
</style>

This doesn't look "right". Is there a function that can generate data that "feels" more like an audio signal? I'm also interested in other approaches to this problem (maybe I just need to capture spectrum analyzer data in a browser that supports HTML5 audio and then "play it back" in older browsers.)

This is an example of the kind of look I am going for:

enter image description here

After a little searching for a implementation of Bézier curves in JavaScript I've started mixing generated singles to produce something. Though my work in unfinished, in case this gives anyone else any ideas here is a demo.