Bootstrap Music Player / Аудиоплееры / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Аудиоплееры

Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Уникальный ID: 703

Количество символов:

Посмотрели: 5265 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 4.4 / 5 - 5 голосов

Тип лицензии: CC BY 4.0

Авторство: http://bootsnipp.com/snippets/k737W

Информация: Пользователям

Информация: Правообладателям

Теги: jQuery, Audio, Snippet, html, сниппет, Bootstrap, аудио

Поделился: BootstrapТема

Добавлено: 2016-03-07 в 11:15

Метка: 1581617409

⇄ ⇅

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://bootstraptema.ru/plugins/jquery/jquery-1.11.3.min.js"></script>

<style>
* {
outline: none !important
}
#b--audio {
width:275px
}
.aligned { 
 text-align: center; 
 padding-bottom:28%; 
}
.aligned_input { 
 text-align: center; 
 padding-bottom:-10%; 
}
.aligned_text { 
 text-align: center; 
 font-size: 88%;
}
.no:hover {
 background:none;
}
 .no:active {
 background: none;
}
#seconds {
 font-size:10px;
}
.btn-custom {
 background-color: black;
 color:white;
 transition-property: background, opacity;
 transition-duration: 0.5s;
} 
.btn-custom:hover, .btn-custom:active, .btn-custom:focus {
 cursor: pointer;
 opacity:0.5;
 color:white;
} 
</style>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">

<audio id="audio" preload="auto"></audio>
 <div id="b--audio" class="btn-group center-block">
 <button onclick="Play('https://bootstraptema.ru/snippets/audio/2016/music-player/Transmission-Radio-19-10-2012.mp3','audio');" class="btn btn-custom"><span title="Play" id="play" class="glyphicon glyphicon-play aligned"></span></button>
 <button onclick="Stop('music.mp3','audio');" class="btn btn-custom"><span title="Stop" id="stop" class="glyphicon glyphicon-stop aligned"></span></button>
 <button onclick="Restart('music.mp3','audio');" class="btn btn-custom"><span title="Restart" id="restart" class="glyphicon glyphicon-step-backward aligned"></span></button>
 <button onclick="Backward5('music.mp3','audio');" class="btn btn-custom"><span title="-5 seconds" id="play" class="glyphicon glyphicon-fast-backward aligned"></span></button>
 <button onclick="Forward5('music.mp3','audio');" class="btn btn-custom"><span title="+5 seconds" id="play" class="glyphicon glyphicon-fast-forward aligned"></span></button>
 <button onclick="VolumeUp('music.mp3','audio');" class="btn btn-custom"><span title="Volume Up" id="volumeup" class="glyphicon glyphicon-plus aligned"></span></button>
 <button onclick="VolumeDown('music.mp3','audio');" class="btn btn-custom"><span title="Volume Down" id="volumedown" class="glyphicon glyphicon-minus aligned"></span></button>
 </div>

</div>
</div>
</div>

<script>
var status = 0;
function Play(music,id) {
 var audio = $("#"+id); 
 if(status == 0 || status == 2)
 { 
 if(status == 0) audio.attr("src", music);
 audio[0].play();
 $("#play").attr("class","glyphicon glyphicon-pause aligned")
 status = 1;
 } else if(status == 1) { 
 audio[0].pause();
 $("#play").attr("class","glyphicon glyphicon-play aligned")
 status = 2;
 }
}
function Stop(music,id) {
 var audio = $("#"+id);
 audio.attr("src", '');
 $("#play").attr("class","glyphicon glyphicon-play aligned")
 status = 0;
}
function Restart(music,id) {
 var audio = $("#"+id);
 audio.prop("currentTime",0)
}
function VolumeUp(music,id) {
 var audio = $("#"+id);
 var volume = $("#"+id).prop("volume")+0.1;
 if(volume > 1) volume = 1;
 $("#"+id).prop("volume",volume);
}
function VolumeDown(music,id) {
 var audio = $("#"+id);
 var volume = $("#"+id).prop("volume")-0.1;
 if(volume < 0) volume = 0;
 $("#"+id).prop("volume",volume);
}
function Forward5(music,id) {
 var audio = $("#"+id);
 audio.prop("currentTime",audio.prop("currentTime")+5);
}
function Backward5(music,id) {
 var audio = $("#"+id);
 audio.prop("currentTime",audio.prop("currentTime")-5);
}
</script>