Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Browser sound library which blended HTMLVideo and HTMLAudio and WebAudio

License

NotificationsYou must be signed in to change notification settings

CyberAgent/boombox.js

Repository files navigation

logo

日本語ドキュメントはこちら

"boombox.js" provides unified audio API for browser, such asHTMLVideo /HTMLAudio /WebAudio.

This library has simple API, likeboombox.

The browser correspondence table (2014-03-18) ishere

Why you should use boombox?

Web browseres haveHTMLAudio /WebAudio /HTMLVideo API for playing audio. However these API have diffrent way to use and browser have no compatibility.boombox.js provides unified API and solves diffrence enviroment between web browser.

In addition to this library has function for mobile web browser support, eg: stop to play sound when a web browser is inactive, handle multiple audio source.

WebAudio API has advanced feature like "Mixing sound" butboombox.js doesn't extend these feature. Because the library suppose basic usage.Howeverboombox.js doesn't restrict these features, you can extendboombox.js function.

Demo

Single Sound

Mix Sound

Sprite Sound

Features

  • Play
  • Pause
  • Stop
  • Replay
  • Resume
  • PowerON/PowerOFF
  • Volume
  • LoopReproducing
  • Playing Multi Sound
    • boombox.js supports this feature as far as possible but depends on web browser support.
  • CORS Settings
    • boombox.js has several configurations to observeCORS specifications.
  • Filterings
    • boombox.js divided out sound souces based on browser detection.
  • audiosprite is available and generation command.(boombox-audiosprite)
    • HTMLAudio/HTMLVideo/WebAudio support
  • File size is small(6kb at gzipped).

Reference information

OS/BrowserHTMLAudio or HTMLVideo load event
IOS 5: Safarisuspend
IOS 6, 7: Safarisuspend
Android 2.3: basicstalled
Android 4.0: basicloadeddata
Mac OSX: Chromecanplay

====

Mobile

OS/BrowserWeb AudioHTML AudioHTML Video
IOS 5 : Safari/chrome-✔✔ *1
IOS 6/7 : Safari/chrome✔✔✔ *1
Android 2.3 : basic-✔✔
Android 4.0 : basic✔ *2✔✔
Android 4.0 : chrome✔ *2✔✔

PC

OS/BrowserWeb AudioHTML AudioHTML Video
Windows: IE-✔✔
Windows: Chrome✔✔✔
Windows: Firefox✔✔✔
Windows: Opera✔✔✔
Mac OSX: Safari✔✔✔
Mac OSX: Chrome✔✔✔
Mac OSX: Firefox✔✔✔
Mac OSX: Opera✔✔✔

*1Can't support for starting another application.

*2 Some smart phones are supported.

====

OS/Browser1 sound2 soundmulti sound
IOS 5: Safari✔--
IOS 6, 7: Safari✔✔✔
Android 2.x: basic✔✔✔
Android 4.x: basic✔✔ *1-
Android 4.x: chrome✔✔✔

*1 HTMLAudio/HTMLVideo are used in combination.

Install

Download

You can downloadboombox.js orboombox.min.js from following links.

npm

$ npm install boombox.js

Bower

$ bower install boombox.js

component

$ component install CyberAgent/boombox.js

HTML

Loadboombox.js usingscript tag after download it.

<scripttype="text/javascript"src="YOUR/PATH/TO/boombox.js"></script><!-- for development --><scripttype="text/javascript"src="YOUR/PATH/TO/boombox.min.js"></script><!-- for product -->

boombox.js supportsrequire.js

Build

UseGrunt for build.

$ git clone https://github.com/CyberAgent/boombox.js.git$cd boombox$ npm install -g grunt-cli# If you haven't already installed grunt-cli.$ npm install.# If you haven't already installed local npm.$ npm run build

Browser Test

You can testboombox.js usingGrunt &beez-foundation.

$ npm install -g beez-foundation# If you haven't already installed beez-foundation that is web server.$cd boombox$ npm install.# Once at first if you don't install local npm.$ npm run start# Starting local server.

@seebeez

@seebeez-foundation

Access in your favorite browser

If you loadboombox.js in script tag:http://0.0.0.0:1109/m/boombox/spec/global.html

If you loadboombox.js using require.js :http://0.0.0.0:1109/m/boombox/spec/requirejs.html

Usage

Setupboombox.js

Setup method for usingboombox.js.

boombox.setup();

Use specify format of the sound sources forcibly

The option for forced use specify format of the sound sources.

{webaudio:{use:true},htmlaudio:{use:true},htmlvideo:{use:true}}

Load sound sorces

Load the sound sorce.

varoptions={src:[{media:'audio/mp4',path:'http://0.0.0.0:1109/m/spec/media/sound.m4a'}]};boombox.load('sound',options,function(err,audio){// callback function});

You can set multiple sound sources inoptions.src,boombox.js evaluateoptions.src from the beginningthen load sources if available to use.

Play sounds

boombox.play()// All of loaded sounds.boombox.get('sound').play()// Play specify sound.

Restriction for usingboombox.js in mobile web browser

Many of mobile web browseres can't play sounds without user operation. (MouseEvents etc.)This restriction depends on web browseres specification, It is better to check the web browseres to be used.

Control of volume

boombox.get.volume(0.5)// All sound . Argument takes between 0 to 1.boombox.get('sound').volume(0.5)// Specified sound. Argument takes between 0 to 1.

Turn off sounds

Turn off sounds whenever playing sound. (like actualyboombox :p)

Specified sounds

boombox.get('sound').power(boombox.POWER_OFF);

All sounds.

boombox.power(boombox.POWER_OFF);

Loop playback

There are two ways for loop playback.

  • Native loop (This function uses the API supported inHTMLAudio /WebAudio /HTMLVideo)
  • Original loop (This function usesonEnded event for continuous playback loop)
boombox.get('sound').setLoop(boombox.LOOP_ORIGINAL);boombox.get('sound').play();// orboombox.get('sound').setLoop(boombox.LOOP_NATIVE);boombox.get('sound').play();

onEnded

This event is called when a sound have been played to the end.

You should override for using this.

boombox.get('name').onEnded=function(){// callback function}

Use filter

  • You can choose which web broswers and smart phones to play sounds
  • You can specify multiple filters, but if any filter is NG, boombox quit evaluation immediately
  • The callback which is set inboombox.load() will be called immediately if filters are NG.
boombox.addFilter('chrome',functionfilter(){if(/Chrome/.test(window.navigator.userAgent)){returnfalse;// [ OK ] Chrome}else{returntrue;// [ NG ] Another browseres}});varoptions={src:[{media:'audio/mp4',path:'http://0.0.0.0:1109/m/spec/media/sound.m4a'}],filter:["chrome"]// Assign the filters you want to use.};boombox.load('sound',options,true,function(err,audio){// load sound resources.});

Youshould control to play sounds individually because web browseres have large diffrence in audiio API support.

Use HTMLVideo forcibly

You can utilizeHTMLVideo when passtrue toboombox.load()'s '3rd argument.

The case you may use this feature whenHTMLAudio support only one note to play.

varoptions={src:[{media:'audio/mp4',path:'http://0.0.0.0:1109/m/spec/media/sound.m4a'}]};// Pass `true` to 3rd argument in `boombox.load()`boombox.load('sound',options,true,function(err,audio){// load sound resources.// You should append DOM elements. In case for no visual element, you put DOM in outside display area.});

Cache

boombox.pool cache the sound source when loaded.

Web browseres have diffrent behaviour about cache, so this functioin is very effective especially in SPA.

Priority

The priority order for using API by default are following.

WebAudio >HTMLAudio >HTMLVideo

  • If web browser has bothWebAudio andHTMLAudio thenWebAudio has priority.
  • boombox.js doesn't useHTMLVideo as long as it doesn't enable in option.

currentTime

boombox.js ignorescurrentTime when web browser can't set seek setting onHTMLAudio andHTMLVideo.:w

Inactive

boombox.js can judge state that the browser has become background usingwindow.onpageshow/onpagehide,window.onblur/onfocus andEvent.onVisibilityChange.

It is not obtainable on all browser, so you may avouch in your web browser.

Customize Events

All customizable events are named byonXXXX, so you can override these events.

onVisibilityChange(e)

This event is fired this event by the occurrence ofvisibilityChange event.

onFocus(e)

This event is fired this event by the occurrence ofwindow.onFocus event.

onBlur(e)

This event is fired this event by the occurrence ofwindow.onBlur event.

onPageShow(e)

This event is fired this event by the occurrence ofwindow.onpageshow event.

onPageHide(e)

This event is fired this event by the occurrence ofwindow.onpagehide event.

onEnded(e)

This event is fired when a sound have been played to the end.It will not be fired when the sound stops on the way.

// Simple usage.boombox.onFocus=function(e){logger.trace('onFocus');}// Override function.varfn=boombox.onFocus;boombox.onFocus=function(){console.log("override:",onFocus);fn.apply(boombox,arguments);}

AudioSprite

boombox.js now supportsaudiosprite. (HTMLAudio/HTMLVideo/WebAudio)

HTMLAudio/HTMLVideo

boombox.js can play with one note per one sound source.

boombox.js creates instances of HTMLAudio/HTMLVideo as same as numberes of sprited sounds, but it refer the HTMLAudioElement/HTMLVideoElement as DOM element of the same.

boombox.get("bgm-c2a")===boombox.get("bgm-c3a")// falseboombox.get("bgm-c2a").$el===boombox.get("bgm-c3a").$el// true

WebAudio

boombox.js can play with multiple notes per one sound source.

Creating Audio Sprite

You can create audio sprite withboombox-audiosprite, related project ofboombox.js

$ npm install -g boombox-audiosprite$ cd {AUDIO_DIRECTORY}┗ $ tree ..├── c5a.wav├── c6a.wav└── c7a.wav# Please see options page of boombox-audiosprite.$ boombox-audiosprite -e ac3,caf,mp3,m4a ./*.wav┗ $ tree ..├── boombox-sprite.json├── c5a.wav├── c6a.wav├── c7a.wav├── sprite.ac3├── sprite.json├── sprite.m4a└── sprite.mp3# JSON data for boombox.js$ cat boombox-output.json{  "spritemap": {    "c5a": {      "start": 0,      "end": 5.990770975056689    },    "c6a": {      "start": 7,      "end": 12.990770975056689    },    "c7a": {      "start": 14,      "end": 19.99077097505669    }  },  "src": [    {      "media": "audio/ac3",      "path": "sprite.ac3"    },    {      "media": "audio/mpeg",      "path": "sprite.mp3"    },    {      "media": "audio/mp4",      "path": "sprite.m4a"    }  ]}

Playing Audio Sprite

<!DOCTYPE HTML><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"><scriptsrc="boombox.js"></script><script>varoptions={"spritemap":{"c5a":{"start":0,"end":5.990770975056689},"c6a":{"start":7,"end":12.990770975056689},"c7a":{"start":14,"end":19.99077097505669}},"src":[{"media":"audio/ac3","path":"spec/media/sprite/a/sprite.ac3"},{"media":"audio/mpeg","path":"spec/media/sprite/a/sprite.mp3"},{"media":"audio/mp4","path":"spec/media/sprite/a/sprite.m4a"}]};boombox.setup();boombox.load('bgm',options,function(err,audio){console.log(boombox.pool);// load sound data});</script></head><body><buttononclick="boombox.get('bgm-c7a').play();">bgm-c7a play</button></body></html>

boombox.get('bgm-' + sprite name) method can get the individual sound source in audio sprite.

====

Sample Sound File

Location path

  • spec/media/sound.m4a
  • spec/media/sound.wav
  • spec/media/sprite/a/c5a.wav
  • spec/media/sprite/a/c6a.wav
  • spec/media/sprite/a/c7a.wav
  • spec/media/sprite/b/c5b.wav
  • spec/media/sprite/b/c6b.wav
  • spec/media/sprite/b/c7b.wav
  • spec/media/sprite/a/sprite.ac3
  • spec/media/sprite/a/sprite.m4a
  • spec/media/sprite/a/sprite.mp3
  • spec/media/sprite/b/sprite.ac3
  • spec/media/sprite/b/sprite.m4a
  • spec/media/sprite/b/sprite.mp3
  • spec/media/sprite/c/sprite.ac3
  • spec/media/sprite/c/sprite.m4a
  • spec/media/sprite/c/sprite.mp3

Creation software

Sound that was created in AudioSauna

http://www.audiosauna.com/

Contributing

Copyright

CyberAgent, Inc. All rights reserved.

LICENSE

@see :LICENSE

The MIT License (MIT)Copyright © CyberAgent, Inc. All Rights Reserved.Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Bitdeli Badge

About

Browser sound library which blended HTMLVideo and HTMLAudio and WebAudio

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors9

[8]ページ先頭
©2009-2025 Movatter.jp