Simple HTML5 MP3 Player With jQuery And jQuery UI - Luna

File Size: 4.26 MB
Views Total: 10422
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple HTML5 MP3 Player With jQuery And jQuery UI - Luna

Luna is a simple jQuery & jQuery UI plugin that helps you create a HTML5 MP3 audio player with custom controls on the webpage.

How to use it:

1. Include required CSS files in the head section of the html page.

<link href="jquery-ui.min.css" rel="stylesheet">
<link href="jquery-ui.structure.min.css" rel="stylesheet">
<link href="jquery-luna.css" rel="stylesheet">

2. Create a container for the MP3 player.

<div class="audio-player">

3. Include jQuery, jQuery UI and the jQuery Luna plugin's script at the bottom of the page.

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery-luna.js"></script>

4. Initialize the MP3 player and specify an array of MP3 files you want to play.

  songs:["1.mp3, 2.mp3, 3.mp3"],

5. This will generate a custom MP3 audio player on your webpage:

<div class="luna-container">
  <button type="button" class="luna-prev">Prev</button>
  <button type="button" class="luna-play-pause">Play</button>
  <button type="button" class="luna-next">Next</button>
  <span class="luna-time-current"></span>
  <div class="luna-progress-bar">
    <div class="luna-progress-bar-current-position"></div>
  <span class="luna-time-total"></span>
  <audio class="luna-audio-tag">
    <source src="" type="audio/mpeg">
    Your browser does not support the audio element. Please update your browser.

This awesome jQuery plugin is developed by sebcar. For more Advanced Usages, please check the demo page or visit the official website.