Creating a Simple Audio Player With Sound Manager

The Sound Manager 2 wraps and enhances both the HTML audio and the Flash audio API, providing a single, integrated sound API for Javascript. Regardless of the technology working under the hood to run the sound, the API is compatible. Now when you find out what this library is and why you want to use it, instead of listing the available methods and properties, I have guided you about building a small project developed using SoundManager 2.

In this section, we will develop a simple and functional audio player using HTML, CSS, and Javascript with the support of Sound Manager 2. To keep things as simple as possible, our player will allow a user to play an audio file which we will have a hard code in the source. You can easily modify the source so that users can choose what audio they want to play , Perhaps using a selection menu.

Our player gives the ability of a user:

•     play and stop an audio file
•     pause and resume an audio file
•     turn up and down the volume
•     move the current position of the audio file 30 seconds back and forth
•     know the duration of the file audio and the time elapsed since its start
•     know the current volume.

In addition to buttons, we need three more elements to show the time elapses, the total duration of the audio file, and the player's volume (starting from 100). A possible implementation of these requirements is shown below:

<div class="player">
   <div class="player__audio-info">
      <div>
         Played
         <span class="player__time-elapsed">-</span> of
         <span class="player__time-total">-</span>
         <button class="player__previous button button--small">Move back</button>
         <button class="player__next button button--small">Move forth</button>
      </div>
      <div>
         Volume: <span class="player__volume-info">100</span>
         <button class="player__volume-down button button--small">Volume down</button>
         <button class="player__volume-up button button--small">Volume up</button>
      </div>
   </div>
   <button class="player__play button button--large">Play</button>
   <button class="player__stop button button--large">Stop</button>
</div>

The functions and variables that we have just described are shown below:

function formatMilliseconds(milliseconds) {
   var hours = Math.floor(milliseconds / 3600000);
   milliseconds = milliseconds % 3600000;
   var minutes = Math.floor(milliseconds / 60000);
   milliseconds = milliseconds % 60000;
   var seconds = Math.floor(milliseconds / 1000);
   milliseconds = Math.floor(milliseconds % 1000);

   return (hours > 0 ? hours : '0') + ':' +
      (minutes < 10 ? '0' : '') + minutes + ':' +
      (seconds < 10 ? '0' : '') + seconds + ':' +
      (milliseconds < 100 ? '0' : '') + (milliseconds < 10 ? '0' : '') + milliseconds;
}

var player = {
   btnPlay: document.querySelector('.player__play'),
   btnStop: document.querySelector('.player__stop'),
   btnPrevious: document.querySelector('.player__previous'),
   btnNext: document.querySelector('.player__next'),
   btnVolumeDown: document.querySelector('.player__volume-down'),
   btnVolumeUp: document.querySelector('.player__volume-up'),
   timeElapsed: document.querySelector('.player__time-elapsed'),
   timeTotal: document.querySelector('.player__time-total'),
   volume: document.querySelector('.player__volume-info')
};
var audio = null;

The rest of the code that implements the features we describe is presented below:

player.btnPlay.addEventListener('click', function() {
   if (audio === null) {
     return;
   }
   
   if (audio.playState === 0 || audio.paused === true) {
     audio.play();
     this.classList.add('is-playing');
   } else {
     audio.pause();
     this.classList.remove('is-playing');
   }
});

player.btnStop.addEventListener('click', function() {
   if (audio === null) {
     return;
   }

   audio.stop();
   document.querySelector('.player__time-elapsed').textContent = formatMilliseconds(0);
   player.btnPlay.classList.remove('is-playing');
});

player.btnVolumeDown.addEventListener('click', function() {
   if (audio === null) {
     return;
   }

   var volume = audio.volume - 10 < 0 ? 0 : audio.volume - 10;
   audio.setVolume(volume);
   player.volume.textContent = volume;
});

player.btnVolumeUp.addEventListener('click', function() {
   if (audio === null) {
     return;
   }

   var volume = audio.volume + 10 > 100 ? 100 : audio.volume + 10;
   audio.setVolume(volume);
   player.volume.textContent = volume;
});

player.btnPrevious.addEventListener('click', function() {
   if (audio === null) {
     return;
   }

   var position = audio.position - 30000 < 0 ? 0 : audio.position - 30000;
   audio.setPosition(position);
   player.timeElapsed.textContent = formatMilliseconds(audio.position);
});

player.btnNext.addEventListener('click', function() {
   if (audio === null) {
     return;
   }

   var position = audio.position + 30000 > audio.duration ? audio.duration : audio.position + 30000;
   if (position === audio.duration) {
      var event;
      try {
         // Internet Explorer does not like this statement
         event = new Event('click');
      } catch (ex) {
         event = document.createEvent('MouseEvent');
         event.initEvent('click', true, false);
      }
      player.btnStop.dispatchEvent(event);
   } else {
      audio.setPosition(position);
      player.timeElapsed.textContent = formatMilliseconds(audio.position);   
   }
});