Как правильно стилизовать теги <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 **[ТС]**

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

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

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

Новые блоги и статьи Все статьи Все блоги /
изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

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

	Как правильно стилизовать теги <audio>, <video> с помощью js (jquery)? 22.02.2015, 19:30. Показов 9347. Ответов 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