И снова всем привет любителям веб программирования, а также всем, кто связал свою деятельность с данной специализацией! Как Вы обратили внимание, я имею виду сейчас про постоянных читателей нашего проекта, что давненько не было на сайте каких либо материалов, это связанно с периодом летнего времени, ведь отдыхать тоже надо) Надеюсь, Вы не обижаетесь и согласитесь со мной. Регулярно вновь выпускать новые материалы, мы начнем осенью, примерно в середине сентября.
А сегодня у меня для Вас материал, который больше всего придется по вкусу тем, у кого имеется или тем, кто планирует разработку музыкального веб сайта или просто там, где нужен аудиоплеер для сайта. Данный аудиоплеер, я нашел чисто случайно, когда создавал определенный веб проект, он как раз мне подошел для него, чем я и решил поделиться с Вами. У него есть определенный ряд плюсов, главный из них, что его можно удобно встроить в сайт, используя минимум кода и при этом для увеличения его функционала, все имеется. Я не буду вдаваться в подробности, а расскажу саму суть его использования и то, что Вам непременно нужно знать для его установки и использования.
Отходя немного от темы, хочу внести пару слов о его разработчике, которого зовут Osvaldas Valutis (Освалдас Валютис). Он является в основном разработчиком в области Front-End части, все что связанно с HTML, CSS и JavaScript. Подробнее о нем и о других его разработках, а также проектах, Вы можете прочитать на официальном сайте, который я указал в источниках материала.
Ну, а теперь давайте перейдем непосредственно к самому аудиоплееру для сайта.
Пожалуй, прежде чем скачивать и вообще устанавливать какой-либо скрипт, нужно узнать о нем по больше, а точнее его функциональные особенности. Вот с ними мы сейчас и познакомимся!
Подойдет практически к любому сайту, ведь все можно спокойно настроить, зная только языки CSS и JavaScript. Имеются все настройки, для удобного использования и проигрывания аудио записей.
Пожалуй незаменимая вещь при использовании любым устройством, что мобильным или ПК.
Очень интересная характеристика, ведь поведение аудиоплеера при выключенном JavaScript, показывает, что даже в таких случаях, дизайн плеера меняется к виду одной кнопке - проигрыванию и паузы.
Вся ваша аудио запись имеет отсчетное время, индикатор загрузки и полноценную буферизацию, как и управление громкостью звука.
Мини версия аудиоплеера весит всего 4 килобайта, что существенно снижает потребность в размере хранения скрипта.
Первым делом, нам просто необходимо подключить все стили, js библиотеки и скрипты. Поэтому весь полный список, сразу ниже:
<link type="text/css" rel="stylesheet" href="css/demo.css"> <link type="text/css" rel="stylesheet" href="css/reset.css"> <link type="text/css" rel="stylesheet" href="css/main.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/audioplayer.js"></script>
Файл demo.css содержит в себе стандартные стили скрипта, плюс немного дополнения. Файлы reset.css и main.css нужны исключительно для создания дизайнерского образа плеера. По поводу библиотеки jquery я думаю Вам и так все понятно, а скрипт audioplayer.js имеет весь базовый функционал аудиоплеера.
<audio preload="auto" controls> <source src="audio/rh.mp3" /> </audio>
Таким вот простым кодом, мы подключаем сам аудиоплеер. Как видим атрибут preload стоит в автоматическом режиме, что означает следующая композиции будет автоматически проигрываться после предыдущей. Ну, а далее идет тег source идет в котором указывается полный путь в src к исполняемому аудио файлу.
По поводу самого скрипта, он имеет множество настроек, все они прописаны на официальном сайте или можно посмотреть в скрипте audioplayer.js.
Чтобы аудиоплеер был активным, нужно его подключить. Для этого после кода HTML, вставляем следующее:
<script>
$( function()
{
$('audio').audioPlayer();
});
</script>
Наибольший для меня интерес, оказал файл стилизации самого плеера, ведь он полноценно размечен на области, которыми очень удобно пользоваться в качестве стилизации дизайна плеера. К примеру, класс:
.audioplayer-bar
Придает стилизацию полосе загрузки аудио записи.
.audioplayer-playpause
Придает стилизацию кнопкам проигрывания и паузы.
.audioplayer-time-current
Придает стилизацию отсчета начала проигрывания аудио записи.
.audioplayer-time-duration
Придает стилизацию конца отсчета аудио записи.
.audioplayer-volume
Придает стилизацию громкости звука аудио записи.
На этом в принципе все, такой вот получился у меня для Вас материал, надеюсь кому то поможет. Благодарю за внимание, извините что редко получается радовать Вас новым материалом, но ситуацию, надеюсь, Вы поняли. Оставляйте комментарии, если появятся вопросы. Всегда буду рад ответить!)