Bootstrap Circle Audio Player / Аудиоплееры / Сниппеты Bootstrap

Версия: v1.0

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

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

Bootstrap: 3, 4

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

Язык: Английский

Вес файла: 2.99 Mb

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Метка: 1581617285

⇄ ⇅

song.type= 'audio/mpeg';
 song.src= 'https://bootstraptema.ru/snippets/audio/2016/circle-player/robbenson.mp3';

stop.on('click', function(e) {
 e.preventDefault();
 $(this).addClass('hide');
 $('#play').removeClass('hide').trigger('click'); 
 })

play.on('click', function(e) {
 e.preventDefault();
 if (!$(this).hasClass('active')){
 song.play();
 $('.active').removeClass('active');
 $(this).addClass('active');
 }else{
 song.pause();
 $('.active').removeClass('active');
 var curtime = song.currentTime / song.duration * 100;
 $('.progress-radial').removeClass('progress-'+parseInt(curtime));
 song.currentTime = 0; 
 $(this).addClass('hide');
 stop.removeClass('hide').addClass('active');
 }
 });

pause.on('click', function(e) {
 e.preventDefault();
 song.pause();
 $('.active').removeClass('active');
 $(this).addClass('active');
 });

mute.on('click', function(e) {
 e.preventDefault();
 song.volume = 0;
 $(this).addClass('hide');
 $('#muted').removeClass('hide');
 });

muted.on('click', function(e) {
 e.preventDefault();
 song.volume = 1;
 $(this).addClass('hide');
 $('#mute').removeClass('hide');
 });

song.addEventListener('timeupdate', function (){
 var curtime = song.currentTime / song.duration * 100;
 $('.progress-radial').addClass('progress-'+parseInt(curtime));
 $('.progress-radial').removeClass('progress-'+parseInt(curtime-1));
 }); 
});
</script>

BootstrapTema

Bootstrap Circle Audio Player

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0