WWW.TEKCT.RU

Несколько плееров на одной веб-странице

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

Данное решение — простое. Оно основано на том, что используются именно встроенные плееры браузеров, а не какие-либо сторонние. Для управления страницей будем использовать JavaScript.

Для плеера (для каждого трека) используем такую конструкцию:

<div id="div1"><audio src="ссылка_на_трек" controls autoplay preload="none">
</audio></div>

Кстати, тег autoplay (автоматическое начало воспроизведения) современными браузерами не поддерживаются, что вполне понятно и оправданно, но на всякий случай можно его добавить. Предварительная загрузка треков тоже не нужна. Соответственно, если треков много, на странице должны появиться элементы div с идентификаторами div2, div3 и т.д. Внутри элемента div должен находиться только элемент audio — это необходимо для данного JavaScript-кода.

Изначально вместо плееров на странице должны быть размещены только кнопки запуска (в виде изображений), которые на самом деле управляют вставкой плеера на страницу:


<div id="div1"><img height="25" src="images/button_play.png" 
onclick="play_new(this.parentElement.id)"</div>

Смысл кнопки в том, чтобы получить id нужного элемента.

Очень важно, чтобы высота изображения кнопки была такой же, как и высота плеера (например, 25 пикселов). В противном случае контент страницы будет дергаться при замене элементов. Разные браузеры по-разному отображают аудио-плеер, и самое простое — задать его высоту. Например, так:


<style>
audio { height:25px; }
</style>

Осталось добавить JavaScript-код. В этом примере использовано три трека. Ссылки на все треки помещают в массив (что само по себе удобно). В цикле задано общее ограничение в 200 треков. Когда пользователь щелкает по одной из кнопок запуска, функция play_new() перебирает все нужные элементы, удаляет какие-либо существующие (уже открытые) плееры и вставляет в нужный элемент div новый плеер. Пользователю, скорее всего, придется щелкнуть еще раз, чтобы началось воспроизведение. На этой странице реализовано данное решение, и можно увидеть (и послушать) как оно работает.

Код JavaScript:


<script type="text/javascript">
var track = new Array();
track[1] = "http://tekct.ru/dtx/download1.php?id=rock_volchenko_05.mp3";
track[2] = "dtx/download1.php?id=volchenko_-_allo-allo_2013.mp3";
track[3] = "dtx/download2.php?id=mechti-korabli.mp3";

function play_new(p){
for ( var i = 1; i < 200; ++i )
    {
        var f = document.getElementById("div"+i);
        if ( f == null ) { 
        break;
        } else {
        var elm = document.getElementById("div"+i);
          if ( elm.innerHTML.indexOf("audio") > -1 ) {
          var first = elm.children[0];
          elm.removeChild(first);
          elm.innerHTML = "<img height='25' src='images/button_play.png' onclick='play_new(this.parentElement.id)'>";
          }
        }
    }
var elm = document.getElementById(p);
var first = elm.children[0];
var track_ind = parseInt(p.substring(3), 10);
var line1 = '<audio src="' + track[track_ind] + '" controls autoplay preload="none"></audio>';
elm.removeChild(first);
elm.innerHTML = line1;
}
</script>

Песня «Наш путь» из рок-оперы «Формула мироздания» (муз. В. Волченко, сл. А. Гончаров)

Песня «Алло! Алло!» (муз. В. Волченко, сл. А. Гончаров)

Песня «Голос сердца» (муз. М. Чулин, сл. А. Гончаров)

   12.07.2022

© TEKCT.RU, А. Гончаров, 2022

Рейтинг@Mail.ru