“It’s going to be the coolest thing ever.”
You know enough by now to be doubtful when a client makes this statement, but you’re willing to entertain the idea that this may not, in fact, be a tragedy in the making.
“It’s going to be a music machine – like, full keyboard and everything – but each of the keys is going to be mapped to – wait for it – cat sounds! We’ll call it the ‘Meowsic Machine’! Oh, and we need it to be accessible to everyone via the Web. Which is easy, right?
You are reminded that the universe can be a cruel place.
It’s now your job to make this happen. Over the course of a few posts, we’re going to look at the Web Audio API, and build the Meowsic Machine together. In the process, we’ll also enjoy a dalliance with Vue.js, and dip our toes into the deep-end with Web Workers. Today, we take the first step in this historic journey—convincing the browser to actually let us play sounds.
In a hurry? You can now use our HUp jquery plugin to read files in a chunked fashion as data URLs. Hooray!
Got a minute or two? Let’s talk about file read chunking, data URLs and base 64.
If you’ve been looking forward to the previously promised discussion about file reading/downloading to/uploading from IndexedDb – well, keep looking forward, it’s on the way. In the meantime, however, let’s take a quick look at a problem and it’s quick and easy solution, that emerged out of making file reading chunkable for the HUp plugin.
It’s a pleasure to be able to interact with files in the browser at long last, isn’t it? Reading files in without needing to bounce them against the server first opens up a lot of possibilities – and getting progress from a chunked ajax upload is miles away from the indeterminate form uploads of days past.
Last time we touched this subject, I shared an (admittedly rough) jQuery plugin that allowed you to enjoy HTML5 ajax uploading and file reading with the familiar event interface, and convert any element into a drag-and-drop target.
At the request of reader Mateusz, let’s revisit our HUp plugin, and polish it up a little by adding a new feature – the ability to filter files to be read/uploaded by their file size, and/or their mime-type.