Luna Audio Player with Playlist

jQuery


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="https://code.jquery.com/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>
    

Available player options:

Parameter Value Description
token Where Is My TOKEN? CLICK HERE!
soundcloudapikey SoundCloud api key. Register here: http://soundcloud.com/you/apps/new and enter Client ID.
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="soundcloud" data-target="https://soundcloud.com/playlist/sets/chance-the-rapper-top-tracks" data-name="Chance The Rapper Top Tracks" data-image="/playlists/cover/67.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, soundcloud, 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

Soundcloud requires API key, register here: http://soundcloud.com/you/apps/new and enter Client ID in settings: soundCloudAppId

Examples:

populare tracks from user:

<ul id="myplaylists" class="lunaaudioplaylist">
    <li data-type="soundcloud" data-target="https://soundcloud.com/pirupa/popular-tracks" data-name="Piero Pirupa" data-image="https://i1.sndcdn.com/avatars-000746317117-hoavav-t200x200.jpg"  ></li>
</ul>

user tracks:

<ul id="myplaylists" class="lunaaudioplaylist">
    <li data-type="soundcloud" data-target="https://soundcloud.com/illeniumofficial" data-name="Illenium" data-image="https://i1.sndcdn.com/artworks-sv9Ki4Urz4jpDOuD-l89Okg-t200x200.jpg"  ></li>
</ul>

single track:

<ul id="myplaylists" class="lunaaudioplaylist">
    <li data-type="soundcloud" data-target="https://soundcloud.com/astrix-official/astrix-trance-for-nations-011" data-name="Astrix - Trance For Nations" data-image="https://i1.sndcdn.com/artworks-000052303825-312c9w-t500x500.jpg"  ></li>
</ul>

set:

    <ul id="myplaylists" class="lunaaudioplaylist">
    <li data-type="soundcloud" data-target="https://soundcloud.com/user-840580694/sets/trance-1" data-name="Trance" data-image="https://i1.sndcdn.com/artworks-000108385800-73f3ue-t500x500.jpg"  ></li>
</ul>


Parameters:

Parameter Values Description
type: soundcloud 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="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();

Self hosted audio mp3 doesnt play

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





Audio autoplay

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 on mobile

Volume cannot control the on Apple IOS with javascript, you have to use the physical button on the actual phone: Volume Control in JavaScript





Plugin does not work as expected

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.