Как правильно стилизовать теги <audio>, <video> с помощью js (jquery)?

@Mikhail Shell · Регистрация: 15.11.2014

Студворк — интернет-сервис помощи студентам

Скажите пожалуйста, как правильно стилизовать теги <audio>, <video> с помощью js (jquery)!
ЗЫ. насколько я знаю эти теги нельзя стилизовать с помощью css.

@Опан · 22.02.2015, 23:30

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

@Mikhail Shell · 23.02.2015, 11:46 **[ТС]**

Сообщение от Опан

а сам плеер использовать в невидимом состоянии

В прошлый раз, когда я стилизовал input file по такому же принципу намучился со слоями.

Сообщение от Опан

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

Опан, кнопки "пауза", "плей", "+"," -", это понятно как создать. Но ползунки как сделать? Ведь нужно во первых чтобы они двигались вместе с музыкой, а я не особо дружу с js.

@arcmag · 23.02.2015, 17:38

Как вариант можно сделать такой ползунок

HTML5
1
<input onchange="" type="range">

ну либо свой пилить при помощи дивов.
Контейнер ползунка, иконка ползунка и всякие события сигнализирующие нажатие клавиши мыши, движения и отжатия клавиши мыши.

@Опан · 23.02.2015, 23:12

Сообщение от Mikhail Shell

Ведь нужно во первых чтобы ползунки двигались вместе с музыкой

У элемента audio есть свойство currentTime - это количество уже проигранных секунд. (audiio.currenttime) Оно меняется в режиме реального времени во время воспроизведения. Если это задать для установления горизонтальной координаты изображения ползунка, то он всегда будет соответствовать текущей временной позиции воспроизводящейся мелодии.

@Mikhail Shell · 24.02.2015, 12:17 **[ТС]**

Опан, вот смотрите есть audio и input:

HTML5
1
2
3
4
<audio id="audio1" controls>
        <source src="#" />
</audio>
<input type="range" value="0" />

Затем мы добавляем атрибут ончендж? или как?

HTML5
1
<input type="range" value="0" onChange="this.value = document.getElementById('audio1').currenttime;" />

Скажите пожалуйста, потому что я не особый мыслитель js!

@Vadim_Lasso · 24.02.2015, 18:38

Сообщение от Mikhail Shell

кнопки "пауза", "плей", "+"," -", это понятно как создать. Но ползунки как сделать?

Например так: http://jsfiddle.net/kmodfc8w/1/

@Mikhail Shell · 24.02.2015, 20:46 **[ТС]**

LASSO, хороший скрипт, но произошла загвозка - не выводятся ползунки. Почему это может быть?
Вот код:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<html>
    <head>
        <title>рок</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <meta charset="utf-8" />
        <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
        <style>
        #player{
  position:relative;
  margin:50px auto;
  width:300px;
  text-align:center;
  font-family:Helvetica, Arial;
}
#playpause{
  border:1px solid #eee;
  cursor:pointer;
  padding:12px 0;
  color:#888;
  font-size:12px;
  border-radius:3px;
}
#playpause:hover{
  border-color: #ccc;
}
#volume, #progressbar{
  border:none; 
  height:2px;
}
#volume{
  background:hsla(180,75%,50%,1);
}
#progressbar{
  background:#ccc;
}
.ui-slider-handle{
  border-radius:50%;
  top: -5px !important;
  width: 11px !important;
  height: 11px !important;
  margin-left:-5px !important;
}
        </style>
    </head>
    <body>
 
        <div id="main" align="center">
            <div id="loyat">
                    <?
                        include("blocks/header.php"); 
                        include("blocks/menu.php"); 
                        include("blocks/content_rok.php"); 
                        include("blocks/footer.php"); 
                    ?>
            </div>
        </div>
    </body>
</html>

content_rok.php

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
    <script>
        $(function() {
 
      var $aud = $("#audio"),
          $pp  = $('#playpause'),
          $vol = $('#volume'),
          $bar = $("#progressbar"),
          AUDIO= $aud[0];
      
      AUDIO.volume = 0.75;
      AUDIO.addEventListener("timeupdate", progress, false);
      
      function getTime(t) {
        var m=~~(t/60), s=~~(t % 60);
        return (m<10?"0"+m:m)+':'+(s<10?"0"+s:s);
      }
      
      function progress() {
        $bar.slider('value', ~~(100/AUDIO.duration*AUDIO.currentTime));
        $pp.text(getTime(AUDIO.currentTime));
      }
 
      $vol.slider( {
        value : AUDIO.volume*100,
        slide : function(ev, ui) {
          $vol.css({background:"hsla(180,"+ui.value+"%,50%,1)"});
          AUDIO.volume = ui.value/100; 
        } 
      });
       
      $bar.slider( {
        value : AUDIO.currentTime,
        slide : function(ev, ui) {
          AUDIO.currentTime = AUDIO.duration/100*ui.value;
        }
      });
      
      $pp.click(function() {
        return AUDIO[AUDIO.paused?'play':'pause']();
      });
      
    });
    </script>
<div id="content">
    <h1>рок</h1>
    <p>
        На этой странице вы сможете прослушать, а также скачать одни из самых 
        лучших произведений в рок-стиле.
    </p><div id="player">
    <audio id="audio" src="#" autoplay loop>
     <div id="volume"></div><br>
  <div id="progressbar"></div><br> 
  <div id="playpause"></div>
  </div>
</div>

@Опан · 24.02.2015, 23:25

Что касается input type="range":

Сообщение от Mikhail Shell

Решение на половину правильное. Тут ещё нужно для range задать атрибут max. Он должен соответствовать полной длительности звучания аудиофайла в секундах, иначе ползунок будет спешить или отставать. А полная длительость файла считывается из свойства audio.duration. Сначала range даём id:

HTML5
1
<input id=myrange type="range" value="0">

JavaScript
1
2
3
4
5
6
<script>
document.getElementById('myrange').max=document.getElementById('audio1').duration;
setInterval(function{
    document.getElementById('myrange').value=document.getElementById('audio1').currentTime;
},100);
</script>

Как видно, присвоение позиции ползунку делается регулярно, в данном с лучае 10 раз в секунду, в результате чего ползунок двигается.

Добавлено через 7 минут
Забыл об onChange: тут наоборот, audio.currentTime должно задаваться, считывая позицию ползунка:

HTML5
1
onChange="document.getElementById('audio1').currenttime=this.value"

@Mikhail Shell · 25.02.2015, 19:19 **[ТС]**

Опан, вроде сделал все как вы сказали но все равно не получается.
Из за чего это может быть? Вот код:
rok.php

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
    <head>
        <title>рок</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="text/javascript" src="range.js"></script>
        <meta charset="utf-8" />
    </head>
    <body>
        <div id="main" align="center">
            <div id="loyat">
                    <?
                        include("blocks/header.php"); 
                        include("blocks/menu.php"); 
                        include("blocks/content_rok.php"); 
                        include("blocks/footer.php"); 
                    ?>
            </div>
        </div>
    </body>
</html>

content_rok.php

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="content">
    <h1>рок</h1>
    <p>
        На этой странице вы сможете прослушать, а также скачать одни из самых 
        лучших произведений в рок-стиле.
    </p>
    <audio id="audio1" controls>
        <source src="#" />
    </audio>
    <input type="range" id="myrange" value="0" onChange="document.getElementById('audio1').currenttime = this.value" />
</div>

range.js

JavaScript
1
2
3
4
document.getElementById('myrange').max = document.getElementById('audio1').duration;
setInterval(function{
    document.getElementById('myrange').value = document.getElementById('audio1').currentTime;
},100);

@Опан · 25.02.2015, 23:15

А как Вы подключаете аудиофайл? <source src="#" /> вместо # должен быть путь к файлу, который нужно воспроизвести.

@Mikhail Shell · 26.02.2015, 07:28 **[ТС]**

Опан, вместо # у меня полный путь к файлу и он воспроизводится.

@Опан · 26.02.2015, 21:16

1) Файл range.js, строка 2 - не хватает пустых круглых скобок: setInterval(function(){ (Это моя ошибка, т. к., у меня скопировано)
2) Файл content_rok.php, строка 10 - в currentTime должно быть большое T (Видать, я тогда не заметил, а работоспособность не проверил.)
3) Если в JS-скрипте не очень много кода, то часто получается, что audio.duration не успевает прочитаться из аудиофайла после объявления тега audio, и приходится задавать задержку во времени от 50 милисекунд. (но я для надёжности поставил 200)
4) Чтобы стабильно срабатывало onChange, пришлось увеличить период считывания currentTime до 500 милисекунд.
Итого, у меня получился такой рабочий код:

HTML5
1
2
3
4
<audio id=audio1 controls>
    <source src="sound.ogg">
</audio>
<input type="range" id="myrange" value="0" onChange="document.getElementById('audio1').currentTime = this.value">

JavaScript
1
2
3
4
5
6
7
8
<script>
setTimeout(function(){
    document.getElementById('myrange').max = document.getElementById('audio1').duration;
},200);
setInterval(function(){
    document.getElementById('myrange').value = document.getElementById('audio1').currentTime;
},500);
</script>

@Mikhail Shell · 27.02.2015, 16:12 **[ТС]**

Сообщение от Опан

не хватает пустых круглых скобок

И я тоже не заметил
Опан, спасибо получилось!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .

@Mikhail Shell 52 / 52 / 39 Регистрация: 15.11.2014 Сообщений: 696

	Как правильно стилизовать теги <audio>, <video> с помощью js (jquery)? 22.02.2015, 19:30. Показов 9373. Ответов 13 Метки нет (Все метки) Скажите пожалуйста, как правильно стилизовать теги <audio>, <video> с помощью js (jquery)! ЗЫ. насколько я знаю эти теги нельзя стилизовать с помощью css. 0

@Опан Юзер с абсолютным слухом 709 / 489 / 195 Регистрация: 17.12.2010 Сообщений: 1,428
	22.02.2015, 23:30
	Можно использовать собственные графические изображения частей плеера - ползунок, кнопки, полосы загрузки и воспроизведения, таймер и т. д., а сам плеер использовать в невидимом состоянии (с ключом hidden. Он же действует по-умолчанию, если нет ключа controls.) 0

@Опан Юзер с абсолютным слухом 709 / 489 / 195 Регистрация: 17.12.2010 Сообщений: 1,428
	25.02.2015, 23:15
	А как Вы подключаете аудиофайл? <source src="#" /> вместо # должен быть путь к файлу, который нужно воспроизвести. 0

@Mikhail Shell 52 / 52 / 39 Регистрация: 15.11.2014 Сообщений: 696
	26.02.2015, 07:28 [ТС]
	Опан, вместо # у меня полный путь к файлу и он воспроизводится. 0