Build your own radio streaming app with Howler.js 🔊

Using Howler.js to build a lightweight streaming radio app.

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

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.

• The Walking Dead
• Spacecraft for All
• Now you see me
• Mix The City
• Finding Home
• Breath Slowly
• Ba Ba Dum
• Unwind.fm
• Evolution of Trust

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.

• ReactPlayer
• wavesurfer.js
• jPlayer : HTML5 Audio & Video for jQuery
• Sound.js
• SoundManager 2: JavaScript Sound for the Web

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.