otro boton y linea 2 parcialmente

This commit is contained in:
Meinar00
2025-02-14 15:44:35 +01:00
parent 03acad431e
commit fbf4b2eebc
48 changed files with 76 additions and 67 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
public/audio/2-zafra.wav Normal file

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

View File

@@ -1,6 +1,6 @@
{ {
"short_name": "React App", "short_name": "App Megafonías",
"name": "Create React App Sample", "name": "App Megafonías",
"icons": [ "icons": [
{ {
"src": "favicon.ico", "src": "favicon.ico",

View File

@@ -13,42 +13,33 @@ function App() {
const datos = { const datos = {
"Línea 1": [ "Línea 1": [
"Zafra", "Zafra", "Julio Caro Baroja (Aqualon)", "Avda. Alemania (Esquina Ruiz de Alda)",
"Julio Caro Baroja (Aqualon)", "Avda. Alemania (Plaza de Toros)", "Bda. Navidad", "Don Bosco",
"Avda. Alemania (Esquina Ruiz de Alda)", "Plaza de los Dolores", "Barriada del Carmen", "Humilladero", "Cardeñas",
"Avda. Alemania (Plaza de Toros)", "Orden Baja", "Gonzalo de Berceo", "Plaza Niño Miguel", "Magnolia",
"Bda. Navidad", "Hospital JRJ", "Plaza las Amapolas", "Av. Andalucia (Castaño Robledo)",
"Don Bosco", "Monumento al Fútbol", "Relaciones Laborales (Universidad)",
"Plaza de los Dolores", "Vista Alegre-Universidad", "Centro Comercial Holea", "Cruce Romeralejo",
"Barriada del Carmen", "Universidad. Avenida de las Artes", "Palacio de Deportes",
"Humilladero", "Higueral (Fuerzas Armadas)", "Bda. José Antonio", "Isla Chica",
"Cardeñas", "Las Delicias", "El Árbol", "Gasolinera", "Estación de Ferrocarril",
"Orden Baja", "El punto", "Estación de Sevilla", "Nuevo Mercado"
"Gonzalo de Berceo",
"Plaza Niño Miguel",
"Magnolia",
"Hospital JRJ",
"Plaza las Amapolas",
"Av. Andalucia (Castaño Robledo)",
"Monumento al Fútbol",
"Relaciones Laborales (Universidad)",
"Vista Alegre-Universidad",
"Centro Comercial Holea",
"Cruce Romeralejo",
"Universidad. Avenida de las Artes",
"Palacio de Deportes",
"Higueral (Fuerzas Armadas)",
"Bda. José Antonio",
"Isla Chica",
"Las Delicias",
"El Árbol",
"Gasolinera",
"Estación de Ferrocarril",
"El punto",
"Estación de Sevilla",
"Nuevo Mercado"
], ],
"Línea 5000": ["Puente de Vallecas"] "Línea 2": [
"Zafra", "Nuevo Mercado", "Villa de Madrid", "Avenida Italia",
"Estación de Sevilla", "El Punto", "Estación de Ferrocarril", "Juzgados",
"Barrio Obrero", "El Porvenir", "Las Delicias", "Isla Chica",
"Bda, José Antonio", "Fuerzas Armadas Los Rosales", "Palacio de Deporte",
"Ciencias de la Educación (Universidad)", "Biblioteca (Universidad)",
"Monumento al Fútbol", "Relaciones Laborales (Universidad)",
"Vista Alegre-Universidad", "Centro Comercial Holea", "Plaza las Amapolas",
"Hospital JRJ", "Magnolia", "Orden Alta", "Gonzalo de Berceo (Alto)",
"Gonzalo de Berceo (Bajo)", "Orden Baja", "Legión Española", "Cardeñas",
"Humilladero", "Bda. del Carmen", "Santa Lucía", "Santa Eulalia",
"Bda. Navidad", "Molino de la Vega", "Paseo de las Palmeras",
"Julio Caro Baroja (Aqualon)"
],
"Línea 131": ["Puente de Vallecas"]
}; };
const handleLineaChange = (event) => { const handleLineaChange = (event) => {
@@ -76,6 +67,7 @@ function App() {
audio.pause(); audio.pause();
} }
if (lineaSeleccionada && paradaSeleccionada) {
const playAudio = (audioFile) => { const playAudio = (audioFile) => {
const nuevoAudio = new Audio(audioFile); const nuevoAudio = new Audio(audioFile);
nuevoAudio.play().catch(error => { nuevoAudio.play().catch(error => {
@@ -84,23 +76,30 @@ function App() {
return nuevoAudio; return nuevoAudio;
}; };
// Play "parada_actual" or "parada_siguiente" FIRST if (tipoParada === "noUsar") {
const paradaTipoAudio = playAudio(`/audio/parada_${tipoParada}.wav`); let paradaAudioFile = `/audio/${lineaSeleccionada.split(" ")[1]}-${paradaSeleccionada.toLowerCase().replace(/ /g, "_")}.wav`;
setAudio(paradaTipoAudio); // Update state immediately
audioRef.current = paradaTipoAudio; // Set audio ref
paradaTipoAudio.volume = volume; // Set volume
// Then, if a specific stop is selected, play that audio AFTER
if (datos[lineaSeleccionada] && datos[lineaSeleccionada].includes(paradaSeleccionada)) {
paradaTipoAudio.onended = () => { // Play stop audio after type audio
let paradaAudioFile = "";
paradaAudioFile = `/audio/${paradaSeleccionada.toLowerCase().replace(/ /g, "_")}.wav`; // Dynamic file naming
const paradaAudio = playAudio(paradaAudioFile); const paradaAudio = playAudio(paradaAudioFile);
setAudio(paradaAudio); // Update state again setAudio(paradaAudio);
audioRef.current = paradaAudio; // Set audio ref audioRef.current = paradaAudio;
paradaAudio.volume = volume; // Set volume paradaAudio.volume = volume;
} else {
const paradaTipoAudio = playAudio(`/audio/parada_${tipoParada}.wav`);
setAudio(paradaTipoAudio);
audioRef.current = paradaTipoAudio;
paradaTipoAudio.volume = volume;
paradaTipoAudio.onended = () => {
let paradaAudioFile = `/audio/${lineaSeleccionada.split(" ")[1]}-${paradaSeleccionada.toLowerCase().replace(/ /g, "_")}.wav`;
const paradaAudio = playAudio(paradaAudioFile);
setAudio(paradaAudio);
audioRef.current = paradaAudio;
paradaAudio.volume = volume;
}; };
} }
} else {
console.log("Por favor, selecciona una línea y una parada.");
alert("Para reproducir el audio, selecciona una línea y una parada.");
}
}; };
const reproducirColision = () => { const reproducirColision = () => {
@@ -112,16 +111,16 @@ function App() {
useEffect(() => { useEffect(() => {
const cargarAudios = () => { const cargarAudios = () => {
// Preload audio files (optional but recommended)
const audioActual = new Audio(`/audio/parada_actual.wav`); const audioActual = new Audio(`/audio/parada_actual.wav`);
const audioSiguiente = new Audio(`/audio/parada_siguiente.wav`); const audioSiguiente = new Audio(`/audio/parada_siguiente.wav`);
// Dynamically preload audio files for each stop for (const linea in datos) {
datos["Línea 1"].forEach(parada => { datos[linea].forEach(parada => {
const audio = new Audio(`/audio/${parada.toLowerCase().replace(/ /g, "_")}.wav`); const audio = new Audio(`/audio/${parada.toLowerCase().replace(/ /g, "_")}.wav`);
}); });
}
const audioVallecas = new Audio(`/audio/vallecas.wav`); // Preload new audio file const audioVallecas = new Audio(`/audio/vallecas.wav`);
const audioColision = new Audio(`/audio/colision.m4a`); const audioColision = new Audio(`/audio/colision.m4a`);
}; };
@@ -183,6 +182,16 @@ function App() {
/> />
<span className="form-check-label">Parada siguiente</span> <span className="form-check-label">Parada siguiente</span>
</label> </label>
<label>
<input
type="radio"
value="noUsar"
checked={tipoParada === 'noUsar'}
onChange={handleTipoParadaChange}
className="form-check-input"
/>
<span className="form-check-label">No usar</span>
</label>
</div> </div>
<div> <div>
@@ -205,7 +214,7 @@ function App() {
</button> </button>
<button onClick={reproducirColision} className="btn btn-danger mt-3 fixed-bottom"> <button onClick={reproducirColision} className="btn btn-danger mt-3 fixed-bottom">
Colisión Anti-Colisión
</button> </button>
</div> </div>
); );