Player

by AJIEKCEU

HTML

<div class="player">
	<div class="player__cover">
    <img src="http://placehold.it/212x149/" />
	</div>
	<div class="player__title">
		<p class="player__title-text marquee"><span>Три причины, почему инвестировать в недвижимость нужно сегодня — Андрей Ваврыш</span>
		</p>
	</div>
	<audio class="audio" src="https://l-a-b-a.com/uploads/blog/podcast/laba-peremeny-mix-110621-60c8b32128c35400107588.mp3"></audio>
	<div class="player__controls">
		<div class="progress-container">
			<div class="progress"></div>
			<div class="progress__hover"></div>
		</div>
		<div class="player__progress-time-wrap">
			<p class="player__progress-time-current">00:00</p>
			<p class="player__progress-time-sum"></p>
		</div>
		<div class="player__nav">
			<button class="player__nav-btn player__nav-btn-rate">
				<span class="rate-active" data-rate="1">x1</span>
				<span data-rate="1.5">x1.5</span>
				<span data-rate="2">x2</span>
			</button>
			<button class="player__nav-btn player__nav-btn-backward">
				<span>15</span>
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 33" id="roundArrow">
    <path d="M15 0l4 4-4 4V5.005a12.996 12.996 0 1 0 9.702 4.349l-.003-.004 1.496-1.334a14.998 14.998 0 0 1 .75 19.056A15 15 0 1 1 15 3V0z">
    </path>
</svg>
			</button>
			<button class="player__nav-btn-play"></button>
			<button class="player__nav-btn player__nav-btn-forward">
				<span>15</span>
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 33" id="roundArrow">
    <path d="M15 0l4 4-4 4V5.005a12.996 12.996 0 1 0 9.702 4.349l-.003-.004 1.496-1.334a14.998 14.998 0 0 1 .75 19.056A15 15 0 1 1 15 3V0z">
    </path>
</svg>
			</button>
		</div>
	</div>
</div>

CSS

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, address, em, img, q, samp, small, strong, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, nav, section, time, mark, audio, video{
  margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
html *{
  box-sizing: border-box;
  text-size-adjust: 100%;
  font-size: 100%;
  outline: none;
}
		
html *:before, html *:after{
  box-sizing: border-box;
}
			
body{
  background: #fff;
	color: #000;
	direction: ltr;
	font: 400 14px/1.3 sans-serif, Arial, Helvetica, Verdana;
}
	
@keyframes goals-fade{
   0%{
    background-color: transparent;
  }
  to{
    background-color: rgba(0, 0, 0, .6);
  }
}
	
@keyframes feedback-fade-in{
  0%{
    opacity: 0;
		transform: translateY(200vh);
  }
	to{
	  opacity: 1;
		transform: translateY(0);
	}
}
	

.player{
  	width: 100%;
    max-width: 780px;
    padding: 15px;
    border-radius: 9px;
    background-color: #cfcfcf;
    display: grid;
    grid-template-columns: 106px 1fr;
    grid-template-rows: 65px auto;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
  }

.player__cover{
  width: 100%;
	height: 100%;
	border-radius: 7px;
	overflow: hidden;
	display: flex;
	grid-column: 1/2;
	grid-row: 1/2;
}
	

.player__cover img{
  	width: 100%;
    height: 100%;
    object-fit: cover;
    align-self: center;
    border-radius: 15px;
  }


.player__title{
  	grid-column: 2/3;
    grid-row: 1/2;
    max-height: 3.5625rem;
    overflow: hidden;
    position: relative;
    align-self: center;
}


.player__title-text{
  	display: inline-block;
    width: 100%;
    position: relative;
    overflow: hidden;
    margin: 0;
    height: 20px;
    font-size: .8125rem;
    line-height: 1.1875rem;
    color: #131313;
}


.player__title-text *[class^="marquee"]{
  display: inline-block;
	white-space: nowrap;
	position:...

JavaScript

var obj = {
			win: $(window),
			body: $('body'),
			audio: $('.audio'),
		};


/*АУДИО ПЛЕЕР*/

		/*Кнопка перемотки назад на 15 секунд*/
		obj.body.on('click', '.player__nav-btn-backward', function (){
			var that = $(this),
				parent = that.closest('.player'),
				track = parent.find('.audio');
			track[0].currentTime = Math.max(track[0].currentTime - 15, 0)
		});

		/*Кнопка перемотки вперёд на 15 секунд*/
		obj.body.on('click', '.player__nav-btn-forward', function (){
			var that = $(this),
				parent = that.closest('.player'),
				track = parent.find('.audio');
			track[0].currentTime = Math.min(track[0].currentTime + 15, track[0].duration)
		});

		/*Кнопка ускорения*/
		obj.body.on('click', '.player__nav-btn-rate', function (){
			var that = $(this),
				parent = that.closest('.player'),
				rate = parent.find('.player__nav-btn-rate span'),
				track = parent.find('.audio'),
				speed = track[0].playbackRate;
			rate.removeClass('rate-active');
			switch (speed){
				case 1:
					track[0].playbackRate += 0.5;
					parent.find('.player__nav-btn-rate span[data-rate="'+track[0].playbackRate+'"]').addClass('rate-active');
					break;
				case 1.5:
					track[0].playbackRate += 0.5;
					parent.find('.player__nav-btn-rate span[data-rate="'+track[0].playbackRate+'"]').addClass('rate-active');
					break;
				case 2:
					track[0].playbackRate = 1;
					parent.find('.player__nav-btn-rate span[data-rate="'+track[0].playbackRate+'"]').addClass('rate-active');
					break;
				default:
					break;
			}
		});

		/*Кнопка play*/
		obj.body.on('click', '.player__nav-btn-play:not(.active)', function (){
			var that = $(this),
				parent = that.closest('.player'),
				track = parent.find('.audio');

			obj.audio.each(function (index, element){
				element.pause();
				$('.player__nav-btn-play').removeClass('active');
			});

			$(this).addClass('active');
			track[0].play();
		});

		/*Кнопка pause*/
		obj.body.on('click','.player__nav-btn-play.active', function...