web audio oscillator.type issue

All things HTML5 or text based engines, or really any web based engines.
Post Reply
User avatar
KingScar
Posts: 54
Joined: Wed Sep 08, 2010 5:08 pm

web audio oscillator.type issue

Post by KingScar »

I'm currently working with Web Audio for creating a simple synth like project in the brower and implementing controls for the Oscillators via Jquery/JqueryUI. Everything works exactly as it should except for the Waveform Slider. You are supposed to be able to switch between a Sine (default), Square, Sawtooth, and Triangle waveform. The slider's UI changes and updates properly however, the actual oscillators waveform type is not changed or updated, it simply stays on a Sine Wave.

Here's where I think the problem is:

Code: Select all

var wF = {
    0: "Sine",
    1: "Square",
    2: "Sawtooth",
    3: "Triangle"
};
$(function () {
    $("#osc1_wave").slider({
        min: 0,
        max: 3,
        value: 0,
        step: 1,
        slide: function (event, ui) {
            $("#cur_wave_osc1").val(wF[ui.value]); <--------
            osc1.type.value = $("#cur_wave_osc1").val(); <------------
        }
    });
    //initial waveform.//
    $("#cur_wave_osc1").val("Sine");
});
For a more in depth look at the code, here's the fiddle:

http://jsfiddle.net/ryanhagz/03xcwhnk/

I appreciate any help on this!

Thanks.
Advanced:Html(XHTML), CSS, Writing
Intermediate: php, MYSQL, Level Design, C++, JavaScript
Beginner:Java, C-Lite, 3D modeling

The difference between me and you:

You: :geek: Me: :ugeek:

Image
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: web audio oscillator.type issue

Post by Jackolantern »

Ooohh boy, I have not worked much with the newer Web Audio profile. Maybe Chris has and will show up to take a look at this? Or maybe Halls has used it before.
The indelible lord of tl;dr
User avatar
KingScar
Posts: 54
Joined: Wed Sep 08, 2010 5:08 pm

Re: web audio oscillator.type issue

Post by KingScar »

Yeah, I'd really appreciate some feedback on this, I can't seem to figure it out. As of right now, I've put it on hold and started working on taking out redundant functions across the oscillators in exchange for jquery's .each() method which has seemed to help cut down a couple other bugs I came across. As for the waveform slider I really can't figure it out. I'm using the exact same technique across all the functions, the only difference in the waveform slider is that the values ("sine","square","sawtooth","triangle") are stored in an object call wF and it references the value by using wF[ui.value] and as I said in the OP, the UI updates properly and shows what waveform should be playing based on the sliders current position, but it doesnt change the actual osc.type...... :?:
Advanced:Html(XHTML), CSS, Writing
Intermediate: php, MYSQL, Level Design, C++, JavaScript
Beginner:Java, C-Lite, 3D modeling

The difference between me and you:

You: :geek: Me: :ugeek:

Image
User avatar
KingScar
Posts: 54
Joined: Wed Sep 08, 2010 5:08 pm

Re: web audio oscillator.type issue

Post by KingScar »

I figured it out finally! It was so simple, but extremely annoying. The wF Object was attempting to change the oscillators type to Sine,Square,Sawtooth,Triangle as opposed to the proper syntax being lowercase (sine,square,sawooth,triangle).
Advanced:Html(XHTML), CSS, Writing
Intermediate: php, MYSQL, Level Design, C++, JavaScript
Beginner:Java, C-Lite, 3D modeling

The difference between me and you:

You: :geek: Me: :ugeek:

Image
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: web audio oscillator.type issue

Post by Jackolantern »

Glad you got it worked-out! I should check out Web Audio sometime. A synthesizer package could open up some interesting possibilities in game development, from music that changes based on what is going on, to rhythm games, etc.
The indelible lord of tl;dr
User avatar
KingScar
Posts: 54
Joined: Wed Sep 08, 2010 5:08 pm

Re: web audio oscillator.type issue

Post by KingScar »

Thanks Jack! Yeah, I figured it out by doing what I should have done initially - console.log() it.... :lol:

And yeah, since I first found out about Web Audio listening to Chris Wilson's Google talks and seeing some of the projects he's done, it really impressed me. People have done some amazing thing's with it and it's pretty straight forward to implement. If you want to check it out, here's a bunch of demos for the stuff you can achieve:
http://webaudiodemos.appspot.com/
My favorite on the list is the first one (Playground) it gives you a visual audio graph to connect your nodes and its pretty fun to play with.
Also, I've uploaded my project's files for you to look through if you wanted to. :)
It consists of three oscillators, with controls for their volume,pitch,detune, and waveform using basic HTML/jQuery UI sliders. Granted, the code is a bit redundant and bulky, but it works. ;) :lol:
Advanced:Html(XHTML), CSS, Writing
Intermediate: php, MYSQL, Level Design, C++, JavaScript
Beginner:Java, C-Lite, 3D modeling

The difference between me and you:

You: :geek: Me: :ugeek:

Image
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: web audio oscillator.type issue

Post by Jackolantern »

The biggest issue I would have with working with it is that I don't understand sound in that fashion. Sine wave? Wtf? I know what a sine wave is, but have no idea how it would relate to sound. I tried once working with Famitracker, and it was all based around this lower-level perspective of sound, and I just...didn't get it lol.
The indelible lord of tl;dr
User avatar
KingScar
Posts: 54
Joined: Wed Sep 08, 2010 5:08 pm

Re: web audio oscillator.type issue

Post by KingScar »

Basically sound relates to the waveforms shape which dictates the amplitude and pitch of the sound being produced because Obviously sound IS waves. the Y axis dictate amplitude(volume) while the X axis controls pitch (how far apart the peaks and valleys are) For example, Sine waves are very smooth rounded shapes so you get a very smooth,flat sound which is why 808 basses are so popular in Pop and Hip-Hop, they're just really fat sine waves. Square waves produce a signal that sounds very bitey, "on-off" because that's exactly what the waveform is doing - 100% plateau immediately to 0% plateau and back again. Once you understand and get a hang of this, you can look at a waveform and get a rough idea of what it would actually sound like. I'm considering adding spectral analysis to the project. one analyzer per oscillator plus a master analyzer that all 3 others connect to so you can see your "patches".
Advanced:Html(XHTML), CSS, Writing
Intermediate: php, MYSQL, Level Design, C++, JavaScript
Beginner:Java, C-Lite, 3D modeling

The difference between me and you:

You: :geek: Me: :ugeek:

Image
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: web audio oscillator.type issue

Post by Jackolantern »

Thanks! :)


....I still don't think I could make music that way, but hey...I couldn't really make music to start with lol
The indelible lord of tl;dr
Post Reply

Return to “HTML5/Web Engines”