Notes on Web Audio Hackday Singapore 2016

The last installment of notes from my DevFest Asia 2016 trip! Here’s the official day website.

We did three brief presentations:

  • someone (I forgot his name, sorry 😳) introduced BandLab, which is an online service that lets you compose music and also collaborate on it, all together (a bit like “git but for music” except they didn’t use “fork” because it can sound “funny”). Very interesting project, it was enlightening to hear the features that are available depending on specific platforms and limitations, and also how they do use real instruments in their user testing because this is more of a tool to help musicians, not a tool to replace them
  • Matt McKegg introduced the Web Audio node school workshop, for anyone who wants to learn Web Audio but doesn’t know how / where to start
  • And I introduced the MediaRecorder API (here’s an article I wrote), and an experiment I had built for this hackday

This hackday was small, and I didn’t get to stay until the end to see the projects that people worked on, as I had to catch my flight to Australia, but it was good to catch up with Matt, Joshua and Chinmay and learn what they have been up to recently.

For example, Matt has been busy building Ferment, a sort of decentralised peer to peer website/app/service/whatever to share music from creator to creator. It’s built with Electron, Scuttlebot and also WebTorrent—I find it super interesting! I have watched a few talks on all these concepts before but I hadn’t really seen any application that “clicked” everything in place like this one. It’s super exciting to consider that each time you listen to a song you’re becoming another peer and can share it with more people, making the song way more accessible to more listeners. I am already using it, what about you?

Joshua has a folder full of Work-In-Progress projects so there’s no point in me listing all of them—but he’s recently been working on controlling the speed of videos using a bezier curve editor. He was super cool and tried to combine that with MediaRecorder but we found a bug, ooops! Here’s the bug report 😎

I also had the chance to talk to more local developers, and again I was terrible at catching names, but it was fun to see what other people are building with or using Web Audio for. Someone had built a sound board of silly sounds when she was bored with something else, someone else was using Pedalboard.js to experiment with applying live sound effects to the output of his electric ukulele without carrying a whole bunch of hardware with him.

One demo: two new bugs!

I thought that since I was going to the Web Audio Hack Day here in Singapore, it would be great to have a more Web Audio focused Media Recorder demo, so I built a little demo that essentially asks for audio permission, then records a short clip of audio, decodes it as an audio buffer and uses it to loop a BufferSourceNode in Web Audio.

You wouldn’t believe what happened next… or would you?

Two Things That Happened When Sole Ran This Demo

1. Chrome Canary Just Totally Gave Up

Aw, snap!

I filed a bug, since there wasn’t really much I could do…

2. Nightly Sometimes Insisted In Returning Some Mysterious 596 Samples Length Which Was Totally Not What I Expected, And Did So Without Following Any Meaningful Reproducible Pattern

596 samples for some reason

I tried to dump the contents of the returned blob once read as a buffer, using String.fromCharCode–perhaps looking at binary data while having my breakfast coffee would enlighten me?

I eat hex dumps for breakfast

As it turns out, no. So I filed another bug.

Try this yourself maybe?


The demo is here: instalooper (sources) … just in case you want to play with the code–maybe it will be fixed next month, who knows!!? Or maybe it is just a bug in my machine and it works in everyone else’s!

Disclaimer: I have not tested this anywhere else than Nightly and Canary. So I’ve no idea of how it works (or not) in mobile.

I have a more complicated version that not only loops the sample but also randomly changes its playback frequency. Sometimes the generated sounds are strangely fascinating. It still needs a bit of interface work, but hey… watch out, Steve Reich! 😎

And now… time to prepare to go to the airport and fly to Melbourne for JSConf.AU! More jetlag, YAY!

Article about the MediaRecorder API in .net magazine

MediaRecorder article picture

I wrote an article on the MediaRecorder API for .net magazine issue 283.

This isn’t an exhaustive article, just a little advance on what the API can do, as part of the Standards section that tracks new and upcoming APIs. If you want to learn more about the MediaRecorder API, there’s the way more detailed Hacks article I wrote: Record almost everything in the browser with MediaRecorder, or maybe you can watch one of the talks I’ve given on the subject, like this one.

A first for everything: Greece, Denmark, Norway

Writing this with a very slow connection in Thessaloniki, Greece (ahhh, hotel internet).

I am very excited that my Greek studies are finally coming in handy and so I can read the street signs even if they’re written using the Greek alphabet. It sort of reminded me to last year when I was in Hong Kong and couldn’t read the signs… except now I can! Yay!

I arrived yesterday after a terribly early flight–but then it was well past noon because of the +2h timezone.

Kostas, one of the organisers of DEVit, helped me get a SIM card and he was OK with me telling the world that it took us an hour and a half to get it working with data, because all of the processes they require. I think we did three queues and had time to go for lunch and go back. We also had to enable the Greek keyboard on my phone in order to send a text to the operator containing the Greek ‘y’ (which is not the same as the English keyboard ‘y’), and then it would send me 5 texts in response, confirming whatever it is the ‘y’ meant (I mentally read it as “why?”) with a lot of ALL UPPERCASE Greek paragraphs.

I will just say that in London you can turn up at a shop and buy a SIM with pre-paid credit in 5 minutes, so if I didn’t come from Spain where these processes are similarly ridiculous, I would have been wildly amused.

I re-learnt the most important sentences:

  • παρακαλω = parakalo = please
  • ευχαριστωσ = eucharistos = thanks

and last but not least: χαχαχα = hahaha = jajaja 😃

This is also my first time in Greece so I don’t quite know what to expect, but so far it seems welcoming, nice and sunny, full of interesting things to look at, and also very busy. I did try a gyros and I’m looking forward to trying out the Greek coffee: “cooked!”. Will report.

Side note: for a Spanish speaker, hearing spoken Greek in the background is funny: your brain thinks it can understand it because the cadence is very similar to Spanish and many Spanish words are of Greek origin, but then it starts to pay attention and realises it actually can’t.

I’ll attend the NodeJS/Ruby synergy meetup this evening… be sure to say hi and bring all your synergies and thoughts out of the box!

Next week I’ll be in Denmark for AtTheFrontEnd and the following week will see me in Norway for WebRebels. I’ve not been in either country before, so those will be another two first times for me, but if they’re anything like Sweden or Finland I’ll be more than happy.

I’ll be talking about MediaRecorder and how you can now generate video in the browser, natively, without plug-ins. If you are interested in real time audio or video processing, my talk will be relevant to you 🙂

Two for one

I attended Web Progressions in London last week. But before that, and before the break, I also attended JSConf Uruguay. So what could be better than two conference posts in one?

None of the conferences have posted the videos of the talks yet, but here are my highlights of both events, just in case you wondered:

JSConf Uruguay

This was my first time in South America so everything was unusual and new but also familiar at the same time, like a mixture between Spain and Italy, e.g. when waiters would reply with “¡Por favor!” which sounds like a literal Italian-to-Spanish “Prego!” 😀

I liked the meats, but utterly despised the coffee. Pretty sure I got caffeine withdrawal during that trip. The lack of punctuality also got on my nerves; nothing happened at the time it was supposed to be happening, much to my dismay. It was joked that I might have become “too English” 😒

I talked about MediaRecorder, in a demo-filled version in Spanish of my Hacks article: Record almost everything in the Browser with MediaRecorder. Since I am a native Spanish speaker I thought it would be a bit silly to give the talk in English and have it simultaneously translated to Spanish to a Spanish speaking audience (there were interpreters on the conference as most of the speakers were not Spanish speakers), so I did the talk in Spanish. I think it went well even if I get a bit confused with some terms in Spanish 😎

My favourite talks were not really on JavaScript per se but applications of it. Which makes sense if you think of it; you don’t generally get excited talking about dictionaries or grammars, but you do get excited talking about books, poems, plays…

The top talk for me was decidedly Irina Shestak’s talk on cellular automatas. It was super inspiring and got me thinking about a number of ideas. They will eventually materialise into something, but I can’t quite predict what. The other thing I liked was how she talked about finding inspiration not in front of a screen, which I think is something we all should practice more often. Not finding inspiration, because you can’t force it, but you can set the conditions by getting out of your usual habitat…

I also liked the talk from Ben Vinegar on collecting JS errors–it made me realise we’ve come a long way on catching and debugging errors.

The talk on building “UI” apps with “Blessed” (it took me a bit to realise the meaning versus the classic UNIX “curses”) made me want to build a CLI-UI app even if I have no need to, so that was good, I guess? (or maybe not).

It’s not because he’s my colleague, but I also enjoyed Mike Taylor’s talk on web compatibility and “why everyone deserves orange juice”, with a number of suggestions for building sites that don’t break in systems other than the developer’s. But the question on everyone’s minds (including mine) was: why “web compat” and not “web compatibility”?

Another cool talk was Alan Souza’s React + SVG accessibility talk. So cool to see React used to build SVG which is in turn used for more than just icons! I was also deeply embarrassed/irate that some people were making fun of the screen reader each time Alan showed a demo. Really? What a lack of respect and empathy for people with disabilities.

Myles Borins’ talk on node.js releases was a good introduction as to how is it supposed to work now that there’s a foundation and it’s all ‘srs bsnss’. I also asked him lots of questions before his talk so maybe I knew more than the audience. But I’m sure he’d love to answer your questions if you ask him because he’s a nice person anyway.

Rod Vagg’s talk was good as well and since it was a keynote, it was meant to have a Q&A bit, but instead of handing a microphone to the audience, they would use a moderator tool. I had high hopes as I had what I thought would be good questions which I submitted through the tool, and they were voted up by people (proving that they were interesting). But come questions time, they projected the tool on screen and some cretins thought it would be the perfect trolling time, and started submitting stupid questions, and other simplistic people voted for them. In a futile attempt to stop the trolling, the moderators deleted the stupid questions… and accidentally also some of the good questions including mine. Bah 🙁

Web Progressions

And now we fast forward to last week and London, exactly to Web Progressions, held in fashionable trendy Shoreditch, home to the highest number of pop up everythings and probably the most rolled-up jeans per capita in the entire UK, amongst other things such as delicious coffee. Yum!

My talk was about HTTPS, why it’s important to serve content securely for progressive web apps, and how to use Let’s Encrypt to get free certificates. People seemed to like it quite a lot and many told me they were looking forward to implementing it, which was very cool. Others said they wanted to build something that required https only so they could use Let’s Encrypt! And finally, others pinged me a couple days later confirming that they got so excited after the talk, they followed my guide and got it working already! Yay!

I was late to the conference so I missed the first talks. From what I saw, my favourite was perhaps Natasha Rooney’s on a future web without passwords, although it’s not clear to me how we will be able to migrate the one-time password “token” between browsers. It sounded a bit like a vendor lock-in in the horizon.

Jonathan Fielding’s talk on building responsive apps had also a bunch of good advice that should be common sense already, but sadly is not. I’m looking forward to seeing more talks from him! He had also volunteered to build the conference website! So thanks for that, Jonathan 🙂

The talk from Alex Sanders, on insights on building real-life progressive web apps at The Guardian, was super interesting and confirmed what we also suspect: Safari is slowing us down, as it doesn’t implement many of the features required to build fully capable web apps. Features such as, for example, Service Workers! Which are essential if you want to add push notifications, offline, background sync (in the future), etc. Boo Safari, but specially boo mobile Safari because users in iPlatforms cannot choose an alternative, more capable engine (whereas users of Android can switch to different browsers with entirely different engines–although… would the majority of not-tech-savvy users do it?).

The other issue is that there doesn’t seem to exist a progressive enhancement path for these features, so it is often not feasible to maintain two different codebases (or code paths) just to cater to all users. E.g. an appcache path and a ServiceWorker path.

I was also glad that Ruth John could finally do her Web MIDI talk without the projector going bananas and randomly flashing white noise for 10 minutes, as it happened in another conference recently. Yay MIDI and real time music on the web!

Belen’s talk on game development made me curious about playing with Phaser too, for no real reason than that it looks fairly easy and you can focus on building your game and not a game engine. It was also interesting that she gave “motivational” resources for people who cannot finish things or who think are not good enough to make a game.

Another thing that was cool was to meet old friends (hi Alastair!) and new old friends which I had only spoken to through via the Internet before (hi Charlotte!), and new people who I hadn’t met before at all. Overall a nice conference and I hope it keeps happening next year, so thanks to Daniel, Natasha and Bruce for putting it together!