Илья Рычагов

Мои коллеги говорят все верно, разберемся еще раз с запросом к серверу (к php-файлу):

jQuery.ajax() с GET-запросом можно заменить на jQuery.get()

Немного простой теории:
Когда Вы вручную пробуете организовать Get-запрос, то Вы просто в браузере запрашиваете ссылку со своими параметрами. Когда страница загрузилась - запрос к файлу выполнился.
mysite.ru/action.php?param=value

То есть, грубо говоря, чтобы скрипт выполнился, нужно просто запустить (задействовать) нужный файл. Что и делает Ajax. Он просто открывает (как Вы в браузере) эту страницу, но вы этого не видите.
Причем, он делает это асинхронно (код будет работать и дальше, не ожидая ответа), для чего нужны колбеки (функции, которые выполняются после успешного/неуспешного запроса).

Как сделать запрос?

//В этом случае просто выполнился скрипт
$.get('http://mysite.ru/action.php');

//Параметры можно отправить как в ссылке, так и отдельно
$.get('http://mysite.ru/action.php?param=1');
//или
$.get('http://mysite.ru/action.php', {param: 1});

//а что на счет колбеков?
//они нужны, чтобы выполнить какой-либо код после выполнения запроса
//ну, например, если после успешного запроса пишется "ok" в action.php
$.get('http://mysite.ru/action.php', {param: 1}).done(function(data){
   //data - это аргумент, в который передается содержимое страницы
   if(data=="ok"){
       alert("Сервер всем доволен")
   }
});

Да, я бы реализовал это через CSS (и чуть через jQuery).

Вам нужно два стиля:
дефолтный (изначальный)
и измененный - как объект должен выглядеть после деформации

Засучите рукова, нам понадобится jQuery (библиотека для JS), CSS и немного HTML.

Структура такого блока примерно следующая:

<!-- Подключаем jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

<!-- Прописываем стили -->
<style type="text/css" media="screen">
	/* это сам блок, в котором все хранится */
	.block{ 
		background: black;
		height: 300px;
		width: 250px;
		overflow: hidden;
	}
	
	/* это золотой блок со всем текстом */
	.text{
		background: gold;
		position: relative;
		padding: 15px;
		font-size: 14pt;
		height: 100%;
		margin-top: 100%;
		cursor: pointer;
		transition: 0.5s margin-top; /* это свойство анимации 0.5s - это время, margin-top - что анимируем */
	}
	/* класс .show меняет margin-top со 100% до 0 - то есть поднимает блок вверх */
	.text.show{margin-top: 0;}
	
	/* это часть золотого текста - в нем хранится остальной текст */
	.more_text{
		margin-top: 25px;
		font-size: 11pt;
	}
</style>


<!-- Наш HTML -->
<div class='block'>
    <div class='text'>Здесь текст<div class='more_text'>Здесь больше текста...</div></div>
</div>



<script>
	//При нажатии на .text - на "нем переключается" класс .show, который регулирует уровень блока margin-top'ом
	$('.text').click(function(){
		$(this).toggleClass('show');
	});
</script>

1)
Звук в html5 можно пускать не только аудио-тегом, но и объектом js.
Например,

<audio controls>
  <source src="audio_file.mp3" type="audio/mpeg">
</audio>

то же самое, что и

<script>
var audio = new Audio('audio_file.mp3');
audio.play();
</script>

Вы можете с сервера получать ссылки на музыку, сохранять их в массив и включать по очереди.
ну например (я использую jquery ниже):

var my_music = new Array();
$.post('audio_server.php').done(function(data){
   //data - это, допустим, json с сервера со списком музыки (в виде ссылок)
   my_music = $.parseJSON(data);// вот здесь и хранится список песен
   var audio = new Audio( my_music[0] ); // запускаем первый трек
   audio.play();
});

2)
можно сделать счетчик кол-во проигранных мелодий, и если он достигает длины массива, запрашивать новый список.
можно смотреть на какой позиции вы находитесь сейчас через .indexOf()
можно удалять предыдущий проигранный элемент: delete my_music[0], если включился my_music[1]. Ну это такое себе)

Я бы подключил jquery и audio.js - там много чего полезного)