Правила форума Подписки
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
Баннерообмен с SVK Portal (2)
Hibernation Evil - Эпизод... (0)
Народная Солянка 2016 [OG... (0)
У костра (193)
Вступить в группировку (40)
У костра (193)
Анекдоты (145)
Города (94)
Обновление сайта (68)
Создание НПС (63)
StraNNik (1366)
RamzeS (523)
Каратель (178)
Narkostalker (127)
Кракен (93)
serzhkalin (30.11.2020)
cobragign86 (29.11.2020)
karafnurdin (28.11.2020)
Zarig (19.11.2020)
alekseitsarapckin (15.11.2020)
  • Страница 1 из 1
  • 1
Форум[S-R] | Развлекательный форум » Мастерская портала » Скрипты » Разное » HTML5 CSS3 аудио плеер для сайта uCoz
HTML5 CSS3 аудио плеер для сайта uCoz
Бармен
Бармен
Пропуск №: 63
Регистрация: 12.04.2014
Ранг: Познающий
Сообщений: 74
Карма: 1 | Хабар: 8
stalkers
Дата: Вторник, 19.05.2015, 21:47/ Сообщение №: 1

Думал нужен или нет данный скрипт, но потом всё таки решил предоставить его вам может кому и пригодится. Данный плеер создан на HTML5 CSS3 стандартах и работает безупречно.

Описание: HTML5 CSS3 аудио плеер для сайта

HTML5 CSS3 аудио плеер для сайта - работает хорошо не глючит есть возможность с лево установить свой логотип сайта, так же можно как включить проигрывать музыку так же и ставить на паузу. Ещё одно преимущество в том что есть настройка звука как громче так и тиши + с низу полоса прокрутки наведя на которую мышкой будет показывать текущий момент песни.

Установка: HTML5 CSS3 аудио плеер для сайта

HTML код плеера

Данный код предоставленный ниже вам нужно установить в то место на сайте где вы будете слушать песню.
Код
<!-- Audio Player HTML -->   
    <div class="audio-player">   
    <h1>Demo - Preview Song</h1>   
    <img class="cover" src="/img/cover.png" alt="">   
    <audio id="audio-player" src="Ссылка на песню" type="audio/mp3" controls="controls"></audio>   
    </div>   
    <!-- end Audio Player HTML -->

Где в коде написано ссылка на песню туда вам нужно вставлять ссылку на песню для проигрывания.

CSS стили плеера

Данные стили вам нужно установить в стили вашего сайта в самый низ, не чего удалять не нужно вам нужно только добавить.
Код
.audio-player,   
.audio-player div,   
.audio-player h1,   
.audio-player a,   
.audio-player img,   
.audio-player span,   
.audio-player button {   
    margin: 0;   
    padding: 0;   
    border: none;   
    outline: none;   
}   

div.audio-player {   
    position: relative;   
    width: 400px;   
    height: 120px;   
       
    background: #4c4e5a;   
    background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);   
    background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);   
    background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);   
    background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);   
    background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);   

    -webkit-border-radius: 3px;   
    -moz-border-radius: 3px;   
    border-radius: 3px;   
}   

/* Title */   
.audio-player h1 {   
    position: absolute;   
    top: 37px;   
    left: 165px;   

    font-family: Helvetica, Arial, sans-serif;   
    font-weight: bold;   
    font-size: 14px;   
    color: #ececec;   
    text-shadow: 1px 1px 1px rgba(0,0,0, .5);   
}   

/* Cover */   
.audio-player .cover {   
    position: absolute;   
    top: 0;   
    left: 0;   
}   

/* Buttons */   
.mejs-controls .mejs-button button {   
    cursor: pointer;   
    display: block;   
    position: absolute;   
    text-indent: -9999px;   
}   

/* Play & Pause */   
.mejs-controls .mejs-play button,   
.mejs-controls .mejs-pause button {   
    width: 21px;   
    height: 21px;   
    top: 35px;   
    left: 135px;   
    background: transparent url(../img/play-pause.png) 0 0;   
}   

.mejs-controls .mejs-pause button { background-position:0 -21px; }   

/* Mute & Unmute */   
.mejs-controls .mejs-mute button,   
.mejs-controls .mejs-unmute button {   
    width: 14px;   
    height: 12px;   
    top: 70px;   
    left: 140px;   
    background: transparent url(../img/mute-unmute.png) 0 0;   
}   

.mejs-controls .mejs-unmute button { background-position: 0 -12px; }   

/* Volume Slider */   
.mejs-controls div.mejs-horizontal-volume-slider {   
    position: absolute;   
    top: 71px;   
    left: 165px;   
    cursor: pointer;   
}   

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {   
    width: 200px;   
    height: 8px;   
    background: #212227;   

    -webkit-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);   
    -moz-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);   
    box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);   

    -webkit-border-radius: 6px;   
    -moz-border-radius: 6px;   
    border-radius: 6px;   
}   

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {   
    position: absolute;   
    width: 0;   
    height: 6px;   
    top: 1px;   
    left: 1px;   
    background: url(../img/volume-bar.png) repeat-x;   

    -webkit-border-radius: 6px;   
    -moz-border-radius: 6px;   
    border-radius: 6px;   
}   

/* Progress Slider */   
.mejs-controls div.mejs-time-rail { width: 400px; }   

.mejs-controls .mejs-time-rail span {   
    position: absolute;   
    display: block;   
    width: 400px;   
    height: 5px;   
    left: 0;   
    bottom: 0;   
    cursor: pointer;   
       
    -webkit-border-radius: 0px 0px 2px 2px;   
    -moz-border-radius: 0px 0px 2px 2px;   
    border-radius: 0px 0px 2px 2px;   
}   

.mejs-controls .mejs-time-rail .mejs-time-total { background: #999999; }   

.mejs-controls .mejs-time-rail .mejs-time-loaded {   
    width: 0;   
    background: #cccccc;   
}   

.mejs-controls .mejs-time-rail .mejs-time-current {   
    width: 0;   
    background: #64b44c;   
}   

/* Volume Slider & Progress Bar Handle */   
.mejs-controls .mejs-time-rail .mejs-time-handle,   
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {   
    position: absolute;   
    display: block;   
    width: 12px;   
    height: 14px;   
    top: -4px;   
    background: url(../img/handle.png) no-repeat;   
}   

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle { top: -2px; }   

/* Time Float Box */   
.mejs-controls .mejs-time-rail .mejs-time-float {   
    position: absolute;   
    display: none;   
    width: 33px;   
    height: 23px;   
    top: -26px;   
    margin-left: -17px;   
    background: url(../img/time-box.png);   
}   

.mejs-controls .mejs-time-rail .mejs-time-float-current {   
    width: 33px;   
    display: block;   
    left: 0;   
    top: 4px;   

    font-family: Helvetica, Arial, sans-serif;   
    font-size: 10px;   
    font-weight: bold;   
    color: #666666;   
    text-align: center;   
    }

Script плеера

Данный скрипт нужно вам установит в нижнюю или в верхнюю часть вашего сайта.
Код
<script src="/js/mediaelement-and-player.min.js"></script>   
    <script>   
    $(document).ready(function() {   
    $('#audio-player').mediaelementplayer({   
    alwaysShowControls: true,   
    features: ['playpause','volume','progress'],   
    audioVolume: 'horizontal',   
    audioWidth: 400,   
    audioHeight: 120   
    });   
    });   
    </script>

Вот и всё на этом установка HTML5 CSS3 аудио плеер для сайта uCoz завершена и вам остаётся толбко скачать архив и залить папки в файловый менеджер вашего сайта.
Скачать




Форум[S-R] | Развлекательный форум » Мастерская портала » Скрипты » Разное » HTML5 CSS3 аудио плеер для сайта uCoz
  • Страница 1 из 1
  • 1
Поиск:

Авторское право на игру и использованные в ней материалы принадлежат GSC Game World.
Любое использование материалов сайта возможно только с разрешения его администрации!
Для корректного отображения сайта, рекомендуем использовать обновленный Yandex.Browser
Powered by StraNNik | Хостинг от uCoz | Рекомендуем AdGuard
© 20.11.2013-02.12.2020