Как создать плейлист на сайте

До появления HTML5, то есть еще несколько лет назад, для того чтобы отобразить на веб-странице аудио или видео, сайтостроителям приходилось использовать неуклюжие и громоздкие флеш-плееры. Это было неудобно, и в большинстве случаев итог выглядел малоэстетично, особенно на мобильных устройствах.

Сейчас вставить на страницу аудиозапись или видеоролик не сложнее, чем картинку. Достаточно вписать соответствующий HTML5-тег <audio> или <video>:

<audio controls="" type="audio/mpeg">
  <source type="audio/mp3" src="ПУТЬ К ФАЙЛУ MP3">
</audio>

И вуаля:

Однако, закончив воспроизведение одного трека, плеер замолчит, даже если разместить подряд несколько аудиозаписей. Посетителю сайта придется вручную включать каждую композицию. Чему он, конечно, не обрадуется.

Как настроить автоматическое воспроизведение плейлиста на сайте

Мы в «УпраВЕБ» используем для решения этой задачи специальный скрипт. Его можно вставить в ту страницу, на которой вы хотите разместить список аудиокомпозиций.

Вот он:

<script type='text/javascript' src='https://code.jquery.com/jquery-1.7.js'></script>
<script>
$(document).ready(function () {
var audio;
var playlist;
var tracks;
var current;

init();
function init() {
    current = 0;
    audio = $('#audio');
    playlist = $('#playlist');
    tracks = playlist.find('li a');
    len = tracks.length - 1;
    audio[0].volume = .80;
    playlist.find('a').click(function (e) {
        e.preventDefault();
        link = $(this);
        current = link.parent().index();
        run(link, audio[0]);});
    audio[0].addEventListener('ended', function (e) {
        current++;
        if(current > len){
            current = 0;
            link = playlist.find('a')[0];
        } else {
            link = playlist.find('a')[current];
        }
        run($(link), audio[0]);
    });
}
function run(link, player) {
    player.src = link.attr('href');
    par = link.parent();
    par.addClass('active').siblings().removeClass('active');
    audio[0].load();
    audio[0].play();
    }
})
</script>

А ниже вставляем собственно код плейлиста, не забыв указать правильные имена ваших аудиофайлов:

<audio controls="" id="audio" type="audio/mpeg">
    <source type="audio/mp3" src="ПУТЬ К ФАЙЛУ-1">
</audio>
<ol id="playlist">
    <li class="active"><a href="ПУТЬ К ФАЙЛУ-1">Первое аудио</a></li>
    <li><a href="ПУТЬ К ФАЙЛУ-2">Второе аудио</a></li>
    <li><a href="ПУТЬ К ФАЙЛУ-3">Третье аудио</a></li>
</ol>

Теперь по окончании первой композиции плеер начнет воспроизводить вторую, а затем и третью. При этом посетитель может кликнуть на любой композиции из списка, чтобы выбрать ее:

1. Suk Chamber Orchestra — A. Marcello, Concerto C moll (Allegro)
2. Vladimir Kurlin — A. Marcello, Concerto C moll (Allegro)
3. Heidelberger Kammerorchester — A. Marcello, Concerto D moll (Presto)

Внешний вид плейлиста несложно настроить средствами CSS. Обратите внимание: тому аудиофайлу, который воспроизводится на странице, в плейлисте соответствует класс "active". Это позволит визуально выделить текущий трек в списке композиций — например, если назначить стилю "active" другой цвет шрифта.

В нашем примере это синий цвет:

#playlist li.active a{
color:blue;
}

Если возникли вопросы или пожелания — обращайтесь, «УпраВЕБ» всегда рад оказать услугу.