Несколько аудио на одной странице. Часть 2

В прошлой статье я рассказывал как сделать воспроизведение аудио файлов на страницах своего сайта. Но что делать, если нужно на одной странице воспроизводить несколько файлов? Каждый созданный элемент <audio> будет «жить» своей
жизнью. Прежде чем запускать новый аудио-файл нужно остановить предыдущий, иначе будет каша.

Общий принцип

Давайте разберемся, что здесь нужно сделать:

1. Развязать элемент аудио <audio> и аудио-файл
   Чтобы развязать аудио-файл и элемент <audio> нужно, чтобы на странице был один единственный элемент <audio> (хотя может быть и несколько, но сейчас для простоты — достаточно одного). Этот элемент может быть как статическим (быть частью страницы), а java-script просто будет менять его свойства. А можно сделать этот элемент как результат вывода java-script, т.е. объект будет создаваться скриптом и выводиться при загрузке на страницу. Второй метод мне нравиться больше, потому что в этом случае достаточно будет скопировать скрипт на другую страницу и без дополнительных усилий использовать.
2. Сделать графические элементы управления отдельно от <audio>
   Прописав свойство control мы получим уже готовые элементы управления воспроизведением. Но в случае нескольких файлов — этот метод не годиться. Нужно нарисовать (или сплагиатить, но я вам этого не говорил) свои кнопочки. Далее будем обрабатывать нажатия этих кнопок и подкидывать в <audio> соответствующие значения полей (имя файла, громкость,…). Еще будет неплохо при нажатии на кнопки изменить сами кнопки — чтобы было сразу понятно какая композиция играет (обычно кнопка Play превращается в кнопку Pause)
3. Написать скрипт, который будет обрабатывать клики по графическим элементам и управлять объектом

Вывод элемента <audio>

Нужно будет сделать статью, как добавить javaScript на страницы WordPress. Пока я этого не сделал — погуглите, полно примеров как это делать. Самый просто способ это через шорт код, как я и сделаю. Через редактор WordPress не получится — это сделано специально, чтобы избежать вредоносных атак. А если у вас не WordPress, то точно гуглите, тоже не должно быть сложно, стандартная задача.
В подключаемом скрипте делаем создание основного объекта и вешаем его к структуре нашего документа:

let elemAudio = null;

function runAudio() {
	if(elemAudio)
		elemAudio.play();
}

function main() {
    elemAudio = document.createElement("audio");
	let elemBody = document.body;
	elemBody.appendChild(elemAudio);
	
	let elemSource = document.createElement("source"); 
	elemSource.type = "audio/mpeg";
		
	elemAudio.volume = 1;
	elemAudio.source = elemSource;
	elemAudio.appendChild(elemSource);
	elemAudio.addEventListener("canplay", runAudio, false);
}
main();

Графика

С графикой вообще все по стандартной схеме. Делаем кнопку Play, которая заменяется кнопкой Pause, а в процессе загрузки файла можно еще и песочные часы повесить. Как это должно выглядеть, можно будет подсмотреть в примере и модифицировать под свои нужды или оставить как у меня.

Сейчас моя первая версия скрипта немного не соответствует картинке, но в последующем я его допилю и сделаю именно таким. Понравилось мне оформление на картинке.

Как выглядит и все файлы проекта

Вот так это сейчас выглядит. Работает так как должно работать. Несколько файлов (в тесте я использовал аудио потоки радиостанций онлайн) воспроизводятся.

Вы можете бесплатно скачать архив с исходниками на странице загрузок.