Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Barra de progreso de audio

JavaScript - Barra de progreso de audio

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 59
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Barra de progreso de audio

Publicado por Jean (22 intervenciones) el 17/12/2020 15:52:53
Hola, tengo este reproductor de audio, pero no tengo claro como hacer que la barra de funciones avance, algun consejo??


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
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE HTML>
<HEAD>
    <script>
        function reproducir()
        {
            var boton=document.getElementById("reproducir")
            addEventListener("click",presionar,false)
        }
        function presionar()
        {
            var audio=document.getElementById("audio")
            if(!audio.paused && !audio.ended)
            {
                audio.pause()
                reproducir.innerHTML="Reproducir"
                window,clearInterval(bucle)
            }
            else
            {
                audio.play()
                reproducir.innerHTML="Pausa"
                var bucle=setInterval(estado, 1000)
            }
        }
        function menos5sg()
            {
                var audio=document.getElementById("audio")
                audio.play()
                audio.currentTime=audio.currentTime-5
            }
            function mas5sg()
            {
                var audio=document.getElementById("audio")
                audio.currentTime=audio.currentTime+5
                audio.play()
            }
            function restar()
            {
                var audio=document.getElementById("audio")
                audio.currentTime=0
                audio.play()
            }
        function iniciar()
        {
            var elemento = document.getElementById("lienzo");
            var lienzo = elemento.getContext("2d");
            lienzo.strokeRect(0,0,500,50)
            var audio=document.getElementById("audio")
            var posicion = (audio.currentTime/audio.Duration)*20
            lienzo.fillRect(0,0,5,50)
        }
        window.addEventListener("load", iniciar, false)
 
    </script>
</HEAD>
<BODY>
    <canvas id="lienzo" height="50" width="500"></canvas>
    <section id="reproductor">
        <audio id="audio">
            <source src="MagicalDream.mp3">
            <source src="MagicalDream.ogg">
            </audio>
        <button id="reproducir" onclick="reproducir()">Reproducir/Pausar</button>
        <button id="-5sg" onclick="menos5sg()">-5sg</button>
        <button id="+5sg" onclick="mas5sg()">+5sg</button>
        <button id="0" onclick="restar()">Restar</button>
    </section>
</BODY>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
1
Responder
Imágen de perfil de Alejandro
Val: 1.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Barra de progreso de audio

Publicado por Alejandro (540 intervenciones) el 19/12/2020 00:28:11
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
Lo estas haciendo con canvas, disculpa que te lo cambie un poco para hacerlo mas sencillo, el principio es el mismo que es lo que importa.
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
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE HTML>
<HEAD>
	<script>
		function reproducir(){
			var audio=document.getElementById("audio")
			if(!audio.paused && !audio.ended){
				audio.pause()
				reproducir.innerHTML="Reproducir"
			}else{
				audio.play()
				reproducir.innerHTML="Pausa"
			}
		}
 
		function menos5sg(){
			var audio=document.getElementById("audio")
			audio.play()
			audio.currentTime=audio.currentTime-5
		}
 
		function mas5sg(){
			var audio=document.getElementById("audio")
			audio.currentTime=audio.currentTime+5
			audio.play()
		}
 
		function restar(){
			var audio=document.getElementById("audio")
			audio.currentTime=0
			audio.play()
		}
 
		function iniciar(){
			document.querySelector('audio').addEventListener('timeupdate',function(){
				document.getElementById('progreso').style.width = (this.currentTime * 100 / this.duration)+'%';
			});
		}
		window.addEventListener("load", iniciar, false)
	</script>
 
	<style>
		#barra{
			position:relative;
			height:5px;
			width:500px;
			border:solid 1px #ccc;
		}
		#progreso{
			position:absolute;
			height:100%;
			width: 0%;
			background:#0F0;
		}
	</style>
</HEAD>
<BODY>
	<div id="barra">
		<div id="progreso"></div>
	</div>
	<section id="reproductor">
		<audio id="audio">
			<source src="pista.mp3">
		</audio>
		<button id="reproducir" onclick="reproducir()">Reproducir/Pausar</button>
		<button id="-5sg" onclick="menos5sg()">-5sg</button>
		<button id="+5sg" onclick="mas5sg()">+5sg</button>
		<button id="0" onclick="restar()">Restar</button>
	</section>
</BODY>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar