btrtracks/public/player.js

(function () {
  var audio = document.querySelector('#player')

  var play = document.querySelector('#player-play')

  var ts = document.querySelector('#player-ts')
  var seek = document.querySelector('#player-seekbar')
  var seekBar = document.querySelector('#player-seekbar .seek-inner')

  var mute = document.querySelector('#player-mute')
  var vol = document.querySelector('#player-volbar')
  var volBar = document.querySelector('#player-volbar .seek-inner')
  var volElem = document.querySelector('.volume')

  // Seconds into HH:MM:SS
  function toHHMMSS (numbr) {
    let secNum = parseInt(numbr, 10) // don't forget the second param
    let hours = Math.floor(secNum / 3600)
    let minutes = Math.floor((secNum - (hours * 3600)) / 60)
    let seconds = secNum - (hours * 3600) - (minutes * 60)

    if (hours < 10) hours = '0' + hours
    if (minutes < 10) minutes = '0' + minutes
    if (seconds < 10) seconds = '0' + seconds

    let time = ''
    if (parseInt(hours) > 0) {
      time = hours + ':' + minutes + ':' + seconds
    } else {
      time = minutes + ':' + seconds
    }
    return time
  }

  function relMouseCoords (e) {
    let x
    let y

    if (e.changedTouches) {
      let touch = e.changedTouches[0]
      if (touch) {
        e.pageX = touch.pageX
        e.pageY = touch.pageY
      }
    }

    if (e.pageX || e.pageY) { 
      x = e.pageX
      y = e.pageY
    } else {
      x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft
      y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop
    }

    x -= this.offsetLeft
    y -= this.offsetTop

    return {x: x, y: y}
  }

  function updateSeeker() {
    if (isNaN(audio.duration) || audio.duration === 0) return

    ts.innerHTML = toHHMMSS(audio.currentTime) + ' / ' + toHHMMSS(audio.duration)

    let progress = 100 * audio.currentTime / audio.duration

    seekBar.style.width = progress + '%'
  }

  function updateVolume() {
    volBar.style.width = (100 * audio.volume) + '%'

    if (audio.muted) {
      mute.className = 'muted-btn flex-col icon'
    } else if (audio.volume > 0.5) {
      mute.className = 'mute-btn flex-col icon'
    } else {
      mute.className = 'mute1-btn flex-col icon'
    }
  }

  function seekProperty (prop, max, e) {
    if (isNaN(max) || max === 0) return

    let pos = relMouseCoords.call(this, e)
    let clickPercent = pos.x / this.offsetWidth

    if (max == 1) {
      audio[prop] = clickPercent
      return
    }

    audio[prop] = Math.floor(max * clickPercent)
  }

  function setClass (elem, int, rep) {
    let classString = elem.className

    if (classString.indexOf(int) !== -1) {
      classString = classString.replace(int, rep)
    } else if (classString.indexOf(rep) !== -1) {
      return
    }

    elem.className = classString
  }

  function togglePlayButton () {
    if (audio.paused) {
      setClass(play, 'pause-btn', 'play-btn')
    } else {
      setClass(play, 'play-btn', 'pause-btn')
    }
  }

  function registerSeekBar (element, v, mv) {
    let seeking = false
    let moved = false

    element.addEventListener('mousedown', function (e) {
      seeking = true
      moved = false
    }, false)

    element.addEventListener('mousemove', function (e) {
      if (!seeking) return
      moved = true

      if (v === 'currentTime') {
        audio.seeking = true
      }

      seekProperty.call(element, v, (mv ? audio[mv] : 1), e)
    })

    element.addEventListener('mouseup', function (e) {
      if (!seeking) return
      seeking = false

      if (moved) {
        if (v === 'currentTime') {
          audio.seeking = false
        }
        return
      }

      seekProperty.call(element, v, (mv ? audio[mv] : 1), e)
    })

    element.addEventListener('mouseleave', function (e) {
      if (!seeking) return
      seeking = false

      updateSeeker()
    })
  }

  audio.addEventListener('durationchange', updateSeeker, false)
  audio.addEventListener('volumechange', updateVolume, false)
  audio.addEventListener('timeupdate', updateSeeker, false)

  audio.addEventListener('play', togglePlayButton, false)
  audio.addEventListener('pause', togglePlayButton, false)
  audio.addEventListener('stop', togglePlayButton, false)

  play.addEventListener('click', function (e) {
    if (audio.paused) {
      audio.play()
    } else {
      audio.pause()
    }
  }, false)

  mute.addEventListener('click', function (e) {
    audio.muted = !audio.muted
  }, false)

  registerSeekBar(seek, 'currentTime', 'duration')
  registerSeekBar(vol, 'volume')

  function wheelVolume (e) {
    var delta = e.wheelDelta || -e.detail
    if (delta < -1) delta = -1
    if (delta > 1) delta = 1

    let av = audio.volume + (delta / 10)
    if (av > 1) av = 1
    if (av < 0) av = 0

    audio.volume = av
  }

  volElem.addEventListener('DOMMouseScroll', wheelVolume, false)
  volElem.addEventListener('mousewheel', wheelVolume, false)

  updateVolume()
})()