bootstrap audio player

readme.md

Cам плагин http://kolber.github.io/audiojs/

html

<div class='audiojs'> 
  <audio src="/mp3/juicy.mp3" preload="auto" />
</div>

js

Player.init($('.audiojs'))

player.js

window.Player = function () {

    return {

        init: function($el) {

            audiojs.events.ready(function () {

                audiojs.createAll({
                    css: false,
                    createPlayer: {
                        markup: '\
          <div class="play-pause"> \
              <div class="jsPlay">\
                <p class=" play fa fa-play"></p> \
                <p class=" pause fa fa-pause"></p> \
              </div> \
            <p class="loading  fa fa-circle-o-notch fa-spin"></p> \
            <p class="error fa  fa-times"></p> \
          </div> \
          <div class="time">  \
            <em class="played">00:00</em>/<strong class="duration">00:00</strong> \
          </div> \
          <div class="scrubber"> \
            <div class="progressAudeo"></div> \
            <div class="loaded"></div> \
          </div> \
          <div class="error-message"></div>',
                        playPauseClass: 'jsPlay',
                        scrubberClass: 'scrubber',
                        progressClass: 'progressAudeo',
                        loaderClass: 'loaded',
                        timeClass: 'time',
                        durationClass: 'duration',
                        playedClass: 'played',
                        errorMessageClass: 'error-message',
                        playingClass: 'playing',
                        loadingClass: 'loading',
                        errorClass: 'error'
                    }
                }, $el.find('audio').get() );
            });
        }
    }
}();

player.sass

.audiojs
  display: inline-block
  position: relative
  padding-bottom: 4px
  audio
    position: absolute
    left: -1px
  .play-pause
    padding: 4px 0
    margin: 0px
    float: left
    overflow: hidden
    width: 14px
    text-align: center
  p
    display: none
    //width: 25px
    //height: 40px
    margin: 0px
    cursor: pointer
  .play
    display: block
  .scrubber
    //display: none
    position: absolute
    bottom: 0
    left: 0
    right: 0
    height: 3px
    background-color: #dcdcdc
    +transition(all 100ms)
    &:hover
      height: 5px
      bottom: -1px

  .progressAudeo
    position: absolute
    z-index: 1
    bottom: 0
    left: 0
    top: 0
    background-color: #34495e
    //display: none
  .loaded
    position: absolute
    bottom: 0
    left: 0
    top: 0
    background-color: #b4b4b4
  .time
    font-family: monospace
    float: left
    line-height: 14px
    margin-left: 7px
    padding: 4px 0 4px
    em
      padding: 0px 2px 0px 0px
      color: #454545
      font-style: normal
    strong
      padding: 0px 0px 0px 2px
      font-weight: normal
  .error-message
    float: left
    display: none
    margin: 0px 10px
    height: 36px
    width: 400px
    overflow: hidden
    line-height: 36px
    white-space: nowrap
    color: #fff
    text-overflow: ellipsis
    -o-text-overflow: ellipsis
    -icab-text-overflow: ellipsis
    -khtml-text-overflow: ellipsis
    -moz-text-overflow: ellipsis
    -webkit-text-overflow: ellipsis
    a
      color: #eee
      text-decoration: none
      padding-bottom: 1px
      border-bottom: 1px solid #999
      white-space: wrap

.playing
  .play, .loading, .error
    display: none
  .pause
    display: block

.loading
  .play, .pause, .error
    display: none
  .loading
    display: block

.error
  .time, .play, .pause, .scrubber, .loading
    display: none
  .error
    display: block
  .play-pause p
    cursor: auto
  .error-message
    display: block