unificar script de audio con toggleclass
Publicado por Queralt (1 intervención) el 23/08/2014 18:23:42
Hola a todos,
Estoy trabajando en un proyecto personal para hacer un web con mapas sonoros. Para ello estoy usando un script que controla el sonido y unos cuantos para cambiar los mapas de fondo e iniciar los recorridos con un puntito que se desplaza por ellos. El problema es que tal como lo tengo organizado ahora se desincroniza el sonido con los cambios de mapas de fondo ya que el script de sonido pone play y pause cada vez que das clic y el cambio de mapas es un toggleclass que tambien funciona cada vez que das clic. Osea que si das clic al primer recorrido se pone el primer mapa y se enciende el primer audio pero si das clic al segundo recorrido directamente se para el audio al tiempo que se carga el segundo mapa.
Ahí va el codigo:
Menú:
Scripts controladores de los mapas (los dos primeros de ejemplo)
scripts controladores de las animaciones del recorrido (los dos primeros de ejemplo)
Hay alguna manera de unificar todo esto para que quede sincronizado y sea más sencillo? Muchas gracias!
Aquí se ve el web en construccion: http://queralt.cuccfree.com
Estoy trabajando en un proyecto personal para hacer un web con mapas sonoros. Para ello estoy usando un script que controla el sonido y unos cuantos para cambiar los mapas de fondo e iniciar los recorridos con un puntito que se desplaza por ellos. El problema es que tal como lo tengo organizado ahora se desincroniza el sonido con los cambios de mapas de fondo ya que el script de sonido pone play y pause cada vez que das clic y el cambio de mapas es un toggleclass que tambien funciona cada vez que das clic. Osea que si das clic al primer recorrido se pone el primer mapa y se enciende el primer audio pero si das clic al segundo recorrido directamente se para el audio al tiempo que se carga el segundo mapa.
Ahí va el codigo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- script controlador del audio --><script>
$(document).ready(function() {
var audioPlayers = $('.punt audio');
$('.punt').click(function() {
var audio = $(this).find('audio').get(0),
paused = audio.paused||!audio.currentTime;
audioPlayers.each(function(){
this.pause();
this.currentTime = 0;
});
paused ? audio.play() : audio.pause();
});
});
</script>
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
<ul>
<li>
<div class="punt primertf">Transecte 1
<audio src="http://www.sousound.com/music/healing/healing_01.mp3"></audio>
</div>
</li>
<li>
<div class="punt segontf">Transecte 2
<audio src="http://www.sousound.com/music/healing/healing_02.mp3"></audio>
</div>
</li>
<li>
<div class="punt tercertf">Transecte 3
<audio src="http://www.sousound.com/music/healing/healing_03.mp3"></audio>
</div>
</li>
<li>
<div class="punt quarttf">Transecte 4
<audio src="http://www.sousound.com/music/healing/healing_04.mp3"></audio>
</div>
</li>
<li>
<div class="punt cinquetf">Transecte 5
<audio src="http://www.sousound.com/music/healing/healing_05.mp3"></audio>
</div>
</li>
</ul>
1
2
3
4
5
6
7
8
9
10
<script>
$('.primertf').on('click', function() {
$('.puntprimerf').toggleClass('puntprimerfclic');
});
</script>
<script>
$('.segontf').on('click', function() {
$('.puntsegonf').toggleClass('puntprimerfclic');
});
</script>
scripts controladores de las animaciones del recorrido (los dos primeros de ejemplo)
1
2
3
4
5
6
7
8
9
10
<script>
$('.primertf').on('click', function() {
$('.paratfun').toggleClass('animaciofun');
});
</script>
<script>
$('.segontf').on('click', function() {
$('.paratfdos').toggleClass('animaciofdos');
});
</script>
Aquí se ve el web en construccion: http://queralt.cuccfree.com
Valora esta pregunta
0