btrtracks/public/player.js

205 lines
5.0 KiB
JavaScript

(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')
var playerContext = []
// 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 (audio.duration === Infinity || isNaN(audio.duration)) {
ts.innerHTML = toHHMMSS(audio.currentTime)
seekBar.style.width = '0%'
} else {
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) {
window.resumeAudioContexts()
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()
})()