Настройте дубликат аудиоплеера - JS и CSS - PullRequest
Новая
       20

Настройте дубликат аудиоплеера - JS и CSS

0 голосов
/ 14 мая 2018

Привет. Я пытаюсь настроить 20 аудиоплееров, хотя могу заставить работать только первый. Как только я копирую и вставляю новое аудио в html, оно не начинает воспроизводиться. Я не уверен, что единственный способ - дать уникальный идентификатор каждому аудио или есть способ избежать этого, изменив код JavaScript.

спасибо !!!

он-лайн здесь http://musictext.yt/audio/audio.html

HTML 

<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Video</title>
<link rel="stylesheet" href="reproductor.css">
<script src="reproductor.js"></script>
</head>




<body>


<section id="reproductor">

<audio id="medio" width="400" height="400">
<source src="rout.mp3">
</audio>

<nav>
<div id="botones">
<button class="button" id="reproducir" >play</button>
</div>

<div id="barra">
<div id="progreso">

</div>
</div>

<div style="clear: both"></div>
</nav>
</section>
</body>
</html>

JS 

function iniciar() {
maximo=80;
medio=document.getElementById('medio');
reproducir=document.getElementById('reproducir');
barra=document.getElementById('barra');
progreso=document.getElementById('progreso');
reproducir.addEventListener('click', presionar, false);
barra.addEventListener('click', mover, false);
}

function presionar(){
if(!medio.paused && !medio.ended) {
medio.pause();
reproducir.innerHTML='play';
window.clearInterval(bucle);
}else{
medio.play();
reproducir.innerHTML='pause';
bucle=setInterval(estado, 1000);
}
}

function estado(){
if(!medio.ended){
var total=parseInt(medio.currentTime*maximo/medio.duration);
progreso.style.width=total+'px';
}else{
progreso.style.width='0px';
reproducir.innerHTML='play';
window.clearInterval(bucle);
}
}

function mover(e){
if(!medio.paused && !medio.ended){
var ratonX=e.pageX-barra.offsetLeft;
var nuevoTiempo=ratonX*medio.duration/maximo;
medio.currentTime=nuevoTiempo;
progreso.style.width=ratonX+'px';
}
}

window.addEventListener('load', iniciar, false);

CSS 

body{
text-align: center;
}
header, section, footer, aside, nav, article, figure, figcaption,       hgroup{
display : block;
}
#reproductor{
width: 100px;
height: 100px;
margin: 60px auto;
padding: 5px;
background: blue;
border: 1px solid #666666;

}
nav{
margin: 1px 0px;
}


.button {
font-family: arial;
background-color: black;
border: none;
color: white;
padding: ;
text-align: center;
font-size: 12px;
margin: 4px 2px;
opacity: 0.6;
transition: 0.3s;
display: inline-block;
text-decoration: none;
cursor: pointer;
}

.button:hover {opacity: 1}






#botones{
background-color: black;
width: 100px;
height: 20px;



}
#barra{
position: relative;

width: 88px;
height: 66px;
padding: 4px;
border: 1px solid black;
background: white;
}
#progreso{
position: absolute;
width: 0px;
height: 60px;
background: black;
}
...