Player Custom

by Edgar Martinez

HTML

<h1>HTML5 Audio Player Demo</h1>
<input type="file" accept="audio/*"/>
<div id="message"></div>
<audio id="music" autoplay="autoplay">
  Your browser does not support the audio format.
</audio> 
<div id="audio_player" style="">
			<progress id='progress-bar' min='0' max='100' value='0'>0% played</progress>
			<button id='btnReplay' class='replay' title='replay' accesskey="R" onclick='replayAudio();'>Replay</button>	
			<button id='btnPlayPause' class='play' title='play' accesskey="P" onclick='playPauseAudio();'>Play</button>
			<button id='btnStop' class='stop' title='stop' accesskey="X" onclick='stopAudio();'>Stop</button>
      <input type="range" id="volume-bar" title="volume" min="0" max="10" step="1" value="10">
			<button id='btnMute' class='mute' title='mute' onclick='muteVolume();'>Mute</button>	
</div>

<br />
<br />
<hr />

CSS

#audio_player, .info, .error, input {
  display: block;
  width: 427px;
  margin: auto auto auto auto;
}

.info {
    background-color: aqua;     
}

.error {
    background-color: red;
    color: white;
}

body { 
  font-family: Verdana, Geneva, sans-serif; 
  background-color: lightgray;
  margin-top: 30px;
  text-align: center;
}

p { font-size: 0.9em; }

h1 { 
  font-size:20px;
  color:#333;
}

#audio_player {
  //float:left;
  padding:2px 2px 1px 2px;
  background-color:black;
  border:2px solid darkgreen;
  border-radius: 9px;
  margin-top: 30px;
}
/* #controls {
border: 1px solid darkgreen;
width: 425px;
//margin-left: auto;
//margin-right: auto;
//margin-top: 5px;
//padding-bottom: 3px;
border-radius: 7px;
}
*/
button {
  text-indent:-9999px;
  width:16px;
  height:18px;
  border:none;
  cursor:pointer;
  background:transparent...

JavaScript

var player = document.getElementById('music'); // id for audio element
var duration; // Duration of audio clip
btnPlayPause = document.getElementById('btnPlayPause');
btnMute      = document.getElementById('btnMute');
progressBar  = document.getElementById('progress-bar');
volumeBar    = document.getElementById('volume-bar');
source       = document.getElementById('audioSource');
  
// Update the video volume
volumeBar.addEventListener("change", function(evt) {function displayMessage(message, canPlay) {
    var element = document.querySelector('#message');
    element.innerHTML = message;
    element.className = canPlay ? 'info' : 'error';
}
  player.volume = parseInt(evt.target.value) / 10;
});

// Add a listener for the timeupdate event so we can update the progress bar
player.addEventListener('timeupdate', updateProgressBar, false);
	
// Add a listener for the play and pause events so the buttons state can be updated
player.addEventListener('play', function() {
  // Change the button to be a pause button
  changeButtonType(btnPlayPause, 'pause');
}, false);
  
player.addEventListener('pause', function() {
  // Change the button to be a play button
  changeButtonType(btnPlayPause, 'play');
}, false);

player.addEventListener('volumechange', function(e) { 
  // Update the button to be mute/unmute
  if (player.muted) changeButtonType(btnMute, 'unmute');
  else changeButtonType(btnMute, 'mute');
}, false);	

player.addEventListener('ended', function() { this.pause(); }, false);	

progressBar.addEventListener("click", seek);

function seek(e) {
  if (player.src) {
    var percent = e.offsetX / this.offsetWidth;
    player.currentTime = percent * player.duration;
    e.target.value = Math.floor(percent / 100);
    e.target.innerHTML = progressBar.value + '% played';
  }
}

function playPauseAudio() {
  if (player.src) {
    if (player.paused || player.ended) {
      // Change the button to a pause button
      changeButtonType(btnPlayPause, 'pause');
     ...