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">
</div>

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.

$(".audio-player").luna({
  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>
  </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.
  </audio>
</div>

---

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