Перейти к содержимому


<audio> (CSS / HTML / JS)


  • Закрытая тема Тема закрыта
Сообщений в теме: 13

#1 Ulquiorra

Ulquiorra

    4th Espada

  • Сообщений 1326
  • Торрентов 149
  • Длинный нос 2010
  • ГородLas Noches, Hueco Mundo

Отправлено 06 Август 2014 - 13:57

Код стандартного аудиоплеера в HTML:
<body>
   ...
   <audio controls>
	  <source src="audio/1.mp3" type="audio/mpeg">
   </audio>
   ...
   <div>Test</div>
</body>
На выходе получаем примерно это:


Если нажать на любую область плеера (кнопки, полоса прокрутки .. вообще любая точка) - его обведет точечной рамкой:


Код немного подкрученого плеера ..
Включает в себя файлы:
audioplayer.css
audioplayer.js
http://tympanus.net/...nt/AudioPlayer/ - демо
http://tympanus.net/...ayer.zip?84cd58 - исходники демо
<head>

   ...
   <link href="css/audioplayer.css" rel="stylesheet">
</head>
<body>
   ...
   <div id="wrapper">  
	  <audio preload="auto" controls>	  
		 <source src="audio/1.mp3">
	  </audio>
	  Test
	  ...
   <script src="js/audioplayer.js"></script>
   <script>$( function() { $( 'audio' ).audioPlayer(); } );</script>
   </div>
   ...
</body>

У этого плеера рамки вылезают при нажатии на кнопки играть/стоп и звука, причем не просто обводят объект, а неплохо разъезжаются:


Сабж - как избавиться от этих вылезающих рамок
Общая верстка станицы Bootstrap 3
Браузер - FF
В Chrome рамок нет .. но и в демо на FF рамок нет

#2 Ulquiorra

Ulquiorra

    4th Espada

  • Сообщений 1326
  • Торрентов 149
  • Длинный нос 2010
  • ГородLas Noches, Hueco Mundo

Отправлено 06 Август 2014 - 14:13

Круг проблем сузился. Какие-то конфликты у bootstrap.css с css этого плеера - а вот что именно ..
выдрав css из демо и заменив им бустраповский - рамки исчезли (правда и верстка умерла :biggrin: )
если выдрать из бутстрапа все куски, которые встречаются в css демки и заменить их - рамки остаются

#3 Ulquiorra

Ulquiorra

    4th Espada

  • Сообщений 1326
  • Торрентов 149
  • Длинный нос 2010
  • ГородLas Noches, Hueco Mundo

Отправлено 06 Август 2014 - 15:34

Цитата

var params  = $.extend( { classPrefix: 'audioplayer', strPlay: 'Play', strPause: 'Pause', strVolume: 'Volume' }, params ) ..
Выдрал всплывающие названия из js'ки плеера ..

Цитата

var params  = $.extend( { classPrefix: 'audioplayer', strPlay: '', strPause: '', strVolume: '' }, params ) ..
.. и убрал их странное скрытие из css'ки плеера

Цитата

text-indent: -9999px;

Цитата

text-indent: 0px;
теперь рамки по клику только вокруг маленьких внутренних значков играть\пауза и звук
костыль костылем, но хоть меньше заметно

все еще в поисках нормального решения

#4 TiGrand

TiGrand

    Монстр общения

  • Сообщений 319
  • Торрентов 4
  • ГородСамара

Отправлено 06 Август 2014 - 15:48

Может лучше плеер брать отсюда uppod.ru, за безграничные возможности конечно надо платить, но для одного большого проекта создать свой особенный плеер стоит.
По вопросу, пробовал прописать где-нибудь параметр border: 0 none?
Изображение

#5 Ulquiorra

Ulquiorra

    4th Espada

  • Сообщений 1326
  • Торрентов 149
  • Длинный нос 2010
  • ГородLas Noches, Hueco Mundo

Отправлено 06 Август 2014 - 16:10

для одностраничника покупать плеер за 300 евро .. ээ .. не, спасибо :biggrin:
бордеры убирать у кнопок пробовал, ноль эффекта

#6 TiGrand

TiGrand

    Монстр общения

  • Сообщений 319
  • Торрентов 4
  • ГородСамара

Отправлено 06 Август 2014 - 16:26

Походу эти рамки берутся с самой FF, просто высвечивает элементы управления...
Возможно стоит идти по этому направлению http://forum.mozilla...ic.php?id=30618
Еще стоит помнить об hover, active...
И еще ссылка http://htmlbook.ru/f...u-vokrug-ssylok (и комменты почитай)
Изображение

#7 Ulquiorra

Ulquiorra

    4th Espada

  • Сообщений 1326
  • Торрентов 149
  • Длинный нос 2010
  • ГородLas Noches, Hueco Mundo

Отправлено 06 Август 2014 - 16:51

* {outline: none;}
a {outline: none;}
input {outline: none;}
a:focus{outline:none;}
впиливание вот такой комбы, нарезанной из комментов второй ссылки в корень css'ки бустрапа вроде бы помогло, спасибо :)
остается надеяться, что на телефонах\планшетах никакой бурды не всплывет)

весь косяк в том, что на демо плеера в фф таких рамок не было .. вот и грешил на конфликты css'ок ._. но хоть так решилось, все равно рад :biggrin:

#8 TiGrand

TiGrand

    Монстр общения

  • Сообщений 319
  • Торрентов 4
  • ГородСамара

Отправлено 06 Август 2014 - 17:06

На демках обычно всё блестит, а на деле всегда вылезает какая-то ерунда... рад что решение найдено.
Изображение

#9 Ulquiorra

Ulquiorra

    4th Espada

  • Сообщений 1326
  • Торрентов 149
  • Длинный нос 2010
  • ГородLas Noches, Hueco Mundo

Отправлено 06 Август 2014 - 17:56

так в том и дело .. демка-то скачивается и открывается локально на своем компе - рамок нет. если б была только онлайн - не удивлялся

#10 Azazelo

Azazelo

    Монстр общения

  • Сообщений 937
  • Торрентов 4604
  • Городд

Отправлено 07 Август 2014 - 16:45

там на безымянном неплохой курс висит. недавно залили, может он поможет.

#11 Ulquiorra

Ulquiorra

    4th Espada

  • Сообщений 1326
  • Торрентов 149
  • Длинный нос 2010
  • ГородLas Noches, Hueco Mundo

Отправлено 07 Август 2014 - 16:46

в общем, новый виток сабжа

Изображение

что надо выкинуть из css'ки, чтобы отрезать выделенный красным кусок не убив встроенный ресайзинг?

#12 Ulquiorra

Ulquiorra

    4th Espada

  • Сообщений 1326
  • Торрентов 149
  • Длинный нос 2010
  • ГородLas Noches, Hueco Mundo

Отправлено 07 Август 2014 - 17:52

Цитата

.audioplayer-time-duration
{
border-right: 1px solid #555;
border-right-color: rgba( 255, 255, 255, .1 );
right: 2.5em; /* 40 */
text-indent: -9999px;
}
.audioplayer-novolume .audioplayer-time-duration
{
border-right: 0;
right: 0;
text-indent: -9999px;
}

текст текущего времени скрывается костылем сдвига элемента за границы видимости

.audioplayer-volume
{
  width: 2.5em; /* 40 */
  height: 100%;
  border-left: 1px solid #111;
  border-left-color: rgba( 0, 0, 0, .25 );
  text-align: left;
  text-indent: -9999px;
  cursor: pointer;
  z-index: 2;
  top: 0;
  right: 0;
}
  .audioplayer-volume:hover,
  .audioplayer-volume:focus
  {
   background-color: #222;
  }
  .audioplayer-volume-button
  {
   width: 100%;
   height: 100%;
  }
   .audioplayer-volume-button a
   {
	width: 0.313em; /* 5 */
	height: 0.375em; /* 6 */
	background-color: #fff;
	display: block;
	position: relative;
	z-index: 1;
	top: 40%;
	left: 35%;
   }
	.audioplayer-volume-button a:before,
	.audioplayer-volume-button a:after
	{
	 content: '';
	 position: absolute;
	}
	.audioplayer-volume-button a:before
	{
	 width: 0;
	 height: 0;
	 border: 0.5em solid transparent; /* 8 */
	 border-left: none;
	 border-right-color: #fff;
	 z-index: 2;
	 top: 50%;
	 right: -0.25em;
	 margin-top: -0.5em; /* 8 */
	}
	.audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a:after
	{
	 /* "volume" icon by Nicolas Gallagher, http://nicolasgallagher.com/pure-css-gui-icons */
	 width: 0.313em; /* 5 */
	 height: 0.313em; /* 5 */
	 border: 0.25em double #fff; /* 4 */
	 border-width: 0.25em 0.25em 0 0; /* 4 */
	 left: 0.563em; /* 9 */
	 top: -0.063em; /* 1 */
	 -webkit-border-radius: 0 0.938em 0 0; /* 15 */
	 -moz-border-radius: 0 0.938em 0 0; /* 15 */
	 border-radius: 0 0.938em 0 0; /* 15 */
	 -webkit-transform: rotate( 45deg );
	 -moz-transform: rotate( 45deg );
	 -ms-transform: rotate( 45deg );
	 -o-transform: rotate( 45deg );
	 transform: rotate( 45deg );
	}
  .audioplayer-volume-adjust
  {
   height: 6.25em; /* 100 */
   cursor: default;
   position: absolute;
   left: 0;
   right: -1px;
   top: -9999px;
   background: #222;
   background: -webkit-gradient( linear, left top, left bottom, from( #444 ), to( #222 ) );
   background: -webkit-linear-gradient( top, #444, #222 );
   background: -moz-linear-gradient( top, #444, #222 );
   background: -ms-radial-gradient( top, #444, #222 );
   background: -o-linear-gradient( top, #444, #222 );
   background: linear-gradient( top, #444, #222 );
   -webkit-border-top-left-radius: 2px;
   -webkit-border-top-right-radius: 2px;
   -moz-border-radius-topleft: 2px;
   -moz-border-radius-topright: 2px;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
  }
   .audioplayer-volume:not(:hover) .audioplayer-volume-adjust
   {
	opacity: 0;
   }
   .audioplayer-volume:hover .audioplayer-volume-adjust
   {
	top: auto;
	bottom: 100%;
   }
   .audioplayer-volume-adjust > div
   {
	width: 40%;
	height: 80%;
	background-color: #222;
	cursor: pointer;
	position: relative;
	z-index: 1;
	margin: 30% auto 0;
   }
	.audioplayer-volume-adjust div div
	{
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 background: #007fd1;
	 background: -webkit-gradient( linear, left bottom, left top, from( #007fd1 ), to( #c600ff ) );
	 background: -webkit-linear-gradient( bottom, #007fd1, #c600ff );
	 background: -moz-linear-gradient( bottom, #007fd1, #c600ff );
	 background: -ms-radial-gradient( bottom, #007fd1, #c600ff );
	 background: -o-linear-gradient( bottom, #007fd1, #c600ff );
	 background: linear-gradient( bottom, #007fd1, #c600ff );
	}
  .audioplayer-novolume .audioplayer-volume
  {
   display: none;
  }

а выдрав этот кусок - убираем и кнопку со звуком

остается как-то подрихтовать задник, не убив ресайзинг

Изображение

#13 Ulquiorra

Ulquiorra

    4th Espada

  • Сообщений 1326
  • Торрентов 149
  • Длинный нос 2010
  • ГородLas Noches, Hueco Mundo

Отправлено 07 Август 2014 - 18:10

ну и если будет вопрос "а накой оно?"

Изображение

при верстке под телефон плеер сжимается в вот такую полоску .. выиграть место для бара прокрутки можно выдрав одно из времен и звук - чем и озаботился
тем более под телефон все равно придется делать отмену прелоада музыки, так что время будет зануленное в любом случае

#14 Ulquiorra

Ulquiorra

    4th Espada

  • Сообщений 1326
  • Торрентов 149
  • Длинный нос 2010
  • ГородLas Noches, Hueco Mundo

Отправлено 08 Август 2014 - 00:10

тэээкс

Цитата

.audioplayer-bar
{
height: 0.875em; /* 14 */
background-color: #222;
cursor: pointer;
z-index: 1;
top: 50%;
right: 0.875em; /* 110 */
left: 6.875em; /* 110 */
margin-top: -0.438em; /* 7 */
}

Цитата

.audioplayer-bar-loaded
{
background-color: #333;
z-index: 1;
right: 0.875em;
}

Цитата

.audioplayer-bar-played
{
background: #007fd1;
background: -webkit-gradient( linear, left top, right top, from( #007fd1 ), to( #c600ff ) );
background: -webkit-linear-gradient( left, #007fd1, #c600ff );
background: -moz-linear-gradient( left, #007fd1, #c600ff );
background: -ms-radial-gradient( left, #007fd1, #c600ff );
background: -o-linear-gradient( left, #007fd1, #c600ff );
background: linear-gradient( left, #007fd1, #c600ff );
z-index: 2;
right: 0.875em;
}

вырезав кнопки времени и звука раздвигаем наш лоад бар. получаем примерно это
осталось убрать разделитель

Изображение

о, ну и почти сразу финиш

Цитата

.audioplayer-time-duration
        {
            border-right: 1px solid #555;
            border-right-color: rgba( 255, 255, 255, .1 );
            right: 2.5 9999em; /* 40 */
            text-indent: -9999px;
        }
            .audioplayer-novolume .audioplayer-time-duration
            {
                border-right: 0;
                right: 0;
                text-indent: -9999px;
            }
рамка оставалась от времени, убираем ее. хоть текст и сдвинут, но место, где раньше было время - все еще кликабельно и мешает двигать лоад-бар. поэтому смещаем его на 9999 в рандомную сторону
вуаля, костыльная рихтовка готова

пк-сайз

Изображение

мобайл-сайз

Изображение




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных