Generating A Tone Article Over At VoyagingMind

I quickly put together a little tutorial on how to generate and play a synthesised tone using the HTML Audio tag. Ok it only show how to generate a simple sine wave and play it. The goal was to provide a simplest possible example to get people started.

He is the link to it

Iteration 22, setting the frequency of the tone.

Seems like a productive weekend here. I got another evening of coding in. Tonight I sorted out the rendering of nodes so they update with the change of wave form.

I also added the ability to change the frequency of the tone generated. that does lead to the question should I also display the frequency in the glyph. The name of the wave form is in some way redundant as the shape of the wave form tells you that information. It would be better to display the frequency as that is important information.

After that I am not sure what is on the list next. Part of me want to flesh out the Wave Form generator with more forms, like a pulse, triangle and so on but on the other hand that feels like I am heading deep into one type of node when I should be working towards allowing others. I also have not yet added a proper event system and without one of them having an undo command is going to be quite a bit of work, adding one in not trivial once the code base grows.

Iteration 19 adding some different wave forms

Instead of trying to think of catchy titles I have just decided to put the iteration number and the thing I have added this iteration. Iterations are small so not much will be added each iteration.

So the main feature for this iteration is you can now set the wave form of the signal generated. To do this click on the Wave form icon and use the drop down menu that appears to change the wave form from to either a saw tooth or a square wave.

I don't yet update the icon to reflect the changes. A task for another night and as the is just a play thing at the moment I don't mind publishing it when this is going on.

I also fixed a bug where pages did no load the first time. It was a school boy python typing mistake and strangely I did not notice until a few days ago.

I am also not going to link to the app in each blog entry instead I plan to add it to the side bar, just over there I think :)

Iteration 18, moving the icons

Another small update for iteration 18. You can now select and more the icons about the canvas. Err well now much else to say really. The connecting lines overlap the icons if  you shift them around in the wrong way.

It is pretty simple to put a solution in for the case with just one connector being used as an input but I prefer to wait until I have icons with more than on connector as input.

I also worked on build related stuff. Well when I say build it was more about writing a script that minified my JavaScript files using the google closure compiler thing. Pretty simple to use and worth getting in place straight away. The rest of the evening I plan on getting all my new JavaScript version of this app into subversion as at the moment it just sits on my desktop in a non backed up way. I think that is all the "admin" stuff out of the way and then I can just keep on turning out iterations for a while.

After the couple of weeks I have had it feels good to actually push out an new iteration even if it is a small one. With re-writing the app and many of my evening being consumed with other stuff it feel like I have not added anything new to it for some time.

Synth stuff, iteration 17 published

Yes I have been silent for a while. It seems for the past two weeks I have been pretty busy and not had that much time for coding.

In the small amount of time I have had I have tried to put it to good use. So what have I been up to.

Well first of all I have rewritten the app to use javascript rather than GWT. I am use JQuery to make my life a little bit better. The reasons for this are not at all technical and may seem a little bit of an odd way to make these sorts of decisions, I will eventually get round to writing about them in a blog entry. I spent about 3 evening recoding the synth app to javascript.

That was pretty quick but then but not a vindication of JavaScript being a more productive language more just I knew what I was doing this time! I also dropped Java on the server side and moved to python. Well if you are going to go for dynamic languages you may as well go the whole hog. This took a couple of hours to get set up nothing more as all I am doing is serving some static pages.

I should now be able to start to iterate again at a reasonable pace even if I am well behind where I hoped to be in October. The latest iteration is functionally equivalent to what was published previously - I hope.

Added little glyphs

Tonight, after a Taekwondo lesson, I returns to the synth app to get on with some drawing of some graphic elements. After playing with the canvas element in JavaScript for a couple of lunchtimes producing some simplistic code to draw some simple shapes is pretty easy.

In the period of an hour or so I was pretty productive. I have not done another upload partly because it is late and I really need to crash into the bed and partly because I want to get some connecting lines drawn between the graphic elements. Perhaps before the next release I will sort out some of the niggle with refreshing. My canvas does not redraw when I start the app.

A few very basic visual elements starts to make it feel like there is an actually app starting to develop here.

In other news I have added a twitter widget so you can see my twitter posts. I am off half a mind to tweet my progress and only do blog posts once a week or two on the progress of the synth app. I am thinking it will free up time to spend developing. Then again I type pretty quickly and producing these what I have been up to post takes very little time so I am not decided yet.

And Now Sample Rates

Ok this was pretty simple to add. The app now supports samples rates. Which is great, the little app and now generates a 3 second tone at varying bit quality and sample rate. Listen via headphones for your best listening pleasure!

So what problems did I hit? I struggled to get the HorizontalPanel to centre all my bits of text in the toolbar at the bottom. I ended up using a html table in UiBinder and then putting in GWT components into the columns. I don't think this is the best way to do it but googling does not reveal a better way to do it.

Other than that things are going smoothly.

The head phone on laptops is a little bit funny. I could not figure out why the tone sounded so bad until on the off chance I put in my headphones, fairly cheap ones, and the sound improved a great deal. Funny and I should have thought of it before. Of course it also meant tonight I could not work out why the sound was not playing and then realised the headphones where plugged in but not on my head... Yep I am having one of those days.

GWTCanvas

Yesterday after doing a quick sketch of the UI on the back of an envelope, well a notepad, I started to implement the initial draft of the UI for my little synth web app.

It went quite well. UIBinder seemed to do its stuff and I was in general happy with the outcome. It is clearly not going to stand the test of time but getting something rough and ready is the goal of these initial phases.

Then a little problem occurred. I am going to need to draw quite a bit in this app. The HTML canvas is a prime candidate to do this after all if I am going to require the audio tag then the canvas will be available on any browser my apps work in.

I look in the incubator project for gwt. Yep canvas support is there so I go ahead download and add it to the project. Add jars to a gwt project still takes a while for me. I then start to mess with the GWTCanvas element. Integrates fine into the UIBinder stuff and I get a simple box drawing. Then I decide to write some text to the screen. Oops GWTCanvas does not support text even though the HTML canvas widget does. As fair as I can tell GWTWidget only supports a subset of HTML canvas features because it works on Internet Explorer 6. Mmmm I think that is no good to me.

Searching the web and no alternative reveals itself. I am determined to not drop into Flash or use a Java Applet for this so what are my options.

Well I could stick my head in the sand and focus on other stuff and hope with IE9 and FireFox 4 round the corner either the incubator project or someone else will provide a wrapping for the HTML canvas sometime in the near future. Or I could do a very minimal wrapping and use it as chance to learn about this area of GWT. It would be minimal in the sense as soon as an alternative wrapping appeared I would switch.

The geek in me is pulling me towards the minimal wrapping but I think I will work on it in parallel with other features to help keep my focus and not get lost in geeky coding fun.

Build 13 of the Synth App.

Yep we have reached build 13. That is I have done 13 uploads to the google app engine for this little idea/site. From a users point of view not a lot has changed over the past couple of days but from my perspective quite a bit has changed.

I hooked in the basics of the browser history support. While the single button does not need history support  it force me to get an understanding of the problem so hopefully avoid problems in the future. Currently my view is the app will be fairly light on back button support, a bit like gmail is.

I also rewrote the UI to use UiBinder. Ok move a button and a link across to UiBinder is not a big deal but it has removed the I have never used UiBinder so it must be hard thoughts. It is not hard, in fact it is quite easy.

So far I have been finding GWT quite nice to use. I feel I have enough Java UI experience with Swing and Android that learning the UI part of GWT is turning out to be fairly easy. I may well eat my own words at some point in the future!

A Front Page

This evening I spent a little time creating a front page for the synth app. Ok it is currently only a simple press a button and generate a tone but still every app no matter how small needs a page to introduce it!

This is now uploaded so people can play with err the new html page... Ok it is not much use/fun. Next up was some house work on the code. First I had to tidy up and take out lots of hacks/ in-efficient code to drastically reduce my code base and get some sane names on class files.

Then I spent a while setting up revision control. Subversion is my poison and perhaps my brain is not working very well but it took ages to get subversion to ignore some directories I wanted ignoring. So long was spent in that problems that there was not much progress after that.

My next task is to set up a framework to handle the back button. At the moment the app does not need it but I have read enough times that it is a pain to implement later on. So I will implement it when I don't need it and have it right from the start.

After that perhaps my most important task of the next few weeks. Getting some tests written. When starting a new project I find writing tests in the early stages is good, once I am out of the prototype stage that is, because if I leave it later my tests never seem to catch up with the code base and important bits of code are untested.

This is going to take a fair number of evenings, particularly as some evening are fairly full at the moment. My short term goal is to get much of this set up out of the way by the 10th of September and then start 3 weeks of rapid iteration on app.

Small update

As mentioned in the last post I am messing with sound synth in the browser via GWT, I posted another little update that to provide a link to download and save the generated file. See here.

Ok it just uses a href tag where I embed the generated wave into the src tag, if the truth be known I am a little out of depth with all this html/browser stuff and I thought this was going to take ages for me to figure out. The fact I got it in a few minutes is quite nice.

So if you click the play sound button to generate the sound a link should appear to let you download the sample, via right click and the download link as option. One thing it does, on Firefox, linux and I suppose all other browsers, is default to an odd (random?) name in the save dialogue. I could not figure out the option to set this if it is possible.

GWT and sound synthesis

I have been a little quite of late. August is meant usually a time when I spend lots of time with the children so is usually a slow month for anything. Weather has not been great this year which has making the usual outside activities a little bit less fun.

I have written a few post which I doubt I will publish. They were really for figuring stuff out in my head. The end result is I am probably going to attempt to make a  little web app in the area of sound synthesis. Although I am not 100% sure on the direction it will take.

So with this in mind I fired up eclipse and have spend a few days attempting to work out how to use gwt to generate and play a sound. Using HTML5 playing a sound is quite simple.

If you want to synthesise a sound first you have to base64 encode the wave file and then attach it as an inlined file. Terminology may not quite correct there as I am still learning all this.

The fun part is you have to actually work out all the headers to wav files for yourself  as Java in GWT does not provide any sound api's to help you. I really just want to say to some api, here is my array of normalised double and this is the sample rate, go play the sound.

I got the code working and the results were a little noisy. I got the occasional spitting like noise on the play back. Not exactly what I wanted. As most of the code had been tested with real Java I was fairly confident in my code and decided to publish it to app-spot (google app engine) on the hunch it was a browser thing.

Turn out I was correct. FireFox on ubuntu plays back the sample with a spitting noise. Chrome make no noise at all, I guess it does not yet support wav files or the HTML5 tag. Opera on the other hand played it back perfectly. On windows FireFox played it back perfectly and I did not test other browsers. No access to a mac to check on those systems.

I am not surprised support is patchy as the Audio tag is fairly new and it maybe I am doing something in an incorrect way.

Here is the link if you wish to hear what I have been up to.

Amazon delivered Essential GWT today so I am going to spend some time studying that book over the next week or so. Will do a mini review once I have read it.