No se reproducen los sonidos.
Publicado por Santiago (3 intervenciones) el 16/02/2023 20:44:56
Hola buenas!
Quiero crear una web sencilla para mi hija en la cual tiene que enlazar los sonidos de las cajas de la izquierda con las imagenes de la derecha.
El problema es que no se reproducen los sonidos.
y este seria el codigo .js
Si pudierais ayudarme un poco os lo agradeceria.
Quiero crear una web sencilla para mi hija en la cual tiene que enlazar los sonidos de las cajas de la izquierda con las imagenes de la derecha.
El problema es que no se reproducen los sonidos.
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
<!DOCTYPE html>
<html>
<head>
<title>Juego de enlazar sonidos e imágenes</title>
<link rel="stylesheet" href="vega.css">
</head>
<body>
<h1>Juego de enlazar sonidos e imágenes</h1>
<div id="container">
<div id="sounds">
<div id="sound1" class="sound" data-index="0"><audio src="peppapig.mp3"></audio></div>
<div id="sound2" class="sound" data-index="1"><audio src="vahiana.mp3"></audio></div>
<div id="sound3" class="sound" data-index="2"><audio src="miercoles.mp3"></audio></div>
<div id="sound4" class="sound" data-index="3"><audio src="patatin.mp3"></audio></div>
<div id="sound5" class="sound" data-index="4"><audio src="bluey.mp3"></audio></div>
<div id="sound6" class="sound" data-index="5"><audio src="rapunzel.mp3"></audio></div>
</div>
<div id="images">
<div id="image1" class="image" data-index="0"><img src="https://i.ibb.co/wBxxHC3/unnamed.png" alt="unnamed" border="0" /></div>
<div id="image2" class="image" data-index="1"><img src="https://i.ibb.co/Vgngzh1/71jr-SKdnu8-L-SL1500.jpg" alt="71jr-SKdnu8-L-SL1500" border="0" /></div>
<div id="image3" class="image" data-index="2"><img src="https://i.ibb.co/F8z6RW7/f-elconfidencial-com-original-361-7ac-c3b-3617acc3b6561564ea6582fcecf5cd08.jpg" alt="f-elconfidencial-com-original-361-7ac-c3b-3617acc3b6561564ea6582fcecf5cd08" border="0" /></div>
<div id="image4" class="image" data-index="3"><img src="https://i.ibb.co/0BxTjxh/patat-n-y-patat-n.jpg" alt="patat-n-y-patat-n" border="0" /></div>
<div id="image5" class="image" data-index="4"><img src="https://i.ibb.co/R6DgvfW/bluey.jpg" alt="bluey" border="0" /></div>
<div id="image6" class="image" data-index="5"><img src="https://i.ibb.co/vDFtGBq/rapunzel.jpg" alt="rapunzel" border="0" /></div>
</div>
</div>
<script src="vega.js"></script>
</body>
</html>
y este seria el codigo .js
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
76
77
78
79
80
81
82
// Seleccionar los elementos del DOM
var soundBoxes = document.querySelectorAll(".sound");
var imageBoxes = document.querySelectorAll(".image");
// Crear un array con los enlaces correctos
var links = [
[0, 4],
[1, 0],
[2, 5],
[3, 1],
[4, 2],
[5, 3]
];// Crear variables para guardar los elementos seleccionados
var selectedSoundBox = null;var selectedImageBox = null;// Crear variable para guardar el elemento de audio seleccionado
var selectedAudio = null;// Función que se llama cuando se hace clic en una caja de sonidos
function selectSoundBox(event) {
// Si ya se seleccionó una caja de sonidos previamente, se le quita la clase "selected"
if (selectedSoundBox) {
selectedSoundBox.classList.remove("selected");
}// Se guarda la caja de sonidos seleccionada en la variable "selectedSoundBox"selectedSoundBox = event.currentTarget;
selectedSoundBox.classList.add("selected");
// Se actualiza el elemento de audio seleccionado
selectedAudio = document.querySelector("#audio-" + selectedSoundBox.dataset.index);
}// Función que se llama cuando se hace clic en una caja de imágenes
function selectImageBox(event) {
// Si ya se seleccionó una caja de imágenes previamente, se le quita la clase "selected"
if (selectedImageBox) {
selectedImageBox.classList.remove("selected");
}// Se guarda la caja de imágenes seleccionada en la variable "selectedImageBox"selectedImageBox = event.currentTarget;
selectedImageBox.classList.add("selected");
// Si ya se seleccionó una caja de sonidos previamente y esta corresponde con la caja de imágenes seleccionada, se muestra una animación de éxito y se reproduce el sonido correspondienteif (selectedSoundBox && links[selectedSoundBox.dataset.index][1] === parseInt(selectedImageBox.dataset.index)) {
selectedSoundBox.classList.add("success");
selectedImageBox.classList.add("success");
// Se reproduce el sonido correspondiente
selectedAudio.play();
}// Si no se seleccionó ninguna caja de sonidos o la selección no corresponde con la caja de imágenes seleccionada, se muestra una animación de errorif (!selectedSoundBox || links[selectedSoundBox.dataset.index][1] !== parseInt(selectedImageBox.dataset.index)) {
selectedSoundBox = null;selectedImageBox = null;setTimeout(function() {
soundBoxes.forEach(function(box) {
box.classList.remove("selected", "success", "error");
});
imageBoxes.forEach(function(box) {
box.classList.remove("selected", "success", "error");
});
}, 1000);
}}// Añadir el evento "click" a todas las cajas de sonidossoundBoxes.forEach(function(box) {
box.addEventListener("click", selectSoundBox);
});
// Añadir el evento "click" a todas las cajas de imágenesimageBoxes.forEach(function(box) {
box.addEventListener("click", selectImageBox);
});
Si pudierais ayudarme un poco os lo agradeceria.
Valora esta pregunta
0
