/*
var audio = $('');
$('.audio_wr').append(audio);
new zAudioPlayer(audio[0]);
*/
class zAudioPlayer {
constructor(player, options){
var defaultOptions = {
wrapper_class: 'audio-player',
after_init: function(){}
};
this.options = Object.assign(defaultOptions, options);
this.player = player;
this.player_wrapper = null;
this.isPlaying = false;
this.is_dragged = false;
this.duration = 0;
if('actual_duration' in this.options && this.options.actual_duration > 0){
console.log('передали actual_duration', this.options.actual_duration);
this.duration = this.options.actual_duration;
}
// elems
this.currentTimeDisplay = null;
this.totalTimeDisplay = null;
this.loading = null;
this.playPauseButton = null;
this.playPauseButtonIcon = null;
this.loading = null;
this.progressBar = null;
this.volumeControl = null;
this.speaker = null;
this.init();
this.events();
}
// =================
// INIT
// =================
init(){
var controls_tpl = `
`;
// собирем верстку
// если в размертке нет обертки - добавляем
$(this.player).wrap('');
// сохраняем врапер
this.player_wrapper = this.player.closest('.'+this.options.wrapper_class);
$(this.player_wrapper).append(controls_tpl);
// elems
this.currentTimeDisplay = $('.current-time', this.player_wrapper);
this.totalTimeDisplay = $('.total-time', this.player_wrapper);
this.playPauseButton = $('.play-pause-button', this.player_wrapper);
this.playPauseButtonIcon = $('path', this.playPauseButton);
this.loading = $('.loading', this.player_wrapper);
this.progressBar = $('.progress-bar', this.player_wrapper);
this.volumeControl = $('.volume-control', this.player_wrapper);
this.speaker = $('.volume_speaker', this.player_wrapper);
// iOS не позволяет программно устанавливать свойство «громкость»
// поэтому скрываем иконку
if (window.navigator.userAgent.match(/iPad/i) || window.navigator.userAgent.match(/iPhone/i)) {
$('.volume', this.player_wrapper).hide();
}
// callback
this.options.after_init(this);
}
// =================
// EVENTS
// =================
events(){
var _this = this;
// loadedmetadata
this.player.addEventListener('loadedmetadata', function(e){
_this.hideLoadingIndicator();
//_this.duration = duration;
if(_this.duration == 0){
var duration = _this.player.duration;
_this.duration = duration;
}
/*
// fix
// если у файла нет метаданных, то player.duration приходит равный "Infinity"
// в таком случае мы снаружи можем сами передать реальную продолжительность ролика в параметре 'actual_duration'.
// начинаем использовать ее
if(_this.duration=='Infinity' && _this.options.actual_duration && _this.options.actual_duration > 0){
_this.duration = _this.options.actual_duration / 1000;
}
*/
var totalMinutes = Math.floor(_this.duration / 60);
var totalSeconds = Math.floor(_this.duration % 60);
_this.totalTimeDisplay.text(`${totalMinutes}:${totalSeconds < 10 ? '0' : ''}${totalSeconds}`);
});
// timeupdate
this.player.addEventListener("timeupdate", function(e){
var currentTime = _this.player.currentTime;
var currentMinutes = Math.floor(currentTime / 60);
var currentSeconds = Math.floor(currentTime % 60);
var totalMinutes = Math.floor(_this.duration / 60);
var totalSeconds = Math.floor(_this.duration % 60);
_this.currentTimeDisplay.text(`${currentMinutes}:${currentSeconds < 10 ? '0' : ''}${currentSeconds}`);
_this.totalTimeDisplay.text(`${totalMinutes}:${totalSeconds < 10 ? '0' : ''}${totalSeconds}`);
var progress = (currentTime / _this.duration) * 100;
_this.progressBar.css('width', progress+'%');
});
this.player.addEventListener('seeking', function(){
_this.showLoadingIndicator();
});
this.player.addEventListener('seeked', function(){
_this.hideLoadingIndicator();
});
this.player.addEventListener('canplay', function(){
_this.hideLoadingIndicator()
});
// плей / пауза
this.playPauseButton[0].addEventListener("click", function(){
if (!_this.player.paused){
_this.pausePlayer(_this.player);
_this.isPlaying = false;
} else {
// останавливаем остальные плееры
var players = document.querySelectorAll('.audio-player audio');
for (var i = 0; i < players.length; i++){
_this.pausePlayer(players[i]);
}
_this.playPlayer(_this.player);
_this.isPlaying = true;
}
});
// изменение громкости
this.volumeControl[0].addEventListener("input", function(){
_this.player.volume = _this.volumeControl[0].value;
});
// после изменения громкости
this.player.addEventListener('volumechange', function(){
if (_this.player.volume >= 0.5) {
_this.speaker.attr('d', 'M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z');
} else if (_this.player.volume < 0.5 && _this.player.volume > 0.05) {
_this.speaker.attr('d', 'M0 7.667v8h5.333L12 22.333V1L5.333 7.667M17.333 11.373C17.333 9.013 16 6.987 14 6v10.707c2-.947 3.333-2.987 3.333-5.334z');
} else if (_this.player.volume <= 0.05) {
_this.speaker.attr('d', 'M0 7.667v8h5.333L12 22.333V1L5.333 7.667');
}
});
// конец
this.player.addEventListener('ended', function(){
_this.pausePlayer(_this.player);
_this.player.currentTime = 0;
});
// volume
$(this.player_wrapper).on('click', '.volume', function(e){
$('.speed.is_expand', this.player_wrapper).removeClass('is_expand');
var t = $(this);
if(t.hasClass('is_expand')){
setTimeout(function(){
t.removeClass('is_expand');
}, 150);
}else{
t.addClass('is_expand');
}
});
// speed
$(this.player_wrapper).on('click', '.speed', function(e){
$('.volume.is_expand', this.player_wrapper).removeClass('is_expand');
var t = $(this);
t.toggleClass('is_expand');
});
$(this.player_wrapper).on('click', '.speed_menu_item', function(e){
var speed = +$(e.target).data('speed');
var speed_wr = $(e.target).closest('.speed');
if(speed!=1){
speed_wr.append(''+(speed*100)+'%
');
}else{
$('.speed_tip', speed_wr).remove();
}
_this.player.playbackRate = speed;
$('.speed_menu_item').removeClass('is_active');
$(e.target).addClass('is_active');
setTimeout(function(){
speed_wr.removeClass('is_expand');
}, 150);
}.bind(this));
// клик по прогрессбару
$('.progress', this.player_wrapper).on('click', function(e){
var progress = $(this);
var mouseX = Math.floor(e.pageX - progress.offset().left);
var progress1 = mouseX / (progress.width() / 100);
_this.player.currentTime = _this.duration * (progress1 / 100);
});
$('.progress-bar-pin', this.player_wrapper).on('mousedown touchstart', function(e){
_this.is_dragged = true;
var progress = $(this).closest('.progress');
var bar = $(this).closest('.progress-bar');
$(document).on('mousemove touchmove', function(ev){
if(_this.is_dragged){
if(ev.originalEvent.touches){
var pageX = ev.originalEvent.touches[0].pageX;
}else{
var pageX = ev.pageX;
}
var left = Math.floor(pageX - progress.offset().left);
var width = left / (progress.width() / 100);
if(width <= 100){
bar.css('width', width+'%');
var seconds = _this.duration * width / 100;
_this.player.currentTime = seconds;
}
}
});
$(document).on('mouseup touchend', function(e){
_this.is_dragged = false;
});
});
// закрываем менюшки по клику вне меню
$(document).on('click', function(e){
if (!$(e.target).closest(".speed").length && !$(e.target).closest(".volume").length){
$('.speed.is_expand', _this.player_wrapper).removeClass('is_expand');
$('.volume.is_expand', _this.player_wrapper).removeClass('is_expand');
}
e.stopPropagation();
});
// обработчик нажития эскейпа
$(document).on('keyup', function(event){
if(event.keyCode === 27){
$('.speed.is_expand', _this.player_wrapper).removeClass('is_expand');
$('.volume.is_expand', _this.player_wrapper).removeClass('is_expand');
}
});
}
// =================
// FUNC
// =================
hideLoadingIndicator(){
$(this.playPauseButton).css('display', 'flex');
$(this.loading).hide();
}
showLoadingIndicator() {
$(this.playPauseButton).hide();
$(this.loading).css('display', 'flex');
}
playPlayer(player) {
player.play();
var playPauseButton = player.parentElement.querySelector('.play-pause-btn__icon');
playPauseButton.attributes.d.value = 'M0 0h6v24H0zM12 0h6v24h-6z';
//this.playPauseButtonIcon.attr('d', 'M0 0h6v24H0zM12 0h6v24h-6z');
}
pausePlayer(player){
player.pause();
var playPauseButton = player.parentElement.querySelector('.play-pause-btn__icon');
playPauseButton.attributes.d.value = 'M18 12L0 24V0';
//this.playPauseButtonIcon.attr('d', 'M18 12L0 24V0');
}
}