Thank you for purchase. If you have any questions that are beyond the scope of this help file, please feel free to send a message on the link. Thanks so much!
Include the following javascript into HEAD section of the page:
<script src="/js/jquery-3.2.1.min.js"></script> <script src="/js/lunaaudio.min.js"></script>
Copy player HTML code in BODY section of the page:
<div id="mylunaaudio" style="width:100%;"></div>
Create playlist in BODY section of the page:
<ul id="lunademoplaylist" class="lunaaudioplaylist">
<li data-type="xml" data-target="https://audioplayer.luna-universe.com/playlists/electro/electro.xml" data-name="Electro" data-image="/playlists/cover/42.jpg" ></li>
<li data-type="xml" data-target="https://audioplayer.luna-universe.com/playlists/drumandbass/drumandbass.xml" data-name="Drum And Bass" data-image="/playlists/cover/23.jpg" ></li>
<li data-type="xml" data-target="https://audioplayer.luna-universe.com/playlists/ambient/ambient.xml" data-name="Ambient" data-image="/playlists/cover/43.jpg" ></li>
</ul>
Initialize the plugin with settings (see configuration):
<script>
$("#lunaaudio").lunaaudio({
token: "VWlYXWNkYFVtWWYiYGliVSFpYl1qWWZnWSJXY2E=",
backgroundcolor: "#282828",
fontcolor: "#ffffff",
hightlightcolor: "#f86808",
fontname:"Oswald",
googlefont:"Oswald:400",
useanalyzer: "real",
analyzertype: "6",
useDeepLinking : "true",
playlists:"lunademoplaylist"
}
});
</script>
To simplify the creation of the code, use this CODE GENERATOR.
Available player options:
| Parameter | Value | Description |
|---|---|---|
| token | Where Is My TOKEN? CLICK HERE! | |
| userinterface | small, big | set the type of userinterface size |
| backgroundcolor | set the RGB or RGBA value for your background | |
| fontcolor | set the RGB value for your Font | |
| hightlightcolor | set the RGB value for highlighted elements | |
| fontname | is the font family name | |
| googlefont | The google font name for loading. Please check this out on Google Fonts. | |
| coverimage | Cover Image with your logo as placeholder for missing Covers | |
| usevisualizer | fake, real | use the animation from a audio visualizer (real: will just work with CORS POLICY) |
| visualizertype | 1-8 | type of animation from a audio visualizer |
| corsproxy | This CORS-SERVER is just need for cross site scripting without CORS POLICY | |
| useDeepLinking | true, false | This will work for playlists. The URL get a hash deeplink on switching the Song or Playlist. |
| playlists | look at Working with playlist |
Minimal HTML markup needed for player to work is just one element. Please set the width of element. The height will be calculated automaticaly.
<div id="lunaaudio" style="width:100%;"></div>
This section explains how to load a playlist.
All example opportunities, you can set in Parameter playlist:
<ul id="myplaylists" class="lunaaudioplaylist">
<li data-type="xml" data-target="https://audioplayer.luna-universe.com/playlists/electro/electro.xml" data-name="Electro" data-image="/playlists/cover/42.jpg" ></li>
<li data-type="folder" data-target="../playlists/mp3" data-name="My MP3s" data-image="/playlists/cover/69.jpg" ></li>
<li data-type="ul" data-target="myplaylist" data-name="Drum And Bass" data-image="/playlists/cover/23.jpg" ></li>
<li data-type="rss" data-target="https://feed.podbean.com/residance/feed.xml" data-name="RSS" data-image="/playlists/cover/72.jpg" ></li>
</ul>
Parameters:
| Parameter | Values | Description |
|---|---|---|
| type | xml, folder, ul, rss, single | please def the type from playlist |
| target | here you can set the URL, ID or Folder | |
| name | Name from playlist in your player | |
| image | Image from playlist in your player |
Example:
<ul id="myplaylists" class="lunaaudioplaylist">
<li data-type="single" data-target="https://audioplayer.luna-universe.com/playlists/mp3/Aikon.mp3" ></li>
</ul>
Parameters:
| Parameter | Values | Description |
|---|---|---|
| type: | single | please def the type from playlist |
| target | set the absolute path to MP3-file |
Inline Example for you BODY:
<ul id="myplaylist" class="lunaaudioplaylist">
<li data-file="https://audioplayer.luna-universe.com/playlists/drumandbass/26121257_lounge-drum-bass_by_hopesound_preview.mp3" data-purchaseurl="https://1.envato.market/c/1297729/275988/4415?u=https%3A%2F%2Faudiojungle.net%2Fitem%2Flounge-drum-bass%2F26121257" data-songartist="Exocet" data-songtitle="Demon Seed" data-image="https://audioplayer.luna-universe.com/playlists/cover/21.jpg" data-downloadable="true" data-shareable="true" data-duration="2145" ></li>
<li data-file="https://audioplayer.luna-universe.com/playlists/drumandbass/25974260_to-breakbeat-abstract_by_dimadjdocent_preview.mp3" data-purchaseurl="https://1.envato.market/c/1297729/275988/4415?u=https%3A%2F%2Faudiojungle.net%2Fitem%2Fto-brakebeat-abstract%2F25974260" data-songartist="Waremouse" data-songtitle="2 bad mice" data-image="https://audioplayer.luna-universe.com/playlists/cover/22.jpg" data-downloadable="true" data-shareable="true" data-duration="3124" ></li>
</ul>
Parameters:
| Parameter | Required | Description |
|---|---|---|
| data-file | yes | url to audio (MP3-Files only) |
| data-purchaseurl | this will create a cart button with your purchase URL | |
| data-songartist | if is empty, will the player read the ID3-Tag | |
| data-songtitle | if is empty, will the player read the ID3-Tag | |
| data-image | if is empty, will be used the default-cover or image from ID3-Tag | |
| data-downloadable | if you need the download-option | |
| data-shareable | if you need the sharing-option | |
| data-duration | is only for the overview. Please write here only the time in seconds. |
Playlist syntax:
<ul id="myplaylists" class="lunaaudioplaylist">
<li data-type="ul" data-target="myplaylist" data-name="Drum And Bass" data-image="/playlists/cover/23.jpg" ></li>
</ul>
Parameters:
| Parameter | Values | Description |
|---|---|---|
| type: | ul | please def the type from playlist |
| target | here you can set the ID from your DIV | |
| name | Name from playlist in your player | |
| image | Image from playlist in your player |
<ul id="myplaylists" class="lunaaudioplaylist">
<li data-type="rss" data-target="https://feed.podbean.com/residance/feed.xml" data-name="ResiDANCE" data-image="https://pbcdn1.podbean.com/imglogo/image-logo/1937596/lent_57784_big_6.jpg" ></li>
</ul>
Parameters:
| Parameter | Values | Description |
|---|---|---|
| type: | rss | please def the type from playlist |
| target | here you can set the URL | |
| name | Name from playlist in your player | |
| image | Image from playlist in your player |
<ul id="myplaylists" class="lunaaudioplaylist">
<li data-type="folder" data-target="../playlists/mp3" data-name="My MP3s" data-image="/playlists/cover/69.jpg" ></li>
</ul>
Parameters:
| Parameter | Values | Description |
|---|---|---|
| type: | folder | please def the type from playlist |
| target | here you can set the Folder. The folder must be relative to the lunaaudio.min.js | |
| name | Name from playlist in your player | |
| image | Image from playlist in your player |
Only important rule is that XML playlist markup is exactly the same as the playlist markup in HTML!
So you can just copy playlist markup from HTML and paste it in xml file.
Example from XML file:
<?xml version="1.0" encoding="UTF-8"?>
<ul>
<li data-file="https://audioplayer.luna-universe.com/playlists/ambient/25712359_this-ambient-music_by_original_soundtrack_preview.mp3" data-purchaseurl="https://1.envato.market/c/1297729/275988/4415?u=https%3A%2F%2Faudiojungle.net%2Fitem%2Fthe-ambient-music%2F25712359" data-songartist="Doubtingthomas" data-songtitle="Wakarimasen" data-image="https://audioplayer.luna-universe.com/playlists/cover/01.jpg" data-downloadable="true" data-shareable="true" data-duration="2142" ></li>
<li data-file="https://audioplayer.luna-universe.com/playlists/ambient/24543751_the-documentaries_by_artmusician_preview.mp3" data-purchaseurl="https://1.envato.market/c/1297729/275988/4415?u=https%3A%2F%2Faudiojungle.net%2Fitem%2Fthe-documentaries%2F24543751" data-songartist="Droplex" data-songtitle="My Spirit" data-image="https://audioplayer.luna-universe.com/playlists/cover/02.jpg" data-downloadable="true" data-shareable="true" data-duration="1245" ></li>
<li data-file="https://audioplayer.luna-universe.com/playlists/ambient/25159973_the-documentaries_by_colorfilmmusic_preview.mp3" data-purchaseurl="https://1.envato.market/c/1297729/275988/4415?u=https%3A%2F%2Faudiojungle.net%2Fitem%2Fthe-documentaries%2F25159973" data-songartist="Droplex" data-songtitle="Psychological Attack" data-image="https://audioplayer.luna-universe.com/playlists/cover/03.jpg" data-downloadable="true" data-shareable="true" data-duration="4515" ></li>
<li data-file="https://audioplayer.luna-universe.com/playlists/ambient/25694552_ambient-music_by_aujamedia_preview.mp3" data-purchaseurl="https://1.envato.market/c/1297729/275988/4415?u=https%3A%2F%2Faudiojungle.net%2Fitem%2Fambient-music%2F25694552" data-songartist="Haokah" data-songtitle="Glacial Air" data-image="https://audioplayer.luna-universe.com/playlists/cover/04.jpg" data-downloadable="true" data-shareable="true" data-duration="1214" ></li>
<li data-file="https://audioplayer.luna-universe.com/playlists/ambient/25840114_ambient-music_by_fatowlproductions_preview.mp3" data-purchaseurl="https://1.envato.market/c/1297729/275988/4415?u=https%3A%2F%2Faudiojungle.net%2Fitem%2Fambient-music%2F25840114" data-songartist="Harrison BDP" data-songtitle="Decompression" data-image="https://audioplayer.luna-universe.com/playlists/cover/05.jpg" data-downloadable="true" data-shareable="true" data-duration="2417" ></li>
</ul>
Parameters:
| Parameter | Required | Description |
|---|---|---|
| data-file | yes | url to audio (MP3-Files only) |
| data-purchaseurl | this will create a cart button with your purchase URL | |
| data-songartist | if is empty, will the player read the ID3-Tag | |
| data-songtitle | if is empty, will the player read the ID3-Tag | |
| data-image | if is empty, will be used the default-cover or image from ID3-Tag | |
| data-downloadable | if you need the download-option | |
| data-shareable | if you need the sharing-option | |
| data-duration | is only for the overview. Please write here only the time in seconds. |
Playlist syntax:
<ul id="myplaylists" class="lunaaudioplaylist">
<li data-type="xml" data-target="https://audioplayer.luna-universe.com/playlists/electro/electro.xml" data-name="Electro" data-image="https://audioplayer.luna-universe.com/playlists/cover/42.jpg" ></li>
</ul>
Parameters:
| Parameter | Values | Description |
|---|---|---|
| type: | xml | please def the type from playlist |
| target | here you can set the URL. | |
| name | Name from playlist in your player | |
| image | Image from playlist in your player |
API example is located in api.html demo.
View the player interface:
$("#mylunaaudio").data('lunaaudio').viewplayer();
View the current playlist:
$("#mylunaaudio").data('lunaaudio').viewcurrentplaylist();
View the overview from all playlists:
$("#mylunaaudio").data('lunaaudio').viewplaylistsoverview();
Change the repeat mode:
$("#mylunaaudio").data('lunaaudio').changerepeatmode();
Change the shuffle mode:
$("#mylunaaudio").data('lunaaudio').changeshufflemode();
Step backward:
$("#mylunaaudio").data('lunaaudio').stepbackward();
Step forward:
$("#mylunaaudio").data('lunaaudio').stepforward();
Start Play:
$("#mylunaaudio").data('lunaaudio').play();
Stop currently playing:
$("#mylunaaudio").data('lunaaudio').pause();
Make Player to small version:
$("#mylunaaudio").data('lunaaudio').smallplayer();
Make Player to big version:
$("#mylunaaudio").data('lunaaudio').bigplayer();
If you have trouble playing audio on your server in some browsers, and you get an errors in developer console similar to these:
HTTP "Content-Type" of "audio/mpeg" is not supported. Load of media resource ... failed.This is a mime type problem. You need to add following lines in your .htaccess file on your server:
AddType audio/mpeg .mp3
Autoplay is disabled since recent browser changes and requires user interaction with the page before (like a click or keypress) to start playback:
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Volume cannot control the on Apple IOS with javascript, you have to use the physical button on the actual phone: Volume Control in JavaScript
Send a message at http://codecanyon.net/user/sodah#contact with a link to your live page to illustrate the problem so we can have a look.