Хотя - взглянуть на это маленькое чудо вы вполне можете и здесь, нет проблем. :)
Да, но чем же так хорош этот player? Внешнее впечатление порой так обманчиво... okay, слово разработчику:
Адаптивность
Смартфоны, планшеты или 30-дюймовые дисплеи: плеер отлично работает при любом размере экрана. Нет никакой необходимости применять media queries: у вас в распоряжении всегда есть простой и гибкий шаблон. Плеер представляет собой очень небольшой объект, что максимально облегчает задачу.
Сенсорное управление
Плеер - совсем реальный, живой, и вы можете прикоснуться к нему. Плеер можно использовать для сенсорных экранов. Все, что можно делать курсором, вы сможете делать пальцем. Каждое действие имеет отдельные touch-события.
Отзывчивость
Отключена поддержка javascript? Не беспокойтесь, за вас всю работу сделает стандартный плеер браузера.
Кнопка регулировки звука скрывается, когда регулировка громкости недоступна (минус для iOS).
Когда браузер не поддерживает элемент «audio» или какой-то из представленных аудио-файлов, плеер элегантно трансформируется в однокнопочный (Воспроизвести/Остановить), построенный на основе элемента «embed /», который использует сторонний плагин (чаще всего Quick Time на Mac, Windows Media Player на Windows) для воспроизведения аудио.
Отсутствие изображений
В процессе разработки этого плеера ни одно животное не пострадало. То есть - мы хотели сказать, что ни одно изображение не было использовано, только лишь чистый код CSS.
Управление
- Строка прогресса и кнопки воспроизведения и паузы
- Регуляторы громкости
- Индикатор загруженных аудио-файлов (прошедших буферизацию)
Конец цитаты... вы спросите - как же все это великолепие работает? Со страницы проекта вы всегда можете скачать демо, и - там же увидеть очень подробную аннотацию; ну, а здесь - лишь очень кратко. Собственно, все несложно. Скачайте этот архив и распакуйте куда-либо в public_html вашего сайта; на страничке разместите указанный ниже код, подредактировав соответственно вашему сайту пути; в каталог audio (находится в архиве) уложите, соответственно, аудио.
<link rel="stylesheet" href="/css/audioplayer.css" />
<script>
(function(doc){var addEvent='addEventListener',type='gesturestart',qsa='querySelectorAll',scales=[1,1],meta=qsa in doc?doc[qsa]('meta[name=viewport]'):[];function fix(){meta.content='width=device-width,minimum-scale='+scales[0]+',maximum-scale='+scales[1];doc.removeEventListener(type,fix,true);}if((meta=meta[meta.length-1])&&addEvent in doc){fix();scales=[.25,1.6];doc[addEvent](type,fix,true);}}(document));
</script>
<div id="wrapper">
<audio preload="auto" controls>
<source src="/audio/audiofile.mp3">
<source src="/audio/audiofile.ogg">
<source src="/audio/audiofile.wav">
</audio>
<script src="/js/jquery.js"></script>
<script src="/js/audioplayer.js"></script>
<script>$( function() { $( 'audio' ).audioPlayer(); } );</script>
</div>
Что дальше? - это все. Нажмите кнопку play. На вашем сайте появился новый, довольно изящный, интересно задуманный и хорошо написанный аудиоплейер. Удачи!
