Стилизация html тега "audio"
6904
0
Mihail2002
junior
Есть сайт про музыку. Хочу стилизовать тег аудио собрав его по частям - кнопки, ползунки. С кнопками плей, пауза, "+", "-" не вышло проблем, потому что точно знаю как их делать. Но с ползунками все сложнее, ведь они должны двигаться вместе с музыкой. Пробовал уже реализовать подобное следующим образом:
rok.php
<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
<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
document.getElementById('myrange').max=document.getElementById('audio1').duration;
setInterval(function{
document.getElementById('myrange').value=document.getElementById('audio1').currentTime;
},100);
Подскажите пожалуйста, почему ползунки не двигаются вместе с музыкой!
rok.php
<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
<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
document.getElementById('myrange').max=document.getElementById('audio1').duration;
setInterval(function{
document.getElementById('myrange').value=document.getElementById('audio1').currentTime;
},100);
Подскажите пожалуйста, почему ползунки не двигаются вместе с музыкой!
ТОП 5
1
3
4