Sam Bellen

I'm a software engineer at @madewithlove. I like playing around with the web-audio-api, and all things front-end related.

This article was originally published here. I’ve written this article because designers often forget to look at a design from a more structured, or developer point of view. I’m not saying that a designer should be able to build a UI, but understanding the basic principles will often keep your frontend developer happy. The way we build frontends is constantly evolving, but can this be said about the way we design user interfaces? It looks like the way we design a UI has stayed more or less the same. We design every page of the UI in a…

These days almost every phone has a personal assistant, and every major online company is looking into chatbots. In this article I will explain how you can create an online Siri-like personal assistant using JavaScript. The 3 main tasks this assistant should be able to do are: Listen to user voice input Understand and interpret spoken language Give a spoken reply to the user Let's start with the first point, give the assistant some spoken commands. With the SpeechRecognition api we can listen to the user, and translate spoken commands to text. This api is currently only supported by Chrome,…

Have you ever wondered how you can record your microphone using javascript? Since the MediaRecorder api landed in browsers it became very easy to do so. To start we'll need to get access to the microphone. We can do this by using the getUserMedia method. navigator.mediaDevices.getUserMedia({audio: true}).then(stream => { // All went well, here is an audio-stream of your microphone }, error => { // Oops, something went wrong or your browser does not support mediaDevices.getUserMedia }); Calling getUserMedia will return a promise, which when resolved will return an audio-stream of your microphone. We will need this stream when creating…

I've recently started creating an online audio editor. One of the features I wanted to implement was to create a waveform for each track in the editor. This gives a nice overview of the content of each track. While recording a new track, it would be cool to visually see the the waveform you're recording so I decided to generate a waveform in realtime while recording a new audio track. Below I will go through the basics of how you can create such a waveform from your audio input device. To get ahold of the microphone audio in a web…

This year has been the year I started talking in front of a public. It all started at the end of last year when I gave my first public presentation at the Fronteers meetup in Belgium. I decided that I wanted to learn more about the web-audio-api, and set myself the goal of making a presentation about it. Since I'm a guitar player I quickly ended up trying to recreate some effects and applying them to the sound of my guitar in real-time. Of course all in the browser. This turned out to be something people like to hear about,…

Sometime you have to create a lot of css classes which are basically the same, except for one property (color, size, content, ...). This is an annoying task, but luckily, it can be done with some scss/sass magic. I use the following technique to generate modifier classes, often used for products, iconfonts, etc. Imagine, you're creating a website for a company who sells t-shirts, these t-shirts come in all kinds of colors. Now If you want to change the text-color to match the color of the current t-shirt's color, you could start to create a bunch of classes. .shirt { /* Basic…

Update: Since I wrote this blog, the let's encrypt team has been hard at work, and the way to install let's encrypt described below might be outdated for your setup. You might however find some useful info in this article, so please read along. Let’s Encrypt recently came out of it's closed beta, and is available for the public. If you don't know what Let's Encrypt is, here is how they describe themselves. Let’s Encrypt is a new Certificate Authority: It’s free, automated, and open. Basically, they provide you with free SSL certificates. Note: I'm not a…

I've recently given a presentation about the web-audio-api and web-midi-api. For this talk I wanted to visualize audio waves to see how certain audio-nodes impacted these audio waves. To do this, I created a small javaScript plugin to create an oscilloscope. You can find this plugin on github, and see an example here. To visualize an audio wave, create one, for example with an oscillatorNode. Second create a new oscilloscope instance and connect the oscillator to the oscilloscope. // Create an audio-context var audioContext = new window.AudioContext(), oscillator = audioContext.createOscillator(); oscillator.type = 'sine'; oscillator.frequency.value = 400; oscillator.start(); // Create an…