1
\$\begingroup\$

i made an audio player in html5 for learning purposes, also i tried to use BEM pattern with sass (i dont know if i did it well) i also encapsuled my code as much as possible, but i think i can make it better, maybe i can include some js pattern or maybe i can divide my code in different files, basically im just asking for a code review.

here is the repo https://github.com/Zybax/Custom-HTML5-Audio-Player

Thank you

const Player = function(){
    const audioTrack  = document.querySelector('#audioPlayer');
    const playButton = document.querySelector('#playButton');
    const timeline = document.querySelector('#timeline');
    const progressionBar = document.querySelector('#progression-bar ');
    const playhead = document.querySelector('#playhead');
    const totalTime = document.querySelector('#timer-total-time');
    const currentTime = document.querySelector('#timer-current-time');
    const volumeIcon = document.querySelector('#volume-icon');
    const volumeBar = document.querySelector('#volume-bar');
    const volumeLine = document.querySelector('#volume-line');
    const volumeHead = document.querySelector('#volume-head');
    let duration;
    
    // Play and pause audio
    function toogleAudio(){
        if (audioTrack.paused){
          playButton.classList.replace("fa-play","fa-pause");
          audioTrack.play();
        } 
        else 
        {
          playButton.classList.replace("fa-pause","fa-play");
          audioTrack.pause();      
        }
     }
    
     // Update the timer and the progression bar
    function timeUpdate() {
      if (!duration) getTrackDuration();   
      if ( audioTrack.currentTime === duration){
        playButton.classList.replace("fa-pause","fa-play");
      }
      
      timerUpdate();
      progressionUpdate();
    }
     
    
    // Update the timer
    function timerUpdate() {
     const totalMinutes = parseInt(duration / 60, 10);
     const totalSeconds = parseInt(duration % 60);
      
     let currentMinutes = parseInt(audioTrack.currentTime / 60, 10);
     let currentSeconds = parseInt(audioTrack.currentTime % 60);
        
     totalTime.innerHTML = totalMinutes + ":" + totalSeconds;
     currentTime.innerHTML = currentMinutes + ":" + currentSeconds;
      
    }
    
    // Fills the progression bar
    function progressionUpdate() {  
      let playPercent = 100 * (audioTrack.currentTime / duration);
      timeline.style.width = playPercent + "%";
      playhead.style.marginLeft = (playPercent - 1.2) + "%";
    }
    
    
    // Gets audio file duration
    function getTrackDuration(){
      if(audioTrack.readyState > 0) 
        {
            duration = audioTrack.duration;
        }
    }
    
    
    // Returns elements left position relative to top-left of viewport
    function getPosition(el) {
        return el.offsetLeft;
    }
    
    
    // Sets new position of the progression bar when clicked
    function setProgressionPosition(event){
        if (!duration) getTrackDuration();
        audioTrack.currentTime = (clickPercent(event, progressionBar) * duration);
      }
    
     // Toggle the volume
    function toogleVolume(){
        if (audioTrack.muted){
          volumeIcon.classList.replace("fa-volume-mute","fa-volume-up");
          volumeLine.style.display = 'block';
          volumeHead.style.display = 'block';
          audioTrack.muted = false;
        } 
        else 
        {
          volumeIcon.classList.replace("fa-volume-up","fa-volume-mute");
          volumeLine.style.display = 'none';
          volumeHead.style.display = 'none';
          audioTrack.muted = true;     
        }
     }
    
    // Update the volume and the volume bar
    function volumeUpdate(event) {
      volumeLine.style.display = 'block';
      volumeHead.style.display = 'block';
      setVolume(event);
      volumeBarUpdate();
    }
    
    
    // Sets audio volume
    function setVolume(event){
        audioTrack.volume = clickPercent(event, volumeBar);
    }
    
    
    // Fills the volume  bar
    function volumeBarUpdate() { 
      let volumePercent = 100 * (audioTrack.volume / 1); 
      volumeLine.style.width = volumePercent + "%"; 
      volumeHead.style.marginLeft = (volumePercent - 6) + "%";
    }
    
   
    // Returns the percent of the bar when clicked related to the bar's width
    function clickPercent(event, bar) {   
      const newPercent = (event.clientX - getPosition(bar)) / bar.offsetWidth;
      return newPercent;
    }
    
    // Removes events on mouse up
    function mouseUpEventRemove()
    {
        window.removeEventListener('mousemove', playHeadMove, true);
        window.removeEventListener('mousemove', volumeHeadMove, true);
    }
  
    // Adds mousemove event on mousedown with a specified function
    function mouseDown(event, func){
      window.addEventListener('mousemove', func, true);
    }
    
    function playHeadMove(event){
      setProgressionPosition(event);
    }
    
    function volumeHeadMove(event){
      volumeUpdate(event);
    }
    
    
    // Listeners
    function addListeners(){
      audioTrack.addEventListener("timeupdate", timeUpdate, false);
      playButton.addEventListener('click', toogleAudio, false);
      progressionBar.addEventListener("click", setProgressionPosition, false);
      progressionBar.addEventListener("mousedown", function(event){mouseDown(event, playHeadMove)}, false);
      playhead.addEventListener('mousedown', function(event){mouseDown(event, playHeadMove)}, false);
      volumeBar.addEventListener("click", volumeUpdate, false);
      volumeBar.addEventListener('mousedown', function(event){mouseDown(event, volumeHeadMove)}, false);
      volumeIcon.addEventListener("click",toogleVolume, false);
      volumeHead.addEventListener('mousedown', function(event){mouseDown(event, volumeHeadMove)}, false);
      window.addEventListener('mouseup', mouseUpEventRemove, false);
    }
  
    window.onload = addListeners();
  }
  
export default Player();

\$\endgroup\$

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.