var app = new Vue({
el: '#player',
delimiters: ['{', '}'],
data: {
isPlaying: false,
currentMils: '0',
durationMilliseconds: '180.767347',
duration: 'xx:xx',
current: '0:00',
volume: 0.5,
interval: null,
},
methods: {
toggle() {
this.isPlaying = !this.isPlaying;
},
parseTime(time) {
let minutes = Math.floor(time / 60),
seconds = '' + parseInt(time - minutes * 60);
if (seconds.split('').length === 1)
seconds = '0' + seconds;
return minutes + ' : ' + seconds;
},
changeAudio(e) {
player.currentTime = e;
},
mute() {
this.volume = 0;
volumeControl.value = 0;
}
},
mounted() {
this.interval = setInterval(() => {
this.currentMils = player.currentTime;
this.current = this.parseTime(player.currentTime);
if(this.currentMils == this.durationMilliseconds) {
this.isPlaying = false;
this.currentMils = 0;
}
} , 1000);
player.volume = this.volume;
},
watch: {
isPlaying: function (val) {
if(val) {
player.play();
} else {
player.pause();
}
},
volume: function (val) {
player.volume = val;
}
}
});
<div class="col-lg-6">
<div class="mt-lg-3 mb-3 mb-lg-0">
<input id="progress"
type="range"
min="0"
max="180"
step="1"
value="0"
class="p-0">
<p class="d-none d-lg-flex justify-content-between align-items-center text-14px font-weight-bold mt-2">
<span>{ current }</span>
<span class="time-music"></span>
</p>
</div>
</div>
function readableDuration(seconds) {
sec = Math.floor( seconds );
min = Math.floor( sec / 60 );
min = min >= 10 ? min : '' + min;
sec = Math.floor( sec % 60 );
sec = sec >= 10 ? sec : '0' + sec;
return min + ':' + sec;
}
setTimeout(function(){
var timeMusic = document.querySelectorAll('.time-music');
for (let index = 0; index < timeMusic.length; index++) {
timeMusic[index].innerHTML = readableDuration(audio.duration);
}
}, 200);