Construct A Retro-Type HTML5 Audio Participant With CerisePlayer

CerisePlayer is a light-weight HTML5 audio participant that mixes retro design with fashionable performance. Constructed utilizing jQuery and jQuery UI.

This audio participant helps a number of audio tracks and autoplay. It could actually robotically transfer to the subsequent track as soon as the present one finishes.

CerisePlayer additionally options important controls similar to a quantity slider and search bar, and it enables you to handle playlists simply by way of a easy JSON file. 

Find out how to use it:

1. Load the required jQuery and jQuery UI libraries within the doc.

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

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

2. Obtain the audioplayer.js file and embrace it in your doc after the jQuery libraries.

<script sort="textual content/javascript" src="/path/to/audioplayer.js"></script>

3. Create the HTML construction for the participant. This is the bottom code that features audio controls and shows the present track data.

<div id="audio-player">
  <audio id="ap-current">
    <!-- Preliminary Tune -->
    <supply id="ap-source" src="audio/house.mp3" sort="audio/mpeg">
    <!-- Your browser doesn't assist the audio factor. -->
  </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. Outline your playlist within the songlist.json file and place all of your audio recordsdata within the audio folder.

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

5. Customise the looks of the audio participant.

#audio-player {
  show: 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/brand.webp");
  background-position: backside 2px proper 4px;
  background-repeat:no-repeat;
}

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

#audio-player button {
  width: 24px;
  peak: 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:lively {
  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:lively {
  background: url("img/pause_p.webp");
}

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

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

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

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

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

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

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

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

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

#ap-vol {
  background-color: #000066;
  peak: 16px;
  width: 32px;
  margin: 4px;
  border: 0px stable clear;
  border-radius: 0px !essential;
}

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

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

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

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

#ap-bar {
  show: inline;
  background-color: #000066;
  peak: 6px;
  align-self: middle;
  margin: 8px;
  flex-basis:100%;
}

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

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

#ap-scrollerdrag {
  show: 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: proper;
  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;
  peak:1em;
  border-image: url("img/b_int.webp") 2 / 2px / 1px stretch;
  white-space:nowrap;
  overflow: hidden;
}
#ap-title-text {
  place: relative;
  left:0px;
}

This superior jQuery plugin is developed by CerryTsuki. For extra Superior Usages, please test the demo web page or go to the official web site.