Nation Library - BasicAudioPlayer example

Shows how to create an HTML5 audio player with and without custom controls

by NationStudio

HTML

<script src="https://techdocs.wearenation.co.uk/nation/Utils.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/EventDispatcher.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/MediaControls.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/ProgressBar.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/Animation.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/audio/BasicAudioPlayer.js"></script>
<h2>Default Controls</h2>
<div class="js-audio-player default" data-mpeg="https://techdocs.wearenation.co.uk/js/assets/test-audio.mp3">
  <div class="js-player">
    
  </div>
</div>
<h2>Custom Controls</h2>
<div class="js-audio-player custom" data-mpeg="https://techdocs.wearenation.co.uk/js/assets/test-audio.mp3">
  <div class="js-player">
    
  </div>
  <div class="controls-container">
    <div class="js-video-overlay"></div>
    <div class="js-controls">
      <div class="js-progress-bar">
        <div class="js-progress"></div>
        <div class="js-hitarea"></div>
        <div class="js-handle"></div>
      </div>
      <a href="#" class="js-play-button button"></a>
      <a href="#" class="js-mute-button button"></a>
      <div class="times">
        <span class="js-current-time">0:00</span>
        <span class="js-duration">0:00</span>
      </div>
    </div>
  </div>
</div>

CSS

h2 {
  clear: left;
  width: 100%;
  font-family: sans-serif;
  font-size: 18px;
}

.js-audio-player {
  clear: left;
  position: relative;
  width: 450px;
  margin-bottom: 20px;
  background: #000;
}
.js-audio-player.default {
  width: auto;
  float: left;
}

video {
  width: 100%;
}

.js-player {
  
}

.controls-container {
  overflow: hidden;
}

.js-controls {
  width: 100%;
  font-family: sans-serif;
  background: #000;
}

.button {
  display: inline-block;
  min-width: 70px;
  margin-top: 10px;
  padding: 5px;
  border: 0;
  text-align: center;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  background: #0C54D9;
  font-family: sans-serif;
}
button.active {
  background: #ff0066;
}

.js-play-button:after {
  content: "Play";
}
.js-play-button.active:after {
  content: "Pause";
}

.js-mute-button:after {
  content: "Mute";
}
.js-mute-button.active:after {
  content: "UnMute";
}

.js-full-screen-button:after {
  content: "Enter Full Screen";
}
.js-full-screen-button.active:after {
  content: "Exit full screen";
}

.js-progress-bar {
  position: relative;
  height: 10px;
  background: #0D398B;
}

.js-progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #0C54D9;
}

.js-hitarea {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.js-handle {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 100%;
  cursor: pointer;
  background: #ff0066;
}

.times {
  position: absolute;
  right: 10px;
  bottom: 5px;
  font-family: sans-serif;
  color: #fff;
}

.js-current-time:after {
  content: " /";
}

JavaScript

// First, create an audio player with the default browser controls
var element = document.querySelector(".js-audio-player.default");
// Set options to use custom controls, and mute sound
var options = {
  controls: true,
  autoPlay: false
};
var player = new NATION.audio.BasicAudioPlayer(element, options);

// Now create an audio player without the default controls
element = document.querySelector(".js-audio-player.custom");
options.controls = false;
player = new NATION.audio.BasicAudioPlayer(element, options);
// And instead, create custom controls
element = document.querySelector(".controls-container");
options = {
  handlePositioning: "inside"
}
var controls = new NATION.MediaControls(element, options);
var wasPlaying = false;

// Connect controls to the audio player
controls.addListener(controls.PLAY_CLICKED, function(e) {
  player.play();
});
controls.addListener(controls.PAUSE_CLICKED, function(e) {
  player.pause();
});
controls.addListener(controls.MUTE_CLICKED, function(e) {
  player.mute();
});
controls.addListener(controls.UNMUTE_CLICKED, function(e) {
  player.unMute();
});
controls.addListener(controls.PROGRESS_CLICKED, function(e) {
  var percentage = controls.getRequestedPercentage();
  player.seekTo(percentage * player.getDuration());
  controls.setProgress(percentage);
});
controls.addListener(controls.HANDLE_MOUSE_DOWN, function(e) {
  wasPlaying = player.isPlaying();
});
controls.addListener(controls.HANDLE_RELEASED, function(e) {
  var percentage = controls.getRequestedPercentage();
  player.pause();
  player.seekTo(percentage * player.getDuration());
  controls.setProgress(percentage);
  if (wasPlaying) {
  	wasPlaying = false;
    player.play();
	}
})

// Listen to events from the audio player
player.addListener(player.META_LOADED, function(e) {
  controls.setDisplayedDuration(player.getDurationText());
});
player.addListener(player.PLAY_PROGRESS, function(e) {
  var progress = player.getPlayProgress();
  controls.setProgress(progress);
 ...