iuttu » actionscript http://www.iuttu.com Desarrollo web Mon, 23 Jan 2012 16:52:04 +0000 en hourly 1 Reproductor mp3 controlado con javascripthttp://www.iuttu.com/2008/12/reproductor-mp3-controlado-con-javascript/ http://www.iuttu.com/2008/12/reproductor-mp3-controlado-con-javascript/#comments Thu, 18 Dec 2008 08:21:33 +0000 iuttu http://blog.iuttu.com/?p=102 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

]]> http://www.iuttu.com/2008/12/reproductor-mp3-controlado-con-javascript/feed/ 11