Reproductor mp3 controlado con javascript

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

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

3 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!!!

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

*
*