Código de JavaScript - Reproductor de audio controlado desde JavaScript

Imágen de perfil

Reproductor de audio controlado desde JavaScriptgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(6)
Actualizado el 19 de Junio del 2017 por xve (Publicado el 05 de Enero del 2017)
2.609 visualizaciones desde el 05 de Enero del 2017. Una media de 84 por semana
Este código muestra como se puede gestionar el elemento de HTML5 <audio> desde Javascript para reproducir una canción mp3, pudiendo iniciar, parar o reiniciar la canción desde JavaScript.

reproductor-audio

Versión 1.0
estrellaestrellaestrellaestrellaestrella(6)

Actualizado el 04 de Julio del 2017 (Publicado el 05 de Enero del 2017)gráfica de visualizaciones de la versión: Versión 1.0
2.611 visualizaciones desde el 05 de Enero del 2017. Una media de 84 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Para los símbolos de play, pause y reiniciar hemos utilizado los que trae el navegador... puedes ver el listado de símbolos aquí: https://www.toptal.com/designers/htmlarrows/
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
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
	<style>
	#duracion {width:100px;border:1px solid #808080;height:20px;margin:2px;}
	#duracion,
	#botones {padding:1px;float:left;}
	#duracion span {width:1px;background-color:#bfbfbf;height:20px;position:absolute;}
	#duracion div {text-align:center;position:relative;}
	#botones {margin-left:5px;}
	#botones button {font-size:1em;width:30px;}
	</style>
</head>
 
<body>
 
	<audio id="miAudio" src="parte1.mp3"></audio>
 
	<div id="duracion">
		<span></span>
		<div></div>
	</div>
 
	<div id="botones">
		<button id="iniciar" onclick="iniciar()">&#8227;</button>
		<button id="reiniciar" onclick="reiniciar()">&#8635;</button>
	</div>
</body>
</html>
 
<script>
var miAudio=document.getElementById("miAudio");
var duracion=0;
var interval;
miAudio.ondurationchange = function() {
	duracion=miAudio.duration;
}
 
function iniciar()
{
	if(miAudio.paused)
	{
		// iniciamos
		miAudio.play();
		interval=setInterval(mostrarDuracion,100);
		document.getElementById("iniciar").innerHTML="&#8545;";
	}else{
		// paramos
		miAudio.pause();
		clearInterval(interval);
		document.getElementById("iniciar").innerHTML="&#8227;";
	}
}
 
function reiniciar()
{
	// nos posicionamos al inicio de la cancion
	miAudio.currentTime=0;
	if(miAudio.paused)
	{
		miAudio.play();
		interval=setInterval(mostrarDuracion,100);
	}
}
 
function mostrarDuracion()
{
	if(duracion>0)
	{
		porcentaje=miAudio.currentTime*100/duracion;
		document.getElementById("duracion").getElementsByTagName("span")[0].style.width=porcentaje+"px";
		document.getElementById("duracion").getElementsByTagName("div")[0].innerHTML=parseInt(porcentaje)+"%";
	}
}
</script>



Comentarios sobre la versión: Versión 1.0 (6)

Imágen de perfil
kip
05 de Enero del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
ScriptShow
07 de Enero del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
Humberto
02 de Marzo del 2017
estrellaestrellaestrellaestrellaestrella
Has uno para el video chido y personalizado
Responder
Angel
02 de Julio del 2017
estrellaestrellaestrellaestrellaestrella
comparto plenamente tu pedido
Responder
Angel
02 de Julio del 2017
estrellaestrellaestrellaestrellaestrella
Se ve hermoso, es minimalista y funciona.
Defectos: le pones recargar, pausa y queda la imagen de play, pero pausa sin problema.
Mejoras: 1° Agregarle playlist, con azar de reproduccion continuo o no.
agregarle remision a porcentaje de reproduccin con el toque al la barra de reproduccion
agregarle lector de tag a la barra reproductora, agregarle botones de siguiente y anterior tema
agregarle boton de detener
mas alla de eso excelente :D
Responder
Gerardo
Hace 2d
estrellaestrellaestrellaestrellaestrella
me puedes ayudar ? se supone que uno tiene la cancion. como hago para que ponerla y que se reproduzca?
Responder

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s3823