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

<<>>
Imágen de perfil
Actualizado

Reproductor de audio controlado desde JavaScriptgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(3)
Actualizado el 19 de Junio del 2017 por xve (Creado el 05 de Enero del 2017)
1.450 visualizaciones desde el 05 de Enero del 2017. Una media de 63 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(3)

Actualizado el 19 de Junio del 2017 (Creado el 05 de Enero del 2017)gráfica de visualizaciones de la versión: Versión 1.0
1.451 visualizaciones desde el 05 de Enero del 2017. Una media de 63 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 (3)

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

Comentar la versión: Versión 1.0

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

http://lwp-l.com/s3823