Простой аудиоплеер на js

Напишем свой аудиоплеер для воспроизведения нескольких .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='';
    }
  }
};

...

Добавить комментарий

Ваш адрес email не будет опубликован.


Еще записи