WWW.TEKCT.RU | ||
Несколько плееров на одной веб-страницеHTML5 удобен тем, что позволяет легко размещать мультимедийный контент на веб-страницах. Но как быть, если надо, к примеру, разместить несколько аудиозаписей на одной странице? Плееры ничего «не знают» друг о друге, и если пользователь запустит один трек, а потом второй, первый продолжит играть. Данное решение — простое. Оно основано на том, что используются именно встроенные плееры браузеров, а не какие-либо сторонние. Для управления страницей будем использовать JavaScript. Для плеера (для каждого трека) используем такую конструкцию:
Кстати, тег autoplay (автоматическое начало воспроизведения) современными браузерами не поддерживаются, что вполне понятно и оправданно, но на всякий случай можно его добавить. Предварительная загрузка треков тоже не нужна. Соответственно, если треков много, на странице должны появиться элементы div с идентификаторами div2, div3 и т.д. Внутри элемента div должен находиться только элемент audio — это необходимо для данного JavaScript-кода. Изначально вместо плееров на странице должны быть размещены только кнопки запуска (в виде изображений), которые на самом деле управляют вставкой плеера на страницу:
Смысл кнопки в том, чтобы получить id нужного элемента. Очень важно, чтобы высота изображения кнопки была такой же, как и высота плеера (например, 25 пикселов). В противном случае контент страницы будет дергаться при замене элементов. Разные браузеры по-разному отображают аудио-плеер, и самое простое — задать его высоту. Например, так:
Осталось добавить JavaScript-код. В этом примере использовано три трека. Ссылки на все треки помещают в массив (что само по себе удобно). В цикле задано общее ограничение в 200 треков. Когда пользователь щелкает по одной из кнопок запуска, функция play_new() перебирает все нужные элементы, удаляет какие-либо существующие (уже открытые) плееры и вставляет в нужный элемент div новый плеер. Пользователю, скорее всего, придется щелкнуть еще раз, чтобы началось воспроизведение. На этой странице реализовано данное решение, и можно увидеть (и послушать) как оно работает. Код JavaScript:
Песня «Наш путь» из рок-оперы «Формула мироздания» (муз. В. Волченко, сл. А. Гончаров) Песня «Алло! Алло!» (муз. В. Волченко, сл. А. Гончаров) Песня «Голос сердца» (муз. М. Чулин, сл. А. Гончаров) 12.07.2022 © TEKCT.RU, А. Гончаров, 2022 | ||
|