
Goal — Build your own radio app streaming stations of your choice using Howler.js.
If you are working with audio (ex-radio station, music player) on the browser, you should look into Howler.js. Howler.js is an audio library for the modern web. It uses Web Audio API and falls back to HTML5 Audio. This makes working with audio in JavaScript easy and reliable across all platforms. Howler.js is developed by James Simpson.
Howler.js provides audio support for the new Facebook Instant Games platform. HowlerJs is full of features and simple to use.
You can build so many things using it. I include a few examples below and also I mention some apps at the end of the article which use Howler.Js.
Howler provides rich APIs for working with Audio. Let’s look at the most basic usage. Import Howler.js CDN and use it with below code.
var sound = new Howl({
src: ['sound.mp3']
});
sound.play();
Basic Streaming audio
var sound = new Howl({
src: 'http://prclive1.listenon.in:9960/?fbclid=IwAR1bAO9Hf-yvOGrjKVVdYt0XXnqo85o1G2IXWrzVtjIujOit5JqW7oQUtfI',
format: ['mp3', 'aac']
});
sound.play();
You can check Live app here. I added some Indian stations, which I like.
Now that we know how to handle audio from a single URL source. Let’s build a minimal radio app which will manage 5 stations.
Prerequisite:
Let’s look at the code for our small radio app. We are creating a Radio variable to basically doing 3 things.
You can check out the code for populating stations and binding events. It’s pretty easy.
Let’s look at what we are doing in **play()**
function.
We already defined our stations in an array below and you can see every station has a**‘howl’**
attribute with **‘null’**
value. In **play()**
function, we are creating this variable for every station. If the object already exists, then we simply resusing it.
You can see we are using mp3, aac format. Howler.js selects the first compatible sound from your array of formats.
if (data.howl) {
sound = data.howl;
} else {
sound = data.howl = new Howl({
src: data.src,
html5: true,
format: ['mp3', 'aac']
});
}
**Full code — **Check out the full code here and add comments on this article, if you don’t understand anything. Things are pretty simple and show the simplicity of howler.js.
One more thing is finding the streaming URL of your favorite radio station. So, let's find the URLs for stations listed on Internet-radio, which has over 33k stations. Simply select a station, click on the pop-up and then right click and view page source. then find a link with stream keyword. That’s it. To verify it, just open the link in new tab, it should stream the station. You can learn more here.
Let’s see some awesome things which used Howler.js. mMybe it’ll give you some inspirations.
People are building creative things using howler.js. So what are you waiting for? Create something full of music and show us in the comment section. You can check full showcase here.
Howler is the most popular audio library on NPM with more than 12k weekly downloads. Let’s see some other popular libraries too.
Howler.js is an awesome library. It builds for Web Audio API and falls back to HTML5 Audio. It supports almost all the browsers and is easy to use. Howler supports auto caching and doesn’t have any dependencies. At 7KB, it’s very lightweight, with modular design. Howler is one of the best audio javascript libraries out there.
Now it’s your turn! Build something creative.
Originally published:
February 20, 2019