Simple Audio Sequencer (save/open feature)

Question

I have a simple audio sequencer application using javascript and HTML5. The goal of the application is to let users make a beat and save it so other people can open it up, add on to it, then re save. The issue I'm having is the save/open feature. How Do I add this? Or at least where can I start looking fro this solution?

Answer 1

If you are asking for an only-JS solution to this:

• Opening Files

You can use the FileAPI to open the files from your users local machine, as long as its your users who are selecting the files manually(you are not digging into the file system yourself).

Here is nice demo for this functionality: http://html5demos.com/file-api

• Saving Files

However, saving files was a W3C recommendation that got ditched so your only choice here is to allow your users to download the file. See this relevant question I made some time ago

Answer 2

If I were doing this for a class or prototype I might use PUT or POST requests to save the beat sequence in json form to a web server. When it's time to save your work, take your beat sequence data, convert from a js (I presume) object to a json string and PUT it to an appropriate url on your server. Give it a name and use the name in the url path, like "myserver.com/beats/jpbeat1.json".

When you want to retrieve that beat, issue an HTTP get to the url you saved. You can, of course also maintain and rewrite a directory page in json or html, or you can just navigate the directory offered by your web server. Most developers will think this crude, I imagine, but in a race for time, crude can be good if it meets the requirements.

Choose a web server, the easiest one for you. I might use Amazon S3. Costs money, but available to the internet, has authentication, security features, and supports http GET, PUT of static files. There are many other site hosting services.

For a local install, I might use Node.js. Also very easy to set up to serve static content. For example, the Express framework has static content service and easy examples how to set it up if you are comfortable with Javascript. With Node, you can make the site a bit fancier, by writing server side code to maintain an index, for example. Any real world implementation would require at least some server side code.

There are many other choices. Most developers would want a database, but you don't have to have one if simple files are ok for your class project. It all depends on your requirements.

I hope those ideas are helpful.