electro-music.com   Dedicated to experimental electro-acoustic
and electronic music
 
    Front Page  |  Articles  |  Radio
 |  Media  |  Forum  |  Wiki  |  Links  |  Store
Forum with support of Syndicator RSS
 FAQFAQ   CalendarCalendar   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   LinksLinks
 RegisterRegister   ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in  Chat RoomChat Room 
 Forum index » Discussion » Schmooze
Interactive synthesis tutorial
Post new topic   Reply to topic
Page 1 of 1 [10 Posts]
View unread posts
View new posts in the last week
Mark the topic unread :: View previous topic :: View next topic
Author Message
ian-s



Joined: Apr 01, 2004
Posts: 2578
Location: Auckland, New Zealand
Audio files: 42
G2 patch files: 611

PostPosted: Sun Nov 18, 2012 2:49 am    Post subject: Interactive synthesis tutorial
Subject description: web audio synth basics tutorial project
Reply with quote  Mark this post and the followings unread

Follow up to this thread, I have put together a proof of concept interactive tutorial here. It is very rough and brief but shows what can be done with a few lines of javascript and some html5.
There is such a wealth of knowledgeable people on this forum, I wonder if anyone with better writing skills and sense of humor than me, would like to collaborate? I was thinking of a free resource, including photos of real analog synths.

This example isn't as Chrome specific as my last post but at this stage, hasn't been tested on any other browser except the iPad's safari (were it kind of works)
Back to top
View user's profile Send private message
MusicMan11712



Joined: Aug 08, 2009
Posts: 736
Location: Upstate New York USA
Audio files: 148

PostPosted: Sun Nov 18, 2012 6:49 am    Post subject: Reply with quote  Mark this post and the followings unread

On my Mozilla Firefox, the text is pink on white and the buttons and spacebar don't do anything.
Back to top
View user's profile Send private message
Antimon



Joined: Jan 18, 2005
Posts: 3739
Location: Sweden
Audio files: 277
G2 patch files: 96

PostPosted: Sun Nov 18, 2012 7:00 am    Post subject: Reply with quote  Mark this post and the followings unread

Works in Safari on the Mac. Neat! I'm gonna check this out.
_________________
Antimon's Window
@soundcloud @Flattr home - you can't explain music
Back to top
View user's profile Send private message Visit poster's website
ian-s



Joined: Apr 01, 2004
Posts: 2578
Location: Auckland, New Zealand
Audio files: 42
G2 patch files: 611

PostPosted: Sun Nov 18, 2012 11:16 am    Post subject: Reply with quote  Mark this post and the followings unread

MusicMan11712 wrote:
On my Mozilla Firefox, the text is pink on white and the buttons and spacebar don't do anything.


I think Mozilla is getting behind the web audio api but the prototype is using the -WebKit- prefix at the moment (and the -WebKit- CSS3 for formatting sorry). I like Firefox so I will try and code for it after work today. IE and Opera are not going to work.
I am not sure how I am going to deal with pwm and sync. The web audio oscillators don't support that so will wave to do some pure JavaScript.

Good to hear it works on a mac Very Happy Do the waveforms look ok? Note sure I have the scope sync code working properly.

The code is a bit of a mess, all the html, css and JavaScript in the same file Embarassed
Back to top
View user's profile Send private message
Antimon



Joined: Jan 18, 2005
Posts: 3739
Location: Sweden
Audio files: 277
G2 patch files: 96

PostPosted: Sun Nov 18, 2012 12:42 pm    Post subject: Reply with quote  Mark this post and the followings unread

From what I'm reading on the web AudioContext isn't supported by Firefox yet (seems like that when I tested out keywords in Firebug as well). So it will be Chrome and Safari at the start, and most likely Firefox will catch up in time.

I wouldn't mind helping out a bit with this! I've been working with web stuff for a while now, and I just had a look at the AudioContext api - interesting.

I don't think there's any problem with your code, it's readable and correct. I've seen much, much worse in "professional" stuff.

A couple of suggestions though, which you are free to shoot down if you don't like them:

Set up a central git repository for collaboration. I don't know exactly how github works, or if you have to pay or something, but from what I know it's a nice place to keep source code for collaboration, plus with git you always have a copy of the repository locally so no risk of losing stuff if the central place disappears. If you want to use Subversion or something else that's great, as long as there's a versioning system somewhere that will keep your code if stuff burns up or gets confused.

Use jQuery for working with the DOM (and communicate with servers if that becomes necessary). It may take a little while to learn, but the resulting javascript becomes smaller and more manageable.

Set up a project based on html5 boilerplate, which contains a lot of stuff that solves various cross-browser issues as well as provides a nice project structure, utilitites and other things.

Besides all that, if you're not already using an IDE with support for web hacking, I can recommend WebStorm. I purchased a personal license a while back, and I like it. It checks your code for obvious (and some non-obvious) errors, can be integrated with Chrome for live WYSIWYG editing (I haven't gotten it to work perfectly, but I haven't tried that hard either) and has stuff like git support and html5 biolerplate built in (that's where I learned about it).

If you want, I can help with some of this. Smile And I love hacking javascript!

And of course, I love the idea of an interactive tutorial like this! Very Happy Great idea!

_________________
Antimon's Window
@soundcloud @Flattr home - you can't explain music
Back to top
View user's profile Send private message Visit poster's website
ian-s



Joined: Apr 01, 2004
Posts: 2578
Location: Auckland, New Zealand
Audio files: 42
G2 patch files: 611

PostPosted: Mon Nov 19, 2012 12:50 am    Post subject: Reply with quote  Mark this post and the followings unread

Antimon wrote:
From what I'm reading on the web AudioContext isn't supported by Firefox yet


Yes, they had their own audio api but I think it is being dumped in favor of web audio. I've updated the CSS so the background works but it seems they don't do the HTML5 range control yet as well. When did Mozilla get so far behind?

Chrome + Safari seem to give us a good cross platform base anyway. I might need to abandon the requestAnimationFrame api. On the iPad the scope display stops updating while you drag the frequency slider. It kind of spoils the effect.

I am thinking of doing a beginner targeted learning resource. There are already some great advanced tutorials available here and I wouldn't want to overlap that territory.

I was hoping that I could write a routine for displaying patches (using canvas) by starting at the output and walking back up the tree of connected nodes. This would allow a visual representation of the patch to be automatically generated in a style selected by the user. For example, the patch could be shown as a block diagram or a collection of patched modules ala G2 editor, depending on user preference.
I can't see yet from the spec if this is possible with the dom as it is, or if we would need to wrap the native modules.

I've never used any Git like system, will have to investigate that if the size of the project looks like it is getting out of hand.

I've been using jQuery at my new job at the university. On the plus side, it makes supporting IE7 and 8 easier and helps keep up your CSS selector chops.

It is getting a bit bloated now (not to mention buggy as hell with mobile Safari) so not sure I would like to use it here.
Could always change my mind but I like the idea of just using modern javascript without worrying about old browsers.

thanks for the advice.

edit: Just looked at your html g2 editor, nice work. I like the knobs. Some good jQuery knobs here also but they work wrong (track the angle of the pointer)
Back to top
View user's profile Send private message
Antimon



Joined: Jan 18, 2005
Posts: 3739
Location: Sweden
Audio files: 277
G2 patch files: 96

PostPosted: Tue Nov 20, 2012 7:06 am    Post subject: Reply with quote  Mark this post and the followings unread

Versioning control isn't necessarily about the size of the project, more about the frequency of collaborative updates. Using git will also give you control over updates - if something comes in that you don't like you can leave it out or send it back. That's how Linus Torvalds uses it for his Linux stuff, he get updates from people he trusts, has a look at them and then includes them in the main source code.

I'm don't want to push git down your throat, since there's a bit of a threshold getting to know it, something simpler like Subversion may work just as well. I just think that sending files back and forth will become tiresome to manage quick, if you're planning to cooperate in the actual code.

As for jQuery, fair enough. Maybe it will work just as well without it.

Anyway, as I said, I would love to help out with this.

And thanks for complimenting my knobs Very simple to make! Sometimes reinventing the wheel is more fun than finding wheels that are lying round.

_________________
Antimon's Window
@soundcloud @Flattr home - you can't explain music
Back to top
View user's profile Send private message Visit poster's website
ian-s



Joined: Apr 01, 2004
Posts: 2578
Location: Auckland, New Zealand
Audio files: 42
G2 patch files: 611

PostPosted: Sun Nov 25, 2012 3:37 am    Post subject: Reply with quote  Mark this post and the followings unread

Thanks for the offer of help. I haven't done much more than fiddle for now and looks like I might get busy with real work soon Rolling Eyes

But I found some knobs lying around Laughing
Some time in the mid 90's I did a windows minimoog emulation in C. I used povray to create the frames for the knob animation. I found the original pov file in a folder of stuff rescued from old hard drives. I wanted more frames this time so I figured if the knob has 7 way symmetry, I can just render say 40 frames moving 1/7 of a rotation then do a % 40 on the sprite. Seems to work ok but I couldn't get CSS to allow scaled background on a sprite, so I needed to render in two scales.
Here is a test app with an oscillator hooked up. Works on iPad and Chrome.

The way web audio does envelopes is quite interesting, most of the parameters can have an array of envelope or stepped segments that relate to the current context time. Should be able to emulate practically any eg.
Back to top
View user's profile Send private message
ian-s



Joined: Apr 01, 2004
Posts: 2578
Location: Auckland, New Zealand
Audio files: 42
G2 patch files: 611

PostPosted: Tue Dec 04, 2012 2:23 am    Post subject: Reply with quote  Mark this post and the followings unread

Did a little more work on the mechanics. Some issues though.

This example works as expected on Chrome (dont forget to turn up the filter frequency) but the fm seems to break the knob frequency update on iPad. Pity because it is fun to play with on iPad. I hope it is my code, not an issue with api. Trouble is it does not work at all on Safari for PC (even nightly) so I cant debug like I can with chrome.
Also the filter fm does not work. Docs say it is k-rate so should do something (update once every 128 samples I think) but nothing.
Should be able to do a filter lfo with the linearRampTo stuff used for envelopes.

Thinking about pwm, I could do a processing node to convert the sawtooth to a variable width pulse. Sync seems out of the question but might be able to do something with some old csound techniques.
Back to top
View user's profile Send private message
ian-s



Joined: Apr 01, 2004
Posts: 2578
Location: Auckland, New Zealand
Audio files: 42
G2 patch files: 611

PostPosted: Sat Dec 08, 2012 12:48 am    Post subject: Reply with quote  Mark this post and the followings unread

Might put this on hold for a few months. the .connect(audioParam) seems to be completely broken in mobile safari and works with oscillator.frequency but not filter.frequency on Chrome. Early days yet though.

In case anyone is interested, the final version to test modulation is here. Also worked on slide switch control and knob pointer Laughing
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic
Page 1 of 1 [10 Posts]
View unread posts
View new posts in the last week
Mark the topic unread :: View previous topic :: View next topic
 Forum index » Discussion » Schmooze
Jump to:  

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You can download files in this forum
e-m mkii

Please support our site. If you click through and buy from
our affiliate partners, we earn a small commission.


Forum with support of Syndicator RSS
Powered by phpBB © 2001, 2005 phpBB Group
Copyright © 2003 through 2009 by electro-music.com - Conditions Of Use