Скачать
Вот набрёл на классный музыкальный плеер для вашего сайта. Меня часто просили показать простой плеер, работающий без флеш и который можно было бы легко использовать. Данный пример не использует НИ ОДНОЙ КАРТИНКИ. Вся графика на чистом css. Воспроизведение основано на HTML5 компоненте audio. Очень важно, что плеер растягивается и сжимается в зависимости от размеров окна браузера и прекрасно работает с планшетными устройствами (По заверениям разработчика)
Для начала посмотрите
ДЕМО
Установка:
1#: После /head на нужных страницах вставляйте:
|
|
<link rel="stylesheet" href="/css/audioplayer.css" /> |
2#: Следующий код в самый низ страницы перед /body:
|
|
<script src="/js/audioplayer.js"></script> <script> $(function() { $('audio').audioPlayer(); }); </script> |
3#: Осталось только в нужное место на странице вставить код самого плеера:
|
|
<audio preload="auto" controls> <source src="Ссылка на mp3 файл" /> <source src="Ссылка на ogg файл" /> <source src="Ссылка на wav файл" /> </audio> |
Осталось лишь залить JS файл из прикреплённого архива в папку
js и CSS файл в папку
css
Для полноценной поддержки всеми браузерами желательно аудиофайл подключать именно в трёх форматах mp3, ogg и wav
Ссылка на mp3 файл
Ссылка на ogg файл
Ссылка на wav файл
А можно лишь одну ссылку добавить? MP3, если других нет.. Будет ли работать?
Это для кроссбраузерности. Одни браузеры умеют mp3 читать, другие ogg, третьи же вообще только wav видят. Скачай Audacity или любой бесплатный конвертер и переводи в три формата, если треков мало. Если треков много (у тебя сайт с онлайн музыкой), то протестируй плеер с mp3 файлами на предмет кроссбраузерности на данный момент (Материалу чуть ли не год уже с момента публикации)
А можно к нему плейлист добавить?
Я не увидел такой возможности