New conception of audio player for web.
<!-- include muzus: js and css -->
<link href="dist/muzus.min.css" rel="stylesheet"/>
<script src="dist/muzus.min.js"></script>
npm install muzus
<script src="//cdnjs.cloudflare.com/ajax/libs/muzus/1.0.0/muzus.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/muzus.min.js"></script>
Each link with href
attribute and parent element class muzus
automatically becomes a player for the linked MP3.
<section class="muzus">
<a href="https://....mp3">Track name</a>
</section>
<section class="muzus">
<a href="https://....mp3">Track name 1</a>
<a href="https://....mp3">Track name 2</a>
<a href="https://....mp3">Track name 3</a>
</section>
Check muzus/example/index.html to see more examples of usage.
Adding some data-attributes changes the behavior or appearance of the player.
Attribute_Name | Type | Default value | Description |
---|---|---|---|
data-repeat |
boolean |
false |
Applied to a element with class muzus . Defines whether to repeat the playback after the last track is finished. |
Adding in <head>
your page, if you need setup player before initialize. Define in global object Muzus
. [Example]
Option | Type | Default Value | Description |
---|---|---|---|
autoInit |
boolean |
true |
Defines automatically initialize player after page loaded. |
isMobile |
function |
+ | Defines custom function for check is mobile device use. |
Install gulp-cli
:
npm install --global gulp-cli
Restore development dependencies:
npm i --only=dev
Compiling:
gulp build:sass
Auto-compiling:
gulp sass:watch
npm run dev
© 2017 Yauheni Pakala | MIT License