Максим

Шаг 1. Создать массив с адресами файлов.
Шаг 2. Написать функцию возвращающую рандомное число от 0 до массивТреков.length-1
Шаг 3. Написать функцию вызывающую API браузера для воспроизведения аудио файлов с файлом из массива и подставлять в нее динамически сгенерированное число из рандомайзера.
Шаг 4. Написать функцию определяющую окончание воспроизведения файла (используя все тот же браузерный API) и порождающую некое событие, означающее конец трека.
Шаг 5. Повесить eventListener на страницу и засунуть внутрь него функцию которая будет вызываться всякий раз когда будет происходить событие из функции в предыдущем пункте. Эта функция будет вызывать функцию проигрывания файла каждый раз когда будет срабатывать событие.
Шаг 6. Вызывать функцию воспроизведения файла при событии window.onload (когда страница сайта загрузилась).

Наверное надо сделать svg фигуру и к ней применить наложение изображения. А потом к фигуре уже сделать тень.

В том как сделать XMLHttpRequest вы разберетесь за 15 минут максимум. Если освоили Java...
Там зато уже можно и blob-объекты и json отправлять.

Тут вообще верстка сбита. Нужно пересмотреть код верстки всего выезжающего меню и таба заново.

Вот простое решение этой задачи:

Код должен в итоге оказаться на каждой странице где предполагается чтобы ссылки подсвечивались при переходе:

window.onload = function () {
	let url = window.location.href.split('#');
	let link_id = url[url.length-1];
	if(document.getElementById(link_id)) {
		document.getElementById(link_id).classList.add('active-link');
		setTimeout( () => document.getElementById(link_id).classList.remove('active-link'), 10000)
	}

}

.active-link {
color: red; 
/*
тут любые стили активной ссылки и транзишны которые ты хочешь
*/
}