Goal — Build your own radio app streaming stations of your choice using Howler.js.

What is 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.

Features

Single API for all audio needs

Defaults to Web Audio API and falls back to HTML5 Audio

Handles edge cases and bugs across environments

Supports all codecs for full cross-browser support

Automatic caching for improved performance

Control sounds individually, in groups or globally

Playback of multiple sounds at once

Easy sound sprite definition and playback

Full control for fading, rate, seek, volume, etc.

Easily add 3D spatial sound or stereo panning

Modular — use what you want and easy to extend

No outside dependencies, just pure JavaScript

As light as 7kb zipped

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.

A web Music player

Use 3D spatial sound for gaming and web stories

Music Instruments

How you 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



src: '

format: ['mp3', 'aac']

}); var sound = new Howl({src: ' http://prclive1.listenon.in:9960/?fbclid=IwAR1bAO9Hf-yvOGrjKVVdYt0XXnqo85o1G2IXWrzVtjIujOit5JqW7oQUtfI' format: ['mp3', 'aac']}); sound.play();

Building a Radio application

You can check Live app here. I added some Indian stations, which I like.

Listening Radio Mirchi 😃, check out the app here

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:

Basic understanding of Html, Javascript

Let’s look at the code for our small radio app. We are creating a Radio variable to basically doing 3 things.

Populating channels and binding events

Code for playing the station

Code for stopping the station

Display logic

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.

How to find a streaming URL for a radio station?

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.

Awesome Howler.Js

Let’s see some awesome things which used Howler.js. Maybe it’ll give you some inspiration.

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.

Other sound libraries

Howler is the most popular audio library on NPM with more than 12k weekly downloads. Let’s see some other popular libraries too.

Wrapping up

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.

Building A Web Or Mobile App?

Crowdbotics is the fastest way to build, launch and scale an application.

Developer? Try out the Crowdbotics App Builder to quickly scaffold and deploy apps with a variety of popular frameworks.

Busy or non-technical? Join hundreds of happy teams building software with Crowdbotics PMs and expert developers. Scope timeline and cost with Crowdbotics Managed App Development for free.