Created: 21/08/2014
By: Stormy
Email: stormybyte@hotmail.com
Thank you for purchasing my item. I'll hope that it give you only positive expirience. If i can help you with it just ask me from contact form, email or Skype: stormybyte. Thanks so much!
This plugin looks like a sticky line player at the bottom of the page. Therefore, all HTML codes can be placed in any part of your document (HTML file, template file, the visual editor of your CMS). All of the information within the main content area is nested within a div with an id of "strm_liner", which is placed at the bottom of the page before the closing body tag.
If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:
#strm_liner a { color: #someColor; }
Or use plugin settings for use predefined colors and style settings:
I'm using one CSS files in this theme. This file contains all of the specific stylings for the page and player item.
Normally, you shouldn't edit this file, but if you want to generally transform this product edit this file or add lines to your' stylesheet file, like this:
#strm_liner {font-family: Helvetica, sans-serif;}
This theme imports 7 Javascript files.
Linear Music Player it's a beautiful simple tiny player for bottom or top of your site. Find the best sizes and colors for yourself and embed it on the page right now. It works on tablets and personal computers, you can even embed it to my mobile html5 app.If you enjoy it rate us 5 stars. And we’ll can delight you with good updates. Thanks so much! :)
You have to upload the folder /linear/ to your server.
You can use ftp, hoster panel's file transfer system or etc. Just upload the folder.
(Note: at the local server can be troubles with loading Metatags, use external server for testing)
When you correctly uploaded folder, you can immediately test the player on test data.
Just go to this adress http://YOUR_SERVER/linear/index.html
Next, you have to place player to your own site, page or desing. So...
Put this tags before the closing </head> tag:
<!-- HERE IS YOUR REQUIRED SCRIPTS --> <link href="./linear/css/style.css" rel="stylesheet" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> <script src="./linear/js/jquery.ui.touch-punch.min.js"></script> <script src="./linear/js/jquery.jplayer.min.js"></script> <script src="./linear/js/jplayer.playlist.min.js"></script> <script src="./linear/js/id3.min.js"></script> <script src="./linear/js/iscroll.min.js"></script> <script src="./js/jquery.linerPlayer.js"></script> <script> jQuery(function($) { jQuery('body').linerPlayer({ pluginPath: "js", // <<< IMPORTANT! - Change this to your path to the plugin folder playlist: [ {file:"muz/intro.mp3", title:"TITLE_HERE", artist:"BAND_HERE", album:"ALBUM_NAME", cover:"COVER_URL"}, {file:"muz/intro.mp3", title:"Intro", album:"Comedy Central", cover:false} ] }); }); <script> <!-- HERE IS YOUR REQUIRED SCRIPTS -->
And now you can see the player in your site. It's almost done, you just have to change music and cover links, title, artists and album's info.
Note: If you upload not into the root directory than you have to change ./ in the above tags to your folder, like this:
<script src="/YOUR_NEW_FOLDER/js/jquery.linerPlayer.js"></script>
For changing music at playlist just manage this values: file, title, artist, album, cover.
at the line above which set playlist array with this characters playlist: [{
Required only 'file' parameter, other one will try to get automaticly.
Here:
playlist: [ {file:"MUSIC_URL", title:"TITLE_HERE", artist:"BAND_NAME", album:"ALBUM_NAME", cover:"COVER_URL"}, {file:"muz/intro.mp3", title:"Intro", album:"Comedy Central", cover:false} ]
Note: do not forget the comma separator between playlist items. And remove the last comma at the end of the playlist.
Note: You can add unlimited number of tracks
Example
Player have some options for you (all is optional):
shuffle - Predefine the shuffle mode [true,false]
autoplay - Predefine the autoplay mode [true,false]
accentColor - Set the accent color for all player ["#cc181e","#008DDE", any html hex color]
firstPlaying - Predefine first playing song at playlist [0,1,3,4...]
loop - Predefine repeat player's politic [true,false]
volume - Predefine volume rate at the start [0.1,0.2,...,0.9,1]
veryThin - Set the tiny styles player skin [true,false]
roundedCorners - Set the styles of player corners (rounded or not) [true,false]
slideAlbumsName - Rotate album name and title or not [true,false]
nowplaying2title - Show NowPlaying info in title or not [true,false]
pluginPath - Path to your plugin's folder ["/canyon/liner", etc]
Note: between the [] specefied values of this options. True is on mode, false - if off.
Paste one of it all them all before the playlist, like this:
<script> jQuery(function($) { $('body').linerPlayer({ firstPlaying: 0, autoplay: false, shuffle: false, veryThin: false, slideAlbumsName: true, nowplaying2title: true, roundedCorners: false, pluginPath: "/canyon/liner", playlist: [ {file:"muz/intro.mp3", title:"TITLE_HERE", artist:"BAND_HERE", album:"ALBUM_NAME", cover:"COVER_URL"}, {file:"muz/intro.mp3", title:"Intro", album:"Comedy Central", cover:false} ] }); }); <script>
This code makes it white.
Set the option accentColor for one of this or any other color:
accentColor:"#fff", //white
accentColor:"#008dde", //blue
accentColor:"#cc181e", //red
accentColor:"#ffdb4c", //yellow
accentColor:"#45E427", //green
accentColor:"#ff6600", //orange
Try to get colors from this page.
Example
Set the option veryThin to true if you want very thin player
veryThin: true,
Or set to false if you want normally thick player
veryThin: false,
If you are very new to web and have no idea what an FTP Manager is, then this option is not for you. The FTP manager method is the least friendly for beginners out of the three method that we shared in this post. You would need to access your host through the FTP manager. Access the path (/wp-content/plugins/) And upload files there.
The above screenshot is of a FTP software known as Ipswitch WSFTP Pro. You can simply drag and drop plugin files. You must make sure that you upload the unzipped folder. Once you have uploaded, then you would need to click on the Plugins tag in your WordPress admin panel.
You will see the plugin you just uploaded. Click on the Activate button and you are done.
You can go to the settings page.
After last update you can turn on Continious mode by switching the checkbox "Continuous mode" to ON state in admin page. Thats all!
Setting page is pretty simple.
First line is form for add music by files. Just select your file at PC, set Title, Band, Album and cover and push Upload.
Second line is for SoundCloud import. Only add link to your track or playlist at SC and plugin will import it to site (only metadata, no music files will be loaded).
Table of content.
Settings block. Check/uncheck boxes and press save button for change playing mode.
Second line is for SoundCloud import. Only add link to your track or playlist at SC and plugin will import it to site (only metadata, no music files will be loaded).
If songs from soundcloud will cease to play. Create your application here http://soundcloud.com/you/apps and write it API key in the "SoundCloud Client ID" field on the settings page.
Now it works and with my key, but soundcloud can ban it if the player will be popular)
By default, the player is added to all pages of your site where there is a tag WordPress wp_footer(). But you can use the shortcodes mode and paste on this song in a post, page, or anywhere else. Turn the mode "Use Shortcodes" and add the generated shortcode in the desired location on the website.
Note: Basically you get shortecode like this [liner_player id=3] but you can makes your own playlists by using this one shortcodes [liner_player id="4,3"]
Clear playlist
Add the link (button, image or any other element) to your page with code like this:
<span class="plManager" data-action="clear" style="cursor:pointer;">Click here for Clear Playlist</span>
Add and play
Add the link (button, image or any other element) to your page with code like this:
<span style="cursor:pointer;" data-action="add" data-mp3="/canyon/liner/muz/intro.mp3" data-title="Intro"Where data-mp3 is a file URL.
data-artist="Futurama Team" data-album="Comedy Central" data-cover="/canyon/liner/HERE/fut.png" class="plManager"></span>
P.S. Notes
The volume slider will not work at any mobile device and will disable
The waveform if random, i can make real but it will slow your device. If you really want write me and i'll turn on in.
Autoplay at iOS may not work. It's mobile safari browser politics and i'm not alredy solve it.
Anywhere thank you for your attention!
If you enjoy it rate us 5 stars. And we’ll can delight you with good updates. Thanks! :)
StormyByte