Giter Site home page Giter Site logo

Waud

Web Audio Library with HTML5 audio fallback.

Build Status npm version Code Climate Issue Count Support Waud on Patreon

Waud is a simple and powerful web audio library that allows you to go beyond HTML5's <audio> tag and easily take advantage of Web Audio API. It abstracts Web Audio API making it consistent and reliable across multiple platforms and browsers. It also falls back to HTML5 Audio on non-modern browsers where Web Audio API is not supported.

Features

  • Base64 Pack
  • Audio Sprites
  • iOS Audio Unlock1
  • Auto Mute2
  • Simple API
  • Zero Dependencies

1 Automatically unlocks audio on iOS devices on first touch.

2 Automatically mutes audio when the window is not in focus (switching tab, minimising window, etc).

Installation

Available via npm, cdn and haxelib (for haxe users).

NPM

Example

Example:

var snd = new WaudSound("assets/loop.mp3", { autoplay: false, loop: true, volume: 0.5, onload: playBgSound });

Base64 Data URI

Waud supports base64 decoding across all browsers including IE 9 and I recommend using this over audio sprites.

Use waudbase64 to generate base64 encoded JSON file.

npm install -g waudbase64

var base64pack = new WaudBase64Pack("assets/sounds.json", _onLoad);

function _onLoad(snds) {
  snds.get("assets/beep.mp3").play();
}

Waud also supports passing data URI string to WaudSound.

//Note that the data URI used below is a sample string and not a valid sound
var base64Snd = new WaudSound("data:audio/mpeg;base64,//uQxAAAAAAAAAAAAASW5mbwAAAA8AAABEAABwpgADBwsLDxISF");

Audio Sprite

Use waudsprite to generate audio sprite.

npm install -g waudsprite

var audSprite = new WaudSound("assets/sprite.json");
audSprite.play("glass");

Live Audio Stream

Waud Radio

Waud supports live audio streams, but make sure to disable web audio as live streams can only be played through HTML5 Audio.

var snd = new WaudSound("http://ice-sov.musicradio.com/SmoothUKMP3", { autoplay:true, webaudio:false });

Browser Support

Tested on all major browsers.

Safari Chrome Firefox Edge IE Opera
Latest ✓ Latest ✓ Latest ✓ Latest ✓ 9-11 ✓ Latest ✓

Browser & Device Testing provided by:

BrowserStack

Issues

Found any bug? Please create a new issue.

Demo

Usage

// Initialize Waud. Make sure to call this before loading sounds.
Waud.init();

// To automatically unlock audio on iOS devices by playing a blank sound.
// The parameter is a callback function that can be used to start playing sounds like background music.
Waud.enableTouchUnlock(touchUnlock);

// Use if you want to mute audio when the window is not in focus like switching tabs, minimising window, 
// etc in desktop and pressing home button, getting a call, etc on devices.
Waud.autoMute();

// Load and play looping background sound with autoPlay and loop set to true.
// Note that this will not play automatically on iOS devices without touching the screen.
var bgSnd = new WaudSound("loop.mp3", {
    "autoplay": true,
    "loop": true
});

// Touch unlock callback for iOS devices to start playing bgSnd if it's not already playing
function touchUnlock() {
    if (!bgSnd.isPlaying()) bgSnd.play();
}

Sample Rate

  • It is recommended to use same sample rate for all the audio files. Playing different sample rate files can cause issues on some devices.
  • By default, Waud uses 44100 sample rate. If your audio files have a different sample rate then specify it using Waud.preferredSampleRate property.

Licensing Information

MIT license

This content is released under the MIT License.

Contributor Code of Conduct

Code of Conduct is adapted from Contributor Covenant, version 1.4

Waud's Projects

waudconvert icon waudconvert

Utility to convert audio files from one format to another

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.