Build A Retro-Style HTML5 Audio Player With CerisePlayer

CerisePlayer is a lightweight HTML5 audio player that combines retro design with modern functionality. Built using jQuery and jQuery UI.

This audio player supports multiple audio tracks and autoplay. It can automatically move to the next song once the current one finishes.

CerisePlayer also features essential controls such as a volume slider and seek bar, and it lets you manage playlists easily through a simple JSON file. 

How to use it:

1. Load the required jQuery and jQuery UI libraries in the document.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery UI + Theme -->
<link rel="stylesheet" href="/path/to/cdn/themes/base/jquery-ui.css" />
<script src="/path/to/cdn/jquery-ui.min.js"></script>

2. Download the audioplayer.js file and include it in your document after the jQuery libraries.

<script type="text/javascript" src="/path/to/audioplayer.js"></script>

3. Create the HTML structure for the player. Here's the base code that includes audio controls and displays the current song information.

<div id="audio-player">
  <audio id="ap-current">
    <!-- Initial Song -->
    <source id="ap-source" src="audio/home.mp3" type="audio/mpeg">
    <!-- Your browser does not support the audio element. -->
  </audio>
  <span id="ap-currenttrack"></span>
  <!-- Buttons -->
  <button id="ap-bwd"></button>
  <button id="ap-play" class="play"></button>
  <button id="ap-stop"></button>
  <button id="ap-fwd"></button>
  <div id="ap-vol"></div>
  <span id="ap-time">
    <span id="ap-time-current">0:00</span>/<span id="ap-time-max">0:00</span>
  </span>
  <div id="ap-bar">
    <div id="ap-bar-full"></div>
    <div id="ap-scroller"><img src="img/scroller.webp" id="ap-scrollerdrag"></div>
  </div>
  <div id="ap-current-title"><span id="ap-title-text">CerisePlayer # No songs detected.</span></div>
</div>

4. Define your playlist in the songlist.json file and place all your audio files in the audio folder.

{
  "home.mp3" :  ["Home", "Tsukasa Masuko"],
  "round1.mp3" :  [ "Round 1", "Hudson Soft"],
  "koj.mp3" : ["Kiss of Jealousy", "Yoko Shimomura"]
  // ...
}

5. Customize the appearance of the audio player.

#audio-player {
  display: flex;
  flex-wrap: wrap-reverse;
  width: 300px;
  background-color: #ff3366;
  border-image: url("img/b_ext.webp") 2 / 2px / 1px stretch;
  padding: 4px;
  background-image: url("img/logo.webp");
  background-position: bottom 2px right 4px;
  background-repeat:no-repeat;
}

#audio-player div,
#audio-player button,
#audio-player span {
  align-self: center;
}

#audio-player button {
  width: 24px;
  height: 24px;
  cursor: pointer;
  border: none;
}

#ap-buttons {
  margin: 0;
  padding: 0;
}

#ap-play.play {
  background: url("img/play.webp");
}

#ap-play.play:hover {
  background: url("img/play_h.webp");
}

#ap-play.play:active {
  background: url("img/play_p.webp");
}

#ap-play.pause {
  background: url("img/pause.webp");
}

#ap-play.pause:hover {
  background: url("img/pause_h.webp");
}

#ap-play.pause:active {
  background: url("img/pause_p.webp");
}

#ap-stop {
  background: url("img/stop.webp")
}

#ap-stop:hover {
  background: url("img/stop_h.webp")
}

#ap-stop:active {
  background: url("img/stop_p.webp")
}

#ap-fwd {
  background: url("img/fwd.webp")
}

#ap-fwd:hover {
  background: url("img/fwd_h.webp")
}

#ap-fwd:active {
  background: url("img/fwd_p.webp")
}

#ap-bwd {
  background: url("img/bwd.webp")
}

#ap-bwd:hover {
  background: url("img/bwd_h.webp")
}

#ap-bwd:active {
  background: url("img/bwd_p.webp")
}

#ap-vol {
  background-color: #000066;
  height: 16px;
  width: 32px;
  margin: 4px;
  border: 0px solid transparent;
  border-radius: 0px !important;
}

#ap-vol .ui-slider-range {
  background-color: #ffffff;
  border: 0px solid transparent;
  border-radius: 0px;
}

#ap-vol .ui-slider-range::after {
  content: url("img/vol_overlay.webp")
}

#ap-vol .ui-slider-handle {
  visibility: hidden;
}

#ap-vol::after {
  content: url("img/vol_overlay.webp")
}

#ap-bar {
  display: inline;
  background-color: #000066;
  height: 6px;
  align-self: center;
  margin: 8px;
  flex-basis:100%;
}

#ap-bar-full {
  position: relative;
  background-color: white;
  width: 0%;
  /* dynamic */
  height: 6px;
}

#ap-scroller {
  position: relative;
  background-color: yellow;
  opacity: 1;
  width: 4px;
  height: 4px;
  margin-top: -9px;
  cursor: pointer;
  /*dynamic */
  left: 0%;
}

#ap-scrollerdrag {
  display: inline-block;
  margin-left: -6px;
  margin-top: -10px;
}

#ap-time-current,
#ap-time-max {
  font-weight: 1000;
  text-shadow: 1px 1px 0px #000066;
}

#ap-time {
  margin: 4px;
  text-align: right;
  font-size: 13px;
  overflow: hidden;
  font-family: 'MS Gothic', mono;
}

#ap-current-title {
  flex-basis: 100%;
  /* breaks line */
  background-color: #000066;
  font-size: 13px;
  padding: 4px;
  margin: 0px;
  height:1em;
  border-image: url("img/b_int.webp") 2 / 2px / 1px stretch;
  white-space:nowrap;
  overflow: hidden;
}
#ap-title-text {
  position: relative;
  left:0px;
}

---

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