https://ashokr.com/script.js

1/*
2 * Icons by:
3 * Font Awesome – http://fontawesome.io/
4 * Those Icons – https://www.flaticon.com/authors/those-icons
5 * EpicCoders – https://www.flaticon.com/authors/epiccoders
6 * Smashicons – https://www.flaticon.com/authors/smashicons
7 */
8
9$(document).ready(function () {
10	var songs = [
11		{
12			title: "Hariharan Hits Vol-1",
13			artist: "Hariharan (1995 to 2005)",
14			cover: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/rockstar-album-cover.jpg",
15			audioFile: "/music/ashok_hits_hariharan_songs.mp3",
16			color: "#c3af50"
17		},
18		{
19			title: "Hariharan Hits Vol-2",
20			artist: "Hariharan (1995 to 2005)",
21			cover: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/rockstar-album-cover.jpg",
22			audioFile: "/music/ashok_hits_hariharan_songs.mp3",
23			color: "#25323b"
24		},
25		{
26			title: "Hariharan Hits Vol-3",
27			artist: "Hariharan (1995 to 2005)",
28			cover: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/rockstar-album-cover.jpg",
29			audioFile: "/music/ashok_hits_hariharan_songs.mp3",
30			color: "#c1c1c1"
31		},
32		{
33			title: "Hariharan Hits Vol-4",
34			artist: "Hariharan (1995 to 2005)",
35			cover: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/rockstar-album-cover.jpg",
36			audioFile: "/music/ashok_hits_hariharan_songs.mp3",
37			color: "#cd4829"
38		},
39
40	];
41	
42	for (let song of songs) {
43		$("#songs").append('<li class="song" data-audio="' + song.audioFile + '" data-color="'+ song.color +'">' + 
44			'<img src="' + song.cover + '">' +
45			'<p class="song-title">' + song.title + '</p>' +
46			'<p class="song-artist">' + song.artist + '</p>' + 
47			'</li>');
48	}
49	
50	$('.jcarousel').jcarousel({
51			wrap: 'circular'
52	});
53});
54
55/*
56 * Replace all SVG images with inline SVG
57 */
58jQuery('img[src$=".svg"]').each(function(){
59	var $img = jQuery(this);
60	var imgID = $img.attr('id');
61	var imgClass = $img.attr('class');
62	var imgURL = $img.attr('src');
63
64	jQuery.get(imgURL, function(data) {
65		// Get the SVG tag, ignore the rest
66		var $svg = jQuery(data).find('svg');
67
68		// Add replaced image's ID to the new SVG
69		if(typeof imgID !== 'undefined') {
70			$svg = $svg.attr('id', imgID);
71		}
72		// Add replaced image's classes to the new SVG
73		if(typeof imgClass !== 'undefined') {
74			$svg = $svg.attr('class', imgClass+' replaced-svg');
75		}
76
77		// Remove any invalid XML tags as per http://validator.w3.org
78		$svg = $svg.removeAttr('xmlns:a');
79
80		// Replace image with new SVG
81		$img.replaceWith($svg);
82
83	}, 'xml');
84
85});
86
87// Current slide
88$('.jcarousel').on('jcarousel:visiblein', 'li', function(event, carousel) {
89	let cover = $(this).find("img").attr("src");
90	let songTitle = $(this).find("p.song-title").html();
91	let songArtist = $(this).find("p.song-artist").html();
92	let audioSrc = $(this).attr("data-audio");
93	let backgroundColor = $(this).attr("data-color");
94	$("body").css('background', backgroundColor)
95	$("#background").css('background-image', 'url('+cover+')');
96	$("audio").find("source").attr("src", ""+audioSrc+"");
97	player.load();
98	player.currentTime = 0;
99	$("#song-info").find("img").attr("src", cover);
100	$("#song-info .artist-wrap p").find("span.title").html(songTitle);
101	$("#song-info .artist-wrap p").find("span.artist").html(songArtist);
102});
103
104// Previous slide
105$('#previous-btn').click(function() {
106	$('.jcarousel').jcarousel('scroll', '-=1');
107	$('#play-btn i').removeClass('fa-pause');
108	player.pause();
109});
110
111// Next slide
112$('#next-btn').click(function() {
113	if ($(".fa-random").hasClass('active')) {
114		let songs = $("#songs li").length - 1;
115		let randomSong = Math.floor(Math.random() * songs) + 1;
116		$('.jcarousel').jcarousel('scroll', '+=' + randomSong);
117	} else {
118		$('.jcarousel').jcarousel('scroll', '+=1');
119	}
120	$('#play-btn i').removeClass('fa-pause');
121	player.pause();
122});
123
124// Play Icon Switcher
125$('#play-btn').click(function() {
126	$(this).find('i').toggleClass('fa-pause');
127});
128
129// Menu
130$("#menu-btn").click(function() {
131	$("#content-wrap").addClass('inactive');
132	$("#sidemenu").addClass('active');
133});
134
135// Home Button
136$("#home-btn").click(function() {
137	$("#home-screen").addClass('active');
138	$(".menu").removeClass('active');
139	$("#content-wrap").addClass('minimized');
140});
141
142// App
143$(".app-icon").click(function() {
144	$("#content-wrap").removeClass('minimized');
145	setTimeout(function(){ $("#home-screen").removeClass('active'); }, 300);
146});
147
148// Overlay
149$("#overlay").click(function () {
150	$("#content-wrap").removeClass('inactive');
151	$("#sidemenu").removeClass('active');
152});
153
154// Options
155$("#options-btn").click(function() {
156	$("#song-options").addClass('active');
157});
158
159// Bluetooth
160$("#bluetooth-btn").click(function() {
161	$("#bluetooth-devices").addClass('active');
162});
163
164// Bluetooth Menu
165$("#bluetooth-devices ul li").click(function() {
166	$(this).toggleClass('connected');
167	$(this).siblings().removeClass('connected');
168	
169	if ($("#bluetooth-devices ul li").hasClass('connected')) {

170		$("#sub-controls i.fa-bluetooth-b").addClass('active');
171	} else {
172		$("#sub-controls i.fa-bluetooth-b").removeClass('active');
173	}
174});
175
176// Close Menu
177$(".close-btn").click(function() {
178	$(".menu").removeClass('active');
179});
180
181$('#sub-controls i').click(function () {
182	if(!$(this).hasClass('fa-bluetooth-b')) {
183		$(this).toggleClass('active');
184	}
185	
186	if ($("#heart-icon").hasClass('active')) {
187		$("#heart-icon").removeClass('fa-heart-o');
188		$("#heart-icon").addClass('fa-heart');
189	} else {
190		$("#heart-icon").removeClass('fa-heart');
191		$("#heart-icon").addClass('fa-heart-o');
192	}
193});
194
195/*
196 * Music Player
197 * By Greg Hovanesyan
198 * https://codepen.io/gregh/pen/NdVvbm
199 */
200
201var audioPlayer = document.querySelector('#content');
202var playpauseBtn = audioPlayer.querySelector('#play-btn');
203var progress = audioPlayer.querySelector('.progress');
204var sliders = audioPlayer.querySelectorAll('.slider');
205var player = audioPlayer.querySelector('audio');
206var currentTime = audioPlayer.querySelector('#current-time');
207var totalTime = audioPlayer.querySelector('#total-time');
208
209var draggableClasses = ['pin'];
210var currentlyDragged = null;
211
212window.addEventListener('mousedown', function(event) {
213  
214  if(!isDraggable(event.target)) return false;
215  
216  currentlyDragged = event.target;
217  let handleMethod = currentlyDragged.dataset.method;
218  
219  this.addEventListener('mousemove', window[handleMethod], false);
220
221  window.addEventListener('mouseup', () => {
222    currentlyDragged = false;
223    window.removeEventListener('mousemove', window[handleMethod], false);
224  }, false);  
225});
226
227playpauseBtn.addEventListener('click', togglePlay);
228player.addEventListener('timeupdate', updateProgress);
229player.addEventListener('loadedmetadata', () => {
230  totalTime.textContent = formatTime(player.duration);
231});
232player.addEventListener('ended', function(){
233  player.currentTime = 0;
234	
235	if ($(".fa-refresh").hasClass('active')) {
236		togglePlay();
237	} else {
238		if ($(".fa-random").hasClass('active')) {
239			let songs = $("#songs li").length - 1;
240			let randomSong = Math.floor(Math.random() * songs) + 1;
241			$('.jcarousel').jcarousel('scroll', '+=' + randomSong);
242		} else {
243			$('.jcarousel').jcarousel('scroll', '+=1');
244		}
245		togglePlay();
246	}
247});
248

249sliders.forEach(slider => {
250  let pin = slider.querySelector('.pin');
251  slider.addEventListener('click', window[pin.dataset.method]);
252});
253
254function isDraggable(el) {
255  let canDrag = false;
256  let classes = Array.from(el.classList);
257  draggableClasses.forEach(draggable => {
258    if(classes.indexOf(draggable) !== -1)
259      canDrag = true;
260  })
261  return canDrag;
262}
263
264function inRange(event) {
265  let rangeBox = getRangeBox(event);
266  let direction = rangeBox.dataset.direction;
267	let screenOffset = document.querySelector("#screen").offsetLeft + 26;
268	var min = screenOffset - rangeBox.offsetLeft;
269	var max = min + rangeBox.offsetWidth;   
270	if(event.clientX < min || event.clientX > max) { return false };
271  return true;
272}
273
274function updateProgress() {
275  var current = player.currentTime;
276  var percent = (current / player.duration) * 100;
277  progress.style.width = percent + '%';
278  
279  currentTime.textContent = formatTime(current);
280}
281
282function getRangeBox(event) {
283  let rangeBox = event.target;
284  let el = currentlyDragged;
285  if(event.type == 'click' && isDraggable(event.target)) {
286    rangeBox = event.target.parentElement.parentElement;
287  }
288  if(event.type == 'mousemove') {
289    rangeBox = el.parentElement.parentElement;
290  }
291  return rangeBox;
292}
293
294function getCoefficient(event) {
295  let slider = getRangeBox(event);
296	let screenOffset = document.querySelector("#screen").offsetLeft + 26;
297  let K = 0;
298	let offsetX = event.clientX - screenOffset;
299	let width = slider.clientWidth;
300	K = offsetX / width;
301  return K;
302}
303
304function rewind(event) {
305  if(inRange(event)) {
306    player.currentTime = player.duration * getCoefficient(event);
307  }
308}
309
310function formatTime(time) {
311  var min = Math.floor(time / 60);
312  var sec = Math.floor(time % 60);
313  return min + ':' + ((sec<10) ? ('0' + sec) : sec);
314}
315
316function togglePlay() {
317	player.volume = 0.5;
318	
319  if(player.paused) {
320    player.play();
321  } else {
322    player.pause();
323  }  
324}