Sticky and Inline Responsive HTML5 Audio Player with JQUERY.
DEMO AND EXAMPLES
INLINE PLAYER (Compact)
STICKY PLAYER (Footer)
Basic Use:
var player; // declare it outside to use methods after
$(document).ready(function()
{
player = $.stickyAudioPlayer(
{
url:'http://tiendasdigitales.net/github/stickyaudioplayerjquery/bensound-goinghigher.mp3',
position:'bottom',
text:'Bensound - Going Higher - Music: http://www.bensound.com',
image:'http://tiendasdigitales.net/github/stickyaudioplayerjquery/images/cover.png',
maxWidth:1000
}
);
});
OPTIONS
| Parameter | Value |
|---|---|
| url: | ['file full path'] required |
| position: | ['bottom'|'inline'] default: bottom |
| text: | ['any text'] default: filename |
| image: | ['full path image'] default: player image |
| maxWidth: | [integer] default: 1200 |
| repeat: | [true | false] default: false |
| volume: | [integer] default: 100 |
| download: | ['file url'] |
| theme: | ['default':'compact'] default: 'default'. 'compact' is used with position 'inline' |
METHODS
| Method | Action |
|---|---|
| player.changeAudio('myfile.mp3','song text','mycover.png'); | play a new file into instantiated player |
| player.setVolume(100); | Change Player volume from 0 to 100 |
| player.mute(); | Mute audio |
| player.unmute(); | Unmute Audio |
| player.pause(); | |
| player.stop(); | |
| player.play(); | |
| player.show(); | Open Sticky Player (not valid for inline position) |
| player.hide(); | Hide Sticky Player (not valid for inline position) |
| player.remove(); | Remove audio player from the DOM |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/stickyaudioplayerjquery.min.css">
<script src="js/stickyaudioplayerjquery.min.js"></script>