/md-js-player

Primary LanguageCSS

Readme

This is a standalone library for a portable player for Music Dealers.

Features

  • Looks for location for a player to be inserted.
  • Inserts player into container
  • Requires song id
  • Support custom templates

Usage

Assumes it's loaded after the HTML is rendered.

External Dependencies

  • API call

Implementation

Include players inline in-page

  • The song-id or playlist-id data attribute is required on the container for the player.
<div class="md-player" data-song-id="9292839"></div>

<div class="md-player" data-playlist-id="9292839"></div>

Optional data attributes

  • template-id - override default template

Include a template

Ensure the following classes exist

  • md-play - play button (and pause if no md-pause)

Optional classes

  • player-progress - progress bar container
  • loaded-container - displays time elapsed
  • played-container - displays total time of track

Use the following data values

  • see pie
<script type="text/template" id="player-template">
  <div class="md-player-body">
    <h2><strong>[[ title ]]</strong> <small>by</small> [[ artist.name ]] <small><span class="elapsed">[[ elapsed ]]</span> - [[ duration_formatted ]]</small></h2>
    <img class="img-responsive" src="[[artist.profile_pic_90_url]]">
    <div class="audio-player">
      <div class="player-progress" style="background-image: url(http://mdlrs.com/createwaveform/[[ id ]])">
        <div class="loaded-container"></div>
        <div class="played-container"></div>
      </div>
      <button class="md-play">Play</button>
    </div>
  </div>
</script>

Include the JS file (after JQuery and player HTML)

<script src="md-player.js"></script>
<script>
  mdPlayer();
</script>

Include styles (see md-player.css for base styles)

Builds

Always do an updated min build for production

Based on: http://makerlog.org/posts/creating-js-library-builds-with-browserify-and-other-npm-modules

  • run npm install
  • ensure browserify, uglifyjs, deamdify, and watchify are installed globally
  • run npm run watch for active development
  • run npm run build-debug for dev (debug) build
  • run npm run build-min for minify (production) build
  • run npm run build for debug and production build