Напишем свой аудиоплеер для воспроизведения нескольких .mp3-файлов. Используем js: Audio() и обработчик для коллекции элементов (без jQuery и тега audio).
Кнопка воспроизведения для каждого файла
Самый простой вариант: в папке скрипта файлы с именами вида korv.mp3, в html для каждого файла своя кнопка:
♪ <button>kött</button><button>köttfärs</button><button>korv</button>
Какие-нибудь стили для кнопок:
<style>
<!--
/* Тень при наведении курсора */
button:hover, button.hilight {
box-shadow: 0 0 0 2px #cbd6ee;
cursor: pointer;
}
-->
</style>

Скрипт создает объект Audio и при нажатии кнопки воспроизводит звуковой файл с именем по тексту кнопки. При последующих нажатиях кнопок используется один и тот же объект Audio, и всегда звучит только какой-то один файл, звук не накладывается один на другой. Для контроля в консоль выводится, сколько кнопок найдено, и какая кнопка нажата:
<script language="javascript">
<!--
var aud = new Audio();
var allButtons = document.querySelectorAll('button');
console.log("Найдено кнопок: ", allButtons.length);
// Обработчик для коллекции элементов
for (var i = 0; i < allButtons.length; i++) {
allButtons[i].addEventListener('click', function() {
var mp3file=this.innerHTML;
console.clear();
console.log("Вы нажали кнопку: ", mp3file);
aud.src = mp3file +".mp3";
aud.play(); // для небольших файлов
});
}
-->
</script>
Если звуковой файл слишком большой и долго загружается, воспроизведение play() перемещаем в обработчик события завершения загрузки:
// воспроизведение после завершения загрузки для больших файлов
aud.addEventListener('loadeddata', function() {
aud.play();
}, false);
Воспроизведение всех файлов по очереди
function playFile(j){
allButtons[j].classList.add("hilight"); // подсветка кнопки
aud.src = allButtons[j].innerHTML +".mp3";
aud.play();
}
var cur_file=''; // номер текущего файла
document.getElementById('allbuttons').onclick = function() {
cur_file=0; // запускаем первый файл
playFile(cur_file);
}
//После окончания воспроизведения файла
aud.onended = function() {
if (cur_file !== '') {
// Убираем подсветку
allButtons[cur_file].classList.remove("hilight");
if (cur_file< allButtons.length-1){
// запускаем следующий файл
cur_file++;
playFile(cur_file);
} else {
cur_file='';
}
}
};
...