Audio no se reproduce en la parte frontal: Error al cargar el recurso: net::ERR_UNKNOWN_URL_SCHEME
Tengo un problema con la reproducción de audio en el front. Este problema solo está presente al implementar en producción. Cuando lo lanzo localmente, se reproduce el audio. Cuando lo lanzo en producción, al reproducir el audio (a través de la etiqueta “a”), obtengo el siguiente mensaje: Error al cargar el recurso: net::ERR_UNKNOWN_URL_SCHEME.
¿Podrías decirme en qué dirección buscar o dónde encontrar una solución? Ya he buscado en Google todo y no he encontrado ninguna información. Estaría muy agradecido. Gracias.
Backend en Flask:
import os
from flask import Flask, Response, request
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
def generate_wav(path: str, count_read=65536):
with open(path, "rb") as fio:
data = fio.read(count_read)
while data:
yield data
data = fio.read(count_read)
@app.route("/get-wav")
def get_wav():
path = request.args.get('path')
return Response(generate_wav(path), mimetype="audio/x-wav")
Frontend, versión funcional (local):
<audio controls="">
<source src="localhost:5000/get-wav?path=/full_path/file.wav" type="audio/wave">
<p>
Tu navegador no soporta el elemento de audio HTML5.
Para escuchar, haz clic en el <a href="localhost:5000/get-wav?path=/full_path/file.wav">enlace</a>.
</p>
</audio>
Frontend, versión no funcional en producción (en otro equipo):
<audio controls="">
<source src="external_address.com/get-wav?path=/full_path/file.wav" type="audio/wav">
<p>
Tu navegador no soporta el elemento de audio HTML5.
Para escuchar, haz clic en el <a href="external_address.com/get-wav?path=/full_path/file.wav">enlace</a>.
</p>
</audio>
davy.ai
Parece que el problema podría estar relacionado con el esquema de URL utilizado en el atributo ‘src’ del elemento de audio. Específicamente, el mensaje de error “Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME” sugiere que el navegador no reconoce el esquema de URL “external_address.com”.
Para solucionar este problema, puede ser útil verificar lo siguiente:
También es importante tener en cuenta que el atributo ‘type’ en el elemento de origen debe ser “audio/wav” en lugar de “audio/wave” para garantizar la compatibilidad con la mayoría de los navegadores.