El documento describe un proyecto de radio streaming que utiliza tecnologías como Flask, Python y VLC para permitir la transmisión de audio a través de internet, eliminando barreras geográficas y ofreciendo una amplia variedad de contenido. Se detalla la estructura del proyecto, incluyendo el código fuente del servidor Flask y la interfaz de usuario en HTML, CSS y JavaScript. El proyecto permite a los usuarios seleccionar y reproducir emisoras de radio mediante una aplicación web interactiva.

1. UNIVERSIDAD NACIONAL DEL
Callao
Facultad de Ingeniería eléctrica y electrónica
Profesor:
Moran Montoya Enrique Manuel
INTEGRANTES:
SIFUENTES FLORES YÚNIOR ANGEL.
CARRIÓN CÁRCAMO EDUARDO PAOLO.
LOAYZA RAMOS JUAN ROGELIO.
VERASTEGUI VARILLAS CESAR GALY
QUISPE VASQUEZ JUAN RODOLFO
DE LA CRUZ MAGUIÑA ANTHONY MANUEL.

2. Introducción
La radio streaming es una forma moderna de transmisión de audio que permite a
los oyentes acceder a contenido en tiempo real a través de Internet. A diferencia de
la radio tradicional, que se emite a través de frecuencias de radio específicas, la
radio streaming utiliza plataformas digitales para llegar a una audiencia global,
eliminando barreras geográficas y facilitando el acceso a una variedad de
programas y géneros musicales.

3. ¿Qué es la Radio Streaming?
La radio streaming es un método de transmisión de audio que permite a los oyentes
escuchar emisoras en tiempo real a través de Internet, en lugar de depender de
transmisiones por radiofrecuencia. Esta modalidad incluye tanto la transmisión en
vivo de programas como la reproducción de contenido pregrabado (podcasts,
programas especiales, etc.). Los usuarios pueden acceder a estas transmisiones a
través de aplicaciones, sitios web y dispositivos conectados, lo que les otorga una
flexibilidad sin precedentes.

4. Ventajas de la Radio Streaming
• Accesibilidad Global: Permite a los oyentes acceder a estaciones de radio de todo el
mundo, eliminando limitaciones geográficas. Esto es especialmente valioso para
comunidades de expatriados y para quienes buscan contenido en diferentes idiomas
• Variedad de Contenido: Los oyentes pueden elegir entre una amplia gama de
géneros, desde música, noticias, programas de conversación, hasta contenido
educativo. Esta diversidad satisface las necesidades de una audiencia variada.
• Interactividad: Muchas plataformas permiten a los oyentes participar en encuestas,
chats en vivo y redes sociales, creando una experiencia más inmersiva y conectada.
• Personalización y Curaduría: Los servicios de radio streaming a menudo utilizan
algoritmos para ofrecer recomendaciones personalizadas basadas en los gustos del
usuario, haciendo que la experiencia de escuchar sea más atractiva.

5. Tecnologías Utilizadas
• Python 3: Para la lógica principal de la aplicación.
Python es un lenguaje de programación de alto nivel, fácil de aprender y versátil. Se
caracteriza por su sintaxis clara y concisa, lo que lo hace ideal para principiantes y
expertos. Python es multipropósito y se utiliza en desarrollo web, análisis de datos,
inteligencia artificial, automatización de tareas, y más. Además, cuenta con una
amplia biblioteca estándar y una comunidad activa que facilita el acceso a recursos
y soporte.

6. Tecnologías Utilizadas
Flask: Un micro-framework para crear aplicaciones web con Python.
Flask es un microframework para Python que se utiliza para desarrollar aplicaciones web.
Es ligero y flexible, lo que permite a los desarrolladores crear aplicaciones de forma
rápida y sencilla.
Algunos aspectos clave de Flask:
• Minimalismo: Flask proporciona solo los componentes esenciales para construir
aplicaciones web, lo que permite a los desarrolladores elegir las bibliotecas y
herramientas que prefieren.
• Routing: Facilita la creación de rutas URL y la gestión de las peticiones HTTP de
manera intuitiva.
• Plantillas: Utiliza el motor de plantillas Jinja2, lo que permite separar la lógica de la
aplicación del diseño de las páginas web.

7. Tecnologías Utilizadas
VLC (python-vlc): Librería que permite manejar la reproducción de streams
multimedia desde Python usando VLC.
Es un módulo de Python que proporciona una interfaz para controlar el reproductor
multimedia VLC a través de scripts. Permite a los desarrolladores interactuar con VLC
para reproducir, pausar, detener, y manipular la reproducción de archivos de audio y
video.
Características clave:
• Reproducción de Medios: Puedes reproducir archivos locales, flujos de red y otros
formatos soportados por VLC.
• Controles de Reproducción: Ofrece funciones para pausar, detener, avanzar,
retroceder y cambiar el volumen.
• Interacción con la Interfaz: Permite interactuar con la interfaz gráfica de VLC o
usarlo en modo sin cabeza (sin interfaz gráfica).

8. Tecnologías Utilizadas
HTML + CSS: Para la interfaz de usuario que permite seleccionar y reproducir las
emisoras.
JavaScript (Fetch API): Para la comunicación entre el frontend (HTML) y el backend
(servidor Flask).
La Fetch API es una herramienta poderosa y flexible para manejar solicitudes HTTP en
JavaScript. Su uso de promesas simplifica el manejo de operaciones asíncronas, lo que
la convierte en una opción popular para desarrolladores que trabajan con aplicaciones
web modernas.
Nota:
HTTP (HyperText Transfer Protocol) es el protocolo fundamental para la comunicación
en la web. Se utiliza para transmitir información entre un cliente (como un navegador
web) y un servidor.

9. Estructura del Proyecto
Para la estructura del proyecto va estar compuesto de dos archivos principales:
• app.py: Es el archivo Python que contendrá la lógica del servidor Flask que permite crear
servidores web ligeros, el cual manejará las rutas que podrían estar diseñadas para
realizar diversas acciones como la acción de reproducir, pausar, detener o seleccionar
contenido multimedia mediante VLC .
• index.html: La plantilla HTML que se renderiza en el navegador para mostrar la interfaz
del usuario. Esto incluye lo que son los botones de ajuste del volumen, como también los
botones de iniciar, detener, pausar y reanudar la reproducción de las emisoras de radio.

10. CÓDIGO FUENTE
1. CÓDIGO APP.PY (SERVIDOR FLASK)
Este es el archivo Python que ejecuta el servidor Flask y se comunica con VLC para manejar la reproducción de
las emisoras de radio.
Codigo:
from flask import Flask, render_template, jsonify, request
import vlc
app = Flask(__name__)
# Instancia de VLC para manejar la reproducción
vlc_instance = vlc.Instance()
player = vlc_instance.media_player_new()

11. # Lista de emisoras nacionales e internacionales
stations = {
'nacionales': [
{'Radio Moda': {'nombre': 'Radio Nacional 1', 'url':
'https://24973.live.streamtheworld.com/CRP_MOD_SC?csegid=20001&dist=20001&ttag=20001'}},
{'Radio Nueva Q': {'nombre': 'Radio Nacional 2', 'url':
'https://18253.live.streamtheworld.com/CRP_NQ_SC?csegid=20001&dist=20001&ttag=20001'}},
{'Radio Ritmo Romantica': {'nombre': 'Radio Nacional 3', 'url':
'https://13743.live.streamtheworld.com/CRP_RIT_SC?csegid=20001&dist=20001&ttag=20001'}},
{'Radiomar': {'nombre': 'Radio Nacional 4', 'url':
'https://19473.live.streamtheworld.com/CRP_MAR_SC?csegid=20001&dist=20001&ttag=2000'}},
{'Radio Magica': {'nombre': 'Radio Nacional 5', 'url': 'http://stream5.example.com/nacional5'}}

12. ],
'internacionales': [
{'Istanbul FM': {'nombre': 'Radio Internacional 1', 'url':
'https://yayin.istanbulfm.com.tr/istanbulfm'}},
{'Los 40 Principales': {'nombre': 'Radio Internacional 2', 'url':
'https://14843.live.streamtheworld.com/LOS40_MEXICO_SC'}},
{'Radio 10': {'nombre': 'Radio Internacional 3', 'url':
'https://edge06.radiohdvivo.com/stream/radio10'}},
{'Classical FM Radio': {'nombre': 'Radio Internacional 4', 'url':
'https://cheetah.streemlion.com:2465/stream'}},
{'Rádio MFM Angola': {'nombre': 'Radio Internacional 5', 'url':
'https://centova87.instainternet.com/proxy/mfm?mp=/stream'}}
]

13. @app.route('/')
def index():
"""Renderiza la página principal con la lista de emisoras"""
return render_template('index.html', stations=stations)
@app.route('/play')
def play_station():
"""Inicia la reproducción del stream de radio usando VLC"""
# Obtener la URL de la emisora desde los parámetros de consulta
station_url = request.args.get('station_url')
if station_url:
# Mensaje de depuración para verificar si llega la URL
print(f"Reproduciendo: {station_url}")
# Crear un medio nuevo con la URL
media = vlc_instance.media_new(station_url)
player.set_media(media)
player.play()

14. return jsonify({'status': 'Reproduciendo', 'url': station_url})
else:
return jsonify({'status': 'Error', 'message': 'No se proporcionó la URL de la estación'})
@app.route('/stop')
def stop_station():
"""Detiene la reproducción actual"""
player.stop()
return jsonify({'status': 'Detenido'})
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0', port=5000)

15. Explicación del código app.py:
I. Instanciación de Flask y VLC:
Se crea una instancia de Flask (app = Flask(__name__)) para manejar el servidor web.
Se utiliza vlc.Instance() para crear una instancia de VLC y controlar la reproducción mediante el objeto
player.
II. Lista de emisoras:
stations: Diccionario que contiene emisoras nacionales e internacionales. Cada emisora tiene un
nombre y una URL correspondiente para el streaming.
III. Ruta @app.route('/'):
Esta ruta maneja la página principal (/) y utiliza render_template('index.html', stations=stations) para
renderizar la plantilla HTML (index.html) y pasarle la lista de emisoras.
IV. Ruta @app.route('/play'):
Esta ruta recibe la URL de la emisora seleccionada como un parámetro de consulta (station_url) y
utiliza VLC para reproducir el stream. Si la URL se recibe correctamente, VLC inicia la reproducción.
V. Ruta @app.route('/stop’):
Esta ruta detiene la reproducción del stream actual cuando el usuario hace clic en el botón "Detener".

16. HTML

17. MERG 17
Conceptos
• World Wide Web (WWW): es un sistema de información, el sistema
de información propio de Internet.
Características:
• Información por hipertexto: Diversos elementos (texto o imágenes)
• Gráfico
• Global
• Navegador: el programa que nos ofrece acceso a Internet, ejm Internet
Explorer, Mozilla, Netscape
• Servidor: Se encarga de proporcionar al navegador los documentos y
medios que éste solicita
• HTTP: protocolo de transferencia de hipertexto

18. MERG 18
HTML (HyperText Markup Languaje)
• El lenguaje de marcado HTML se definió teniendo en cuenta
algunas de las características que existían en ese momento para
la publicación digital de contenidos. Entre los conceptos
utilizados en su creación, se encuentra el mecanismo de
"hipertexto".
• Las letras "HT" de la sigla HTML significan "hipertexto"
(hypertext en inglés), por lo que el significado completo de
HTML podría traducirse como:
• "lenguaje de marcado para hipertexto".

19. MERG 19
• HTML y XHTML
• El lenguaje XHTML es muy
similar al lenguaje HTML. De
hecho, XHTML no es más que
una adaptación de HTML al
lenguaje XML. Técnicamente,
HTML es descendiente directo del
lenguaje SGML, mientras que
XHTML lo es del XML (que a su
vez, también es descendiente de
SGML).

20. MERG 20
ANALISIS DEL
CODIGO.

21. MERG 21
1. Estructura básica del documento HTML
•El documento comienza con la declaración <!DOCTYPE
html>, que especifica que el archivo es HTML5.
•El atributo lang="es" dentro de la etiqueta <html> indica que
el contenido de la página está en español.
•Dentro de <head>, se definen algunos elementos clave:
•<meta charset="UTF-8"> asegura que los caracteres especiales
sean interpretados correctamente.
•<meta name="viewport" content="width=device-width, initial-
scale=1.0"> establece que la página sea responsive (adaptada a
dispositivos móviles).
•<title>Emisoras de Radio</title> define el título de la página.

22. Elemento de audio HTML
MERG 22
El elemento <audio> en la página es el
reproductor de música. Incluye:
•Un <source> que apunta a la URL del stream de
la emisora, el cual se actualiza dinámicamente
cuando se selecciona una emisora.
•El atributo controls permite al usuario pausar,
reproducir y ajustar el volumen.

23. Conclusión.
El proyecto se basa principalmente en el uso de: el servidor Flask, las rutas, el VLC y la
página HTML. Cada uno con una función específica; el primero, plasma el proyecto en la
página HTML por medio del JavaScript; las rutas URL, poseen las señales de radio; VLC,
maneja la reproducción de multimedia; y el HTML y CSS, reproducción de las emisoras.
El código app.py se inicia creando el Flask (app = Flask(__name__)), luego se usa
vlc.Instance(), en seguida la función stations, para las emisoras nacionales e
internacionales, después utilizamos la función @app.route (“/”, “/play” y “stop”).
Por último, se concluye con la programación de la interfaz de usuario en HTML, para
seleccionar y reproducir las emisoras de radio; CSS, para el diseño; y JavaScript (Fecth
API), intermediario entre app.py y el navegador.