HTML5 audioplayer для blogger

Установить на сайт или блог стильный аудио плеер (blogger - blogspot)

Честно говоря не знаю окажется этот виджет кому-то полезным или нет, но все же он имеет право на существование. Помню когда я только начинал работать с blogger мне был нужен подобный плеер, правда я так и не нашел его, но выкрутился другим путем. Теперь же у новичков больше возможностей. Что могу сказать по нашему аудиоплееру, в общем он довольно симпатичный, функциональность процентов на девяносто. Не совсем удобно закидывать в него свои любимые хиты, но возможно со временем это измениться. Работает он только на платформе blogger (blogspot).


Итак, сперва обсудим, как его добавить на свой сайт или блог, а затем, как перебрасывать в него аудиозаписи. Для добавления аудиоплеера можно создать либо новый гаджет (HTML\Javascript) или же новую страницу (сообщение) и переключится на вкладку HTML. После вставляете туда код:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/Brando07/share/newbe/SEOCIPS-musiccc.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/Brando07/share/newbe/seocips-music.js" type="text/javascript"></script>
<style>
*,:after,:before { box-sizing:border-box; }
.pull-left { float:left; }
.pull-right { float:right; }
.clearfix:after,.clearfix:before { content:''; display:table; }
.clearfix:after { clear:both; display:block; }
.track { width:2px; margin-right:5px; background:rgba(0,0,0,0); transition:background 250ms linear; }
.track:hover,.track.dragging { background:#d9d9d9; background:rgba(0,0,0,.15); }
.handle { right:0; width:2px; background:#999; transition:width 250ms; background:rgba(255,255,255,.2); }
.mhn-player { width:360px; height:500px; padding:15px; position:relative; margin:55px auto 0; background:rgba(0,0,0,.9); box-shadow:0 16px 28px 0 rgba(0,0,0,.22),0 25px 55px 0 rgba(0,0,0,.21); }
.mhn-player .album-art,.mhn-player .album-thumb { background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5MC4zMTNweCIgaGVpZ2h0PSI5MC4zMTNweCIgdmlld0JveD0iMCAwIDkwLjMxMyA5MC4zMTMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDkwLjMxMyA5MC4zMTMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxnPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjMTkxOTE5IiBkPSJNNDUuMTU2LDBDMjAuMjE4LDAsMCwyMC4yMTcsMCw0NS4xNTZjMCwyNC45MzksMjAuMjE4LDQ1LjE1Niw0NS4xNTYsNDUuMTU2YzI0LjkzOSwwLDQ1LjE1Ni0yMC4yMTgsNDUuMTU2LTQ1LjE1NkM5MC4zMTMsMjAuMjE3LDcwLjA5NSwwLDQ1LjE1NiwweiBNMjIuMzk3LDc4Ljc1M2MwLDAtNS4yNzQtMy41NC03LjIyNS01Ljc4Yy0xLjk1MS0yLjI0LTMuOTc0LTQuNjk2LTMuOTc0LTQuNjk2TDI2LjAxLDU4LjE2MWw1Ljc4LDUuNzhsMC4zNjIsMC4zNjFMMjIuMzk3LDc4Ljc1M3ogTTQ1LjE1Niw2My4yMTljLTkuOTc2LDAtMTguMDYzLTguMDg3LTE4LjA2My0xOC4wNjNjMC05Ljk3NSw4LjA4Ny0xOC4wNjMsMTguMDYzLTE4LjA2M2M5Ljk3NSwwLDE4LjA2Myw4LjA4NywxOC4wNjMsMTguMDYzQzYzLjIxOSw1NS4xMzIsNTUuMTMyLDYzLjIxOSw0NS4xNTYsNjMuMjE5eiBNNjQuMzAzLDMyLjUxM2MwLDAtMC42NjItMS4yMDQtMi4xNjctMi44OWMtMS41MDUtMS42ODYtMy45NzQtMy45NzQtMy45NzQtMy45NzRsMTAuMTE1LTE0LjQ1YzAsMCwyLjQwOCwxLjc0Niw0LjY5NiwzLjYxMmMyLjI4OCwxLjg2Nyw2LjE0MSw3LjIyNSw2LjE0MSw3LjIyNUw2NC4zMDMsMzIuNTEzeiBNNDUuMTU2LDQxLjE4MmMtMi4xOTUsMC0zLjk3NCwxLjc3OS0zLjk3NCwzLjk3NGMwLDIuMTk1LDEuNzc5LDMuOTc0LDMuOTc0LDMuOTc0YzIuMTk1LDAsMy45NzQtMS43NzksMy45NzQtMy45NzRDNDkuMTMsNDIuOTYxLDQ3LjM1MSw0MS4xODIsNDUuMTU2LDQxLjE4MnoiLz48L2c+PC9nPjwvc3ZnPg==) no-repeat center / 50%; }
.mhn-player .album-art { width:330px; height:330px; overflow:hidden; position:relative; border:1px solid #000; }
.mhn-player .album-art img { width:100%; display:block; }
.mhn-player .album-art:before { top:30px; left:50%; width:220px; content:'music'; font-size:72px; font-weight:600; position:absolute; margin-left:-100px; color:rgba(255,255,255,.4); }
.mhn-player .album-art:after { top:0; left:0; content:''; width:inherit; height:inherit; position:absolute; background:linear-gradient(to bottom,rgba(0,0,0,.2),rgba(0,0,0,1)); }
.mhn-player .album-art img { width:100%; position:relative; }
.mhn-player .album-art.blur img { -webkit-filter:blur(3px); -moz-filter:blur(3px); filter:blur(3px); }
.mhn-player a { color:inherit; text-decoration:none; }
.mhn-player .play-list { top:15px; left:15px; right:15px; display:none; bottom:245px; overflow-y:auto; position:absolute; width:auto !important; background:rgba(0,0,0,.4); padding-right:1px !important; }
.mhn-player .play-list a { color:#ccc; display:block; overflow:hidden; padding:6px 10px; white-space:nowrap; text-overflow:ellipsis; transition:all .4s ease-in-out 0s; }
.mhn-player .play-list a:hover { background:rgba(255,255,255,.2); }
.mhn-player .play-list a.active { color:#2ecc71; }
.mhn-player .play-list .album-thumb { width:35px; height:35px; overflow:hidden; margin-right:10px; border:1px solid #666; }
.mhn-player .play-list .album-thumb img { width:100%; display:block; }
.mhn-player .play-list .songs-info { max-width:240px; text-shadow:0 2px 2px #000; }
.mhn-player .play-list .songs-info .song-title { font-size:16px; }
.mhn-player .play-list .songs-info .songs-detail { font-size:13px; overflow:hidden; text-overflow:ellipsis; }
.mhn-player .current-info { left:30px; right:30px; color:#ccc; bottom:160px; margin-left:-15px; margin-right:-15px; position:absolute; text-shadow:0 2px 4px #000; }
.mhn-player .current-info>div { margin-top:10px; }
.mhn-player .current-info .song-title { font-size:24px; margin-top:10px; font-weight:400; }
.mhn-player .current-info .fa { min-width:30px; font-size:18px; text-align:center; font-weight:normal; }
.mhn-player .controls { margin-top:30px; position:relative; }
.mhn-player .controls .toggle-play-list { right:5px; width:40px; color:#ccc; height:40px; bottom:100px; border-radius:50%; line-height:40px; text-align:center; position:absolute; background-color:crimson; }
.mhn-player .controls .fa-pp:before { content:'\f04b'; }
.mhn-player .controls .active .fa-pp:before { content:'\f04c'; }
.mhn-player .controls .progress { height:1px; margin:15px 0; position:relative; background:#262626; }
.mhn-player .controls .duration { color:#ccc; font-size:14px; }
.mhn-player .controls .progress .bar { width:0; display:block; height:inherit; background:#bc3958; box-shadow:0 0 5px 0 #bc3958; }
.mhn-player .controls .action-button a { width:40px; height:40px; font-size:16px; margin-right:5px; border:2px solid; line-height:35px; border-radius:50%; text-align:center; display:inline-block; }
.mhn-player .controls .action-button a:hover,.mhn-player .controls .action-button a.active { color:#ccc; }
.mhn-player .controls .action-button a .fa { font-size:inherit; }
.volume { height:10px; width:100px; margin:0 10px; font-size:14px; cursor:pointer; display:inline-block; -webkit-appearance:none; background:transparent; }
.volume::-webkit-slider-runnable-track { height:.5em; background:#d8d8d8; border-radius:.25em; -webkit-appearance:none; }
.volume::-moz-range-track { border:none; height:.5em; background:#d8d8d8; border-radius:.25em; }
.volume::-ms-track { border:none; height:.5em; color:transparent; background:#d8d8d8; border-radius:.25em; }
.volume::-webkit-slider-thumb{-webkit-appearance:none; position:relative; margin:-.25em; border:none; /* Firefox,IE */
 width:1em; height:1em; border-radius:.5em}
.volume::-moz-range-thumb{border:none; /* Firefox,IE */
 width:1em; height:1em; cursor:ew-resize; border-radius:.5em}
.volume::-ms-thumb{border:none; /* Firefox,IE */
 width:1em; height:1em; border-radius:.5em}
.volume::-ms-fill-lower,.volume::-ms-fill-upper { border-radius:5em; background:transparent; }
.volume::-ms-tooltip { display:none; }
.volume::-ms-fill-lower { background:#f05e7b; }
.volume::-webkit-slider-thumb { background:#dc143c; }
.volume::-moz-range-thumb { background:#dc143c; }
.volume::-ms-thumb { background:#dc143c; }
.volume::-webkit-slider-runnable-track { background-size:50% 100%; background-repeat:no-repeat; background-image:linear-gradient(#f05e7b,#f05e7b); }
.volume::-moz-range-track { background-size:50% 100%; background-repeat:no-repeat; background-image:linear-gradient(#f05e7b,#f05e7b); }
.volume[data-css="0"]::-webkit-slider-runnable-track{background-size:0% 100%}
.volume[data-css="0"]::-moz-range-track{background-size:0% 100%}
.volume[data-css="0.1"]::-webkit-slider-runnable-track{background-size:10% 100%}
.volume[data-css="0.1"]::-moz-range-track{background-size:10% 100%}
.volume[data-css="0.2"]::-webkit-slider-runnable-track{background-size:20% 100%}
.volume[data-css="0.2"]::-moz-range-track{background-size:20% 100%}
.volume[data-css="0.3"]::-webkit-slider-runnable-track{background-size:30% 100%}
.volume[data-css="0.3"]::-moz-range-track{background-size:30% 100%}
.volume[data-css="0.4"]::-webkit-slider-runnable-track{background-size:40% 100%}
.volume[data-css="0.4"]::-moz-range-track{background-size:40% 100%}
.volume[data-css="0.5"]::-webkit-slider-runnable-track{background-size:50% 100%}
.volume[data-css="0.5"]::-moz-range-track{background-size:50% 100%}
.volume[data-css="0.6"]::-webkit-slider-runnable-track{background-size:60% 100%}
.volume[data-css="0.6"]::-moz-range-track{background-size:60% 100%}
.volume[data-css="0.7"]::-webkit-slider-runnable-track{background-size:70% 100%}
.volume[data-css="0.7"]::-moz-range-track{background-size:70% 100%}
.volume[data-css="0.8"]::-webkit-slider-runnable-track{background-size:80% 100%}
.volume[data-css="0.8"]::-moz-range-track{background-size:80% 100%}
.volume[data-css="0.9"]::-webkit-slider-runnable-track{background-size:90% 100%}
.volume[data-css="0.9"]::-moz-range-track{background-size:90% 100%}
.volume[data-css="1"]::-webkit-slider-runnable-track{background-size:100% 100%}
.volume[data-css="1"]::-moz-range-track{background-size:100% 100%}
</style>



<br />
<div class="mhn-player">
<div class="album-art">
</div><div class="play-list">

 

<a class="play" data-album="Жанр" data-albumart="" data-artist="One tr" data-id="5" data-title="There do you go" data-url="https://sites.google.com/site/protewfdgd43/43546/7184ec3958ae.mp3" ></a>

<a class="play" data-album="Жанр" data-albumart="http://3.bp.blogspot.com/-Kw5Iu9dnGFE/VJjwLEwPZMI/AAAAAAAAB34/XezkYM46n6k/s1600/egoist.jpeg" data-artist="Название группы" data-id="1" data-title="название песни" data-url="https://sites.google.com/site/socipshotmusic/musicdjseocips/seocips-mp3-1.mp3" ></a>
    
<a class="play" data-album="Country song" data-albumart="http://3.bp.blogspot.com/_rSA9SVWw60w/SqslhK35_3I/AAAAAAAAI1g/69w9i9uh2QM/s400/AlanJackson-GreatestHits.jpg" data-artist="Alan Jackson" data-id="2" data-title="Remember When" data-url="https://sites.google.com/site/socipshotmusic/musicdjseocips/Remember%20When%20-%20Alan%20Jackson%20Lyrics.mp3"></a>

<a class="play" data-album="" data-albumart="https://1.bp.blogspot.com/-p9ZRXwsnxvc/Vei4zkJTo8I/AAAAAAAAU0s/_kiDrkQwuBE/s1600/Katy%2BPerry%2B%25E2%2580%2593%2BHits%2BCollection%2B%25282015%2529%2B320%2BKBPS.jpg" data-artist="Katy Perry" data-id="5" data-title="Roar" data-url="https://sites.google.com/site/socipshotmusic/musicdjseocips/08.%20Katy%20Perry%20-%20Roar.mp3"></a>
   

 </div>
<div class="audio">
</div>
<div class="current-info">
<div class="song-artist">
</div>
<div class="song-album">
</div>
<div class="song-title">
</div>
</div>
<div class="controls">
<a class="toggle-play-list" href="https://www.blogger.com/blogger.g?blogID=1310113926037032348#"><i class="fa fa-list-ul"></i></a>
    <br />
<div class="duration clearfix">
<span class="pull-left play-position"></span>
     <span class="pull-right"><span class="play-current-time">00:00</span> / <span class="play-total-time">00:00</span></span>
    </div>
<div class="progress">
<div class="bar">
</div>
</div>
<div class="action-button">
<a class="prev" href="https://www.blogger.com/blogger.g?blogID=1310113926037032348#"><i class="fa fa-step-backward"></i></a>
     <a class="play-pause" href="https://www.blogger.com/blogger.g?blogID=1310113926037032348#"><i class="fa fa-pp"></i></a>
     <a class="stop" href="https://www.blogger.com/blogger.g?blogID=1310113926037032348#"><i class="fa fa-stop"></i></a>
     <a class="next" href="https://www.blogger.com/blogger.g?blogID=1310113926037032348#"><i class="fa fa-step-forward"></i></a>
     <input class="volume" data-css="0.5" max="1" min="0" step="0.1" type="range" value="0.5" />
    </div>
</div>
</div>
</div>

Сохраняете гаджет или страницу и проверяете как работает плеер. На данный момент в нем находиться четыре композиции.
A class=''play'' - это начало кода каждого трека
Data-album - к какому стилю относиться песня поп, кантри, блюз, рэп и т.д.
Data-albumart - служит для добавления постера исполнителя.
Data-artist - название группы или исполнителя.
Data-title - название песни
Data-url - ссылка с помощью которой проигрывается композиция.

Так же читайте: Шрифт для сайта (блога) - плагин шрифтов

Первый шаг прошли теперь давайте разберем, как добавлять в аудиоплеер новые треки.
Для этого переходим по ссылке: sites.google.com здесь мы создаем сайт, заполняем строку: Укажите название сайта, проходим проверку капчи и жмем красную кнопку Создать. В появившемся окне вверху, с правой стороны кликаем по значку Создать страницу. После создания откроется новая страница, где нужно кликнуть по Добавить файлы и загружаем со своего компьютера нужный трек. После загрузки увидим свой трек, а напротив него с правой стороны значок в виде стрелки при клике по которой можно скачать трек, нам же нужно кликнуть по нему правой кнопкой мыши скопировать ссылку, она будет иметь примерно такой вид:
https://sites.google.com/site/skiseukdav4345/vayva/76b9ef6349fd.mp3?attredirects=0&d=1
в ней удаляем:
?attredirects=0&d=1
затем вставляем ссылку:
https://sites.google.com/site/skiseukdav4345/vayva/76b9ef6349fd.mp3
в значение Data-url сохраняемся и наслаждаемся любимыми композициями. 


Коммент.

Имя

Бесплатные шаблоны WordPress Блог Все для blogger Все для WordPress Графический дизайн Заказ сайта Заработок в интернете Инструменты для сайта Контакты Купить шаблон blogger Наши услуги Новичкам Оптимизация сайта Партнерки для сайтов Перевод статьи Плагины для WordPress Полезные сайты Полезные сервисы Полезные статьи Разделы сайта Сайты - блоги Шаблоны для Blogger Шаблоны для Joomla Шаблоны для PrestaShop Шаблоны для Ucoz Шаблоны на русском Шаблоны blogger 2016 Шаблоны blogger бесплатно Шаблоны blogger магазин Шаблоны Bootstrap 3 Шаблоны Magento best blogger templates
false
ltr
item
Шаблоны для сайтов и блогов: HTML5 audioplayer для blogger
HTML5 audioplayer для blogger
Установить на сайт - блог html5 audioplayer - blogger - blogspot
http://4.bp.blogspot.com/-0Ke2vFNSAQM/VpjX8aLm4RI/AAAAAAAAiTM/Uu94kKDLdok/s400/html%2Baudioplayer%2B%25D0%25B4%25D0%25BB%25D1%258F%2Bblogger%2Bblogspot.jpg
http://4.bp.blogspot.com/-0Ke2vFNSAQM/VpjX8aLm4RI/AAAAAAAAiTM/Uu94kKDLdok/s72-c/html%2Baudioplayer%2B%25D0%25B4%25D0%25BB%25D1%258F%2Bblogger%2Bblogspot.jpg
Шаблоны для сайтов и блогов
http://www.shablonu-dlya-blogger.ru/2016/01/html5-audioplayer-blogger.html
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/2016/01/html5-audioplayer-blogger.html
true
5286106991494805428
UTF-8
Похожих постов не найдено Отобразить все Читать дальше Ответить Отмена Удалить By Главная Страницы Пост. Отобразить все Рекомендуем Тег Архив Поиск Все посты По вашему запросу не найдено ни одного поста Вернуться на главную Воскресение Понедельник Вторник Среда Четверг Пятница Суббота Вс Пн Вт Ср Чт Пт Сб Января Февраль Март Аперль Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь Янв Фев Мар Апр Май Июнь Июль Авг Сен Окт Ноя Дек только что минуту назад $$1$$ мин. назад час назад $$1$$ час. назад Вчера $$1$$ дней тому назад $$1$$ недель тому назад более 5 недель Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy