# SoundManager 2: Bar UI ("second draft" version)

A configurable, resolution-independent HTML + SVG-based UI for playing collections of sounds.

### Standard UI

Play / pause
0:00
0:00
volume

- Figub Brazlevič - Bosnian Syndicate (BY-CC-ND license)
  Buy this track
  Download this track
- SonReal - Let Me Explicit
  Download this track
- SonReal - LA (Prod. Chin Injetti)Explicit
- SonReal - People Asking Explicit
- SonReal - Already There Remix ft. Rich Kidd, Saukrates Explicit
- The Fugitives - Graffiti Sex
- Adrian Glynn - Seven Or Eight Days
- SonReal - I Tried
- 32" Gong Sounds (rubber + standard mallets)
- Armstrong Beat
- Untitled Groove
- Birds In Kaua'i (AAC)
- Po'ipu Beach Waves (OGG)
- A corked beer bottle (WAV)
- Rain

< previous
> next

### Extra controls inline, playlist open by default

Play / pause
0:00
0:00
volume
< previous
> next

- SonReal - LAExplicit
  Download this track
- SonReal - People Asking Explicit
- SonReal - Already There Remix ft. Rich Kidd, Saukrates Explicit
- The Fugitives - Graffiti Sex
- Adrian Glynn - Seven Or Eight Days
- SonReal - I Tried
- 32" Gong Sounds (rubber + standard mallets)
- Armstrong Beat
- Untitled Groove
- Birds In Kaua'i (AAC)
- Po'ipu Beach Waves (OGG)
- A corked beer bottle (WAV)
- Rain

< previous
> next

### Compact UI, single item

Play / pause
0:00
0:00
volume

- 32" Gong Sounds

### Compact UI, full width

Play / pause
0:00
0:00
volume

- Adrian Glynn - Seven Or Eight Days

### JavaScript API

Once initialized, players will be added to the array `window.sm2BarPlayers`. You can access and control players in this fashion. For example, `window.sm2BarPlayers[0].actions.play()` will start the first player UI. You can also toggle the playlist "drawer" via `window.sm2BarPlayers[0].actions.menu()`.

### Credits

Thanks to SonReal and Adrian Glynn for making these demos sound notably better.

Sample textures are from subtlepatterns.com. "If you need more, that's where to get 'em."

SVG icons are from IcoMoon, "Entypo" (CC-BY SA 3.0) and "IcoMoon Free" (GPL) sets.

Missing button images? Make sure your server is returning an appropriate MIME type for SVG assets. An .htaccess example: `AddType image/svg+xml svg svgz`

## Live UI options

Color

Color opacity

Player texture

Page background

Font size

12 64

Try combinations of color, opacity and texture.

### HTML classname options

CSS for these options:

    .sm2-bar-ui {
     font-size: 16px;
    }
    .sm2-bar-ui .sm2-main-controls,
    .sm2-bar-ui .sm2-playlist-drawer {
     background-color: #2288cc;
    }
    .sm2-bar-ui .sm2-inline-texture {
     background: transparent;
    }

HTML for these options:

    <div class="sm2-bar-ui">
     <!-- player HTML goes here -->
    </div>

### Fixed-position, full-width player via `<div class="sm2-bar-ui fixed full-width"> ... </div>` below ↓

Play / pause
0:00
0:00
volume
< previous
> next
∞ repeat

- SonReal - LAExplicit
  Download this track
- SonReal - Let Me Explicit
- SonReal - People Asking Explicit
- SonReal - Already There Remix ft. Rich Kidd, Saukrates Explicit
- The Fugitives - Graffiti Sex
- Adrian Glynn - Seven Or Eight Days
- SonReal - I Tried
- Armstrong Beat
- Untitled Groove
- Birds In Kaua'i (AAC)
- Po'ipu Beach Waves (OGG)
- A corked beer bottle (WAV)
- Rain