mirror of
https://github.com/kkhattabi213/megafonias-react.git
synced 2026-01-30 09:13:40 +00:00
otro boton y linea 2 parcialmente
This commit is contained in:
BIN
public/audio/1-avda._alemania_(plaza_de_toros).wav
Normal file
BIN
public/audio/1-avda._alemania_(plaza_de_toros).wav
Normal file
Binary file not shown.
BIN
public/audio/2-nuevo_mercado.wav
Normal file
BIN
public/audio/2-nuevo_mercado.wav
Normal file
Binary file not shown.
BIN
public/audio/2-villa_de_madrid.wav
Normal file
BIN
public/audio/2-villa_de_madrid.wav
Normal file
Binary file not shown.
BIN
public/audio/2-zafra.wav
Normal file
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 |
@@ -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",
|
||||||
|
|||||||
117
src/App.js
117
src/App.js
@@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user