Reproductor mp3 controlado con javascript

18 diciembre, 2008 – 9:21
Categorías: actionscript, javascript, Programación

Para un proyecto reciente tenía la necesidad de reproducir archivos mp3 desde un listado de canciones. La red está llena de javascripts en flash para reproducir mp3s externos, pero no llegué a encontrar alguno que además de poder cargar mp3s te diese la posibilidad de pausar las canciones.

Partimos de la página html:

1
2
3
4
5
6
7
8
9
10
11

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-ES" lang="es-ES">
<head>
</head>
<body>
<!-- nuestro flash reproductor de mp3 -->
<div id="flash"
	<object type="application/x-shockwave-flash" data="audio.swf" width="0" height="0" id="audio"><param name="allowScriptAccess" value="all" /><param name="movie" value="audio.swf" /></object>
</div>
 
</body>
</html>

vemos el ActionScript del flash:

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

import flash.external.ExternalInterface;
 
// allowscriptaccess = samedomain
 
var my_sound:Sound = new Sound();
 
var soundStatus = 0;
var soundStarted = false;
var currentPosition = 0;
var currentPlay;
 
function playSound(param) {
	currentPlay = param;
 
	my_sound = new Sound();
	my_sound.loadSound(param, true);
	my_sound.start(0);
 
	soundStatus = 1;
	soundStarted = true;
	currentPosition = my_sound.position;
 
	my_sound.onSoundComplete = function() {
		soundStatus = 0;
 
		currentPosition = 0;
		// Avisamos a la página
		soundStarted = false;
		this.stop();
	}
}
 
function togglePause() {
	if (soundStatus == 1) { // Lo pausamos
		currentPosition = my_sound.position;
		my_sound.stop();
		soundStatus = 0;
		this.stop();
	} else {
		if (soundStarted) {
			my_sound.start(currentPosition/1000);
			soundStatus = 1;
			this.stop();
		}
 
	}
}
 
function stopSound() {
	if (soundStatus == 1) {
		my_sound.stop();
		soundStatus = 0;
		this.stop();
	}
}
 
ExternalInterface.addCallback("playSound", this, playSound);
ExternalInterface.addCallback("togglePause", this, togglePause);
ExternalInterface.addCallback("stop", this, stopSound);

Ahora imaginemos que tenemos 3 archivos mp3 llamados “mp3_1.mp3″, “mp3_2.mp3″ y “mp3_3.mp3″, vamos a presentar la página html para poder reproducir las 3 canciones:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-ES" lang="es-ES">
<head>
</head>
<body>
<!-- nuestro flash reproductor de mp3 -->
<div id="flash"
	<object type="application/x-shockwave-flash" data="audio.swf" width="0" height="0" id="audio"><param name="allowScriptAccess" value="all" /><param name="movie" value="audio.swf" /></object>
</div>
 
<a href="javascript:reproduce('mp3_1.mp3')">Canción 1</a>
<a href="javascript:reproduce('mp3_2.mp3')">Canción 2</a>
<a href="javascript:reproduce('mp3_3.mp3')">Canción 3</a>
 
</body>
</html>

tendríamos que añadir la función javascript que llame al flash:

1
2
3
4
5
6

<script type="text/javascript">
 
function reproduce(_cual) {
	document.getElementById("audio").playSound(_cual);
}
</script>

Ahora podríamos añadir los botones de pausa/play y stop:

1
2
3
4
5
6
7
8
9

...
<a href="javascript:reproduce('mp3_1.mp3')">Canción 1</a>
<a href="javascript:reproduce('mp3_2.mp3')">Canción 2</a>
<a href="javascript:reproduce('mp3_3.mp3')">Canción 3</a>
 
<a href="javascript:play_pause();">play/pausa</a>
<a href="javascript:stop();">stop</a>
</body>
</html>

y sus funciones:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script type="text/javascript">
function reproduce(_cual) {
	document.getElementById("audio").playSound(_cual);
}
 
function play_pause() {
	document.getElementById("audio").togglePause();
}
 
function stop() {
	document.getElementById("audio").stop();
}
 
function onSoundComplete() {
	alert("Canción completada!!");
}
</script>

y ya tendremos lo básico (pero más importante) para crearnos un reproductor de mp3 controlado por javascript !!

Descárgate los archivos del tutorial

10 comentarios

  1. ALEXANDER
    10 mayo, 2009 a las 23:38 | Permalink

    ES UN BUEN TUTORIAL ESPERO QUE PUEDA HACERLO
    CORRECTAMENTE

  2. VanG
    29 octubre, 2009 a las 21:39 | Permalink

    Gracias tio me ha servido

  3. Choko
    18 noviembre, 2009 a las 16:52 | Permalink

    Ere un fiera Mil Gracias!!!

  4. buy kinect
    24 octubre, 2010 a las 9:49 | Permalink

    Hey,

    This is a question for the webmaster/admin here at blog.iuttu.com.

    May I use some of the information from your post above if I provide a backlink back to your website?

    Thanks,
    Harry

  5. Draco
    13 noviembre, 2010 a las 5:57 | Permalink

    oie amigo una pregunta.. como le hago para mandar un efecto en una accion… tengo un boton ke muestra un texto pero cuando aprieten el boton kiero ke se escuche un sonido de rayo ( que ya tengo) Agradeceria tu ayuda..

  6. admin
    7 diciembre, 2010 a las 10:13 | Permalink

    Pues depende si estás programando en AS2 o AS3… Tienes problemas con crear el elemento de sonido o con añadirle el evento al botón?

  7. federico
    28 diciembre, 2010 a las 22:25 | Permalink

    Hola, eh estado probando todo en firefox y safari pero los botones no funcionan, en cambio si lo hago en vista en vivo en dreamweaver si. por que pasa eso ?

  8. dean
    5 enero, 2011 a las 11:51 | Permalink

    Muchas gracias!
    Me he descargado los archivos los he probado y he visto que funciona sin problema en Firefox. Sin embargo, al tratar de utilizarlo en IE me devuelve este mensaje de error:

    document.getElementById(…)’ es nulo o no es un objeto

    Evidentemente con el error no funciona… Sabes si existe algún problema con el script para IE?? Hay forma de arreglarlo?? Es que llevaba mucho tiempo buscando algo como esto y ahora me daría rabia no poderlo usar…. Muchas gracias!

  9. admin
    7 enero, 2011 a las 8:55 | Permalink

    Hola Dean, creo que el script debería funcionar en IE7, aunque hace ya unos años que lo creamos y no te lo podría asegurar del todo. De todas formas, en la línea #6 del código html de la página, veo que hay un

  10. admin
    19 mayo, 2011 a las 6:02 | Permalink

    Yes, of course ;-)

1 blog nos enlaza

  1. Tecnologia interesante de ipshop.com - Reproductor MP3 de Solange el 22 diciembre, 2008 a las 14:42

    [...] relacionados: Delicious estrena reproductor mp3    Reproductor mp3 controlado con javascript | Blog de iuttu    Reproductores MP3, cómo elegir    The Cloud Player, un reproductor de [...]

Deja tu comentario

Tu correo nunca será compartido. Los campos marcados con * son obligatorios

*
*