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

1
2
3
4
5

Версия: v1.0.2

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

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

Для Bootstrap: 3, 4, 5

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

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

Вес файла: 0.6 Kb

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

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

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

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

Прикреплён файл №1: /_sf/3/396.html

Прикреплён файл №2: /stuff/0-0-0-396-20

Скачали бесплатно: 13 раз

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

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

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

Авторство: bootstraptema.ru

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

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

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

Поделился: IZOTOP

Добавлено: 2016-01-23 в 16:49

Метка: 1654172312

⇄ ⇅

<link rel="stylesheet" href="https://bootstraptema.ru/plugins/font-awesome/4-4-0/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />

<style>
* {
outline: none !important
}
div+div {
margin-top:10px
}
</style>

<audio id="bjs" src="https://bootstraptema.ru/music/s/silent.mp3" preload="auto"></audio>

<div class="text-center">

<button onClick="document.getElementById('bjs').play()" class="btn btn-active" ><i class="fa fa-play"></i></button>
<button onClick="document.getElementById('bjs').pause()" class="btn btn-active" ><i class="fa fa-pause"></i></button>
<button onClick="document.getElementById('bjs').volume += 0.1" class="btn btn-active" ><i class="fa fa-plus"></i></button>
<button onClick="document.getElementById('bjs').volume -= 0.1" class="btn btn-active" ><i class="fa fa-minus"></i></button>

</div>

<div class="text-center">

<button onClick="document.getElementById('bjs').play()" class="btn btn-default" ><i class="fa fa-play"></i></button>
<button onClick="document.getElementById('bjs').pause()" class="btn btn-default" ><i class="fa fa-pause"></i></button>
<button onClick="document.getElementById('bjs').volume += 0.1" class="btn btn-default" ><i class="fa fa-plus"></i></button>
<button onClick="document.getElementById('bjs').volume -= 0.1" class="btn btn-default" ><i class="fa fa-minus"></i></button>

</div>

<div class="text-center">

<button onClick="document.getElementById('bjs').play()" class="btn btn-success" ><i class="fa fa-play"></i></button>
<button onClick="document.getElementById('bjs').pause()" class="btn btn-success" ><i class="fa fa-pause"></i></button>
<button onClick="document.getElementById('bjs').volume += 0.1" class="btn btn-success" ><i class="fa fa-plus"></i></button>
<button onClick="document.getElementById('bjs').volume -= 0.1" class="btn btn-success" ><i class="fa fa-minus"></i></button>

</div>

<div class="text-center">

<button onClick="document.getElementById('bjs').play()" class="btn btn-warning" ><i class="fa fa-play"></i></button>
<button onClick="document.getElementById('bjs').pause()" class="btn btn-warning" ><i class="fa fa-pause"></i></button>
<button onClick="document.getElementById('bjs').volume += 0.1" class="btn btn-warning" ><i class="fa fa-plus"></i></button>
<button onClick="document.getElementById('bjs').volume -= 0.1" class="btn btn-warning" ><i class="fa fa-minus"></i></button>

</div>

<div class="text-center">

<button onClick="document.getElementById('bjs').play()" class="btn btn-danger" ><i class="fa fa-play"></i></button>
<button onClick="document.getElementById('bjs').pause()" class="btn btn-danger" ><i class="fa fa-pause"></i></button>
<button onClick="document.getElementById('bjs').volume += 0.1" class="btn btn-danger" ><i class="fa fa-plus"></i></button>
<button onClick="document.getElementById('bjs').volume -= 0.1" class="btn btn-danger" ><i class="fa fa-minus"></i></button>

</div>

<div class="text-center">

<button onClick="document.getElementById('bjs').play()" class="btn btn-info" ><i class="fa fa-play"></i></button>
<button onClick="document.getElementById('bjs').pause()" class="btn btn-info" ><i class="fa fa-pause"></i></button>
<button onClick="document.getElementById('bjs').volume += 0.1" class="btn btn-info" ><i class="fa fa-plus"></i></button>
<button onClick="document.getElementById('bjs').volume -= 0.1" class="btn btn-info" ><i class="fa fa-minus"></i></button>

</div>