Quantcast
Channel: Hacker News 50
Viewing all articles
Browse latest Browse all 9433

howler.js - Modern Web Audio Javascript Library - GoldFire Studios

$
0
0

Comments:"howler.js - Modern Web Audio Javascript Library - GoldFire Studios"

URL:http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library



Browsers have come a long way over the years, and we are now able to achieve amazing results using all of the great new technologies often referred to as HTML5. However, generally speaking, audio still sucks. Thankfully, Google decided to create Web Audio API and make all our lives easier. The problem is that only the latest browsers support this new-fangled browser audio, so what are we to do?

We were presented with this very question while developing our new HTML5 game and set out to find a library that provided the functionality we needed, without all of the bloat, while still supporting the majority of browsers. Unfortunately, we didn't find anything that met our needs. So, we decided to create our own library and open source it. This library works great for games, but it can work just as well for any other audio-related web app.

Features

  • Defaults to Web Audio API
  • Falls back to HTML5 Audio
  • Supports multiple file formats to support all browsers
  • Automatic caching for Web Audio API
  • Implements cache pool for HTML5 Audio
  • Per-sound and global mute/unmute and volume control
  • Playback of multiple sounds at the same time
  • Easy sound sprite definition and playback
  • Fade in/out sounds
  • Methods can be chained
  • Uses no outside libraries, just pure Javascript
  • Lightweight, 5kb filesize

Documentation

Examples

Most basic, play an MP3/OGG:
Play Pause Stop Loop

var sound = new Howl({
 urls: ['sound.mp3', 'sound.ogg']
}).play();

More playback options:
Play Pause Fade In Fade Out
var sound = new Howl({
 urls: ['sound.mp3', 'sound.ogg', 'sound.wav'],
 autoplay: true,
 loop: true,
 volume: 0.5,
 onend: function() {
 alert('Finished!');
 }
});

Define and play a sound sprite:
Play 'blast' Play 'laser' Play 'winner'
var sound = new Howl({
 urls: ['sounds.mp3', 'sounds.ogg'],
 sprite: {
 blast: [0, 2000],
 laser: [3000, 700],
 winner: [5000, 9000]
 }
});
// shoot the laser!
sound.play('laser');

Properties
  • autoplay: Boolean(true by default) Set to true to automatically start playback when sound is loaded.
  • loop: Boolean(false by default) Set to true to automatically loop the sound forever.
  • sprite: Object({} by default) Define a sound sprite for the sound. The offset and duration are defined in milliseconds.
// Sound sprite definition format
{
 key: [offset, duration]
}
  • pos: Number(0 by default) Position to start playback from in milliseconds.
  • volume: Number(1.0 by default) The volume of the specific track, from 0.0 to 1.0.
  • urls: Array([] by default) The source URLs to the track(s) to be loaded for the sound. These should be in order of preference, howler.js will automatically load the first one that is compatible with the current browser.
  • onend: Function(function(){} by default) Fire when the sound finishes playing (if it is looping, it'll fire at the end of each loop).
  • onload: Function(function(){} by default) Fires when the sound is loaded.
  • onpause: Function(function(){} by default) Fires when the sound has been paused.

Methods
  • play: Begins playback of sound. Will continue from previous point if sound has been previously paused.
    • sprite: String (optional) Plays from the defined sprite key.
  • pause: Pauses playback of sound, saving the pos of playback.
  • stop: Stops playback of sound, resetting pos to 0.
  • mute: Mutes the sound, but doesn't pause the playback.
  • unmute: Unmutes the sound.
  • fadeIn: Fade in the current sound.
    • to: Number Volume to fade to (0.0 to 1.0).
    • duration: Number Time in milliseconds to fade.
    • callback: Function (optional) Fires when fade is complete.
  • fadeOut: Fade out the current sound and pause when finished.
    • to: Number Volume to fade to (0.0 to 1.0).
    • duration: Number Time in milliseconds to fade.
    • callback: Function (optional) Fires when fade is complete.
  • loop: Get/set whether to loop the sound.
    • loop: Boolean (optional) To loop or not to loop, that is the question.
  • pos: Get/set the position of playback.
    • position: Number (optional) The position to move current playback to.
  • sprite: Get/set sound sprite definition.
    • sprite: Object (optional) See above for sound sprite definition.
  • volume: Get/set volume of this sound.
    • volume: Number (optional) Volume from 0.0 to 1.0.
  • urls: Get/set the URLs to be pulled from to play in this source.
    • urls: Array (optional) Changes the source files for this Howl object.
  • on: Call/set custom events.
    • event: String Name of event to fire/set.
    • function: Function (optional) Define function to fire on event.

Global Methods
The following methods are used to modify all sounds globally, and are called from the Howler object.
  • mute: Mutes all sounds.
  • unmute: Unmutes all sounds and restores them to their previous volume.
  • volume: Get/set the global volume for all sounds.
    • volume: Number (optional) Volume from 0.0 to 1.0.

Viewing all articles
Browse latest Browse all 9433

Trending Articles