Tengo un problema con la reproducción de audio en la parte delantera. Este problema solo está presente cuando se implementa en prod. Cuando se inicia localmente, se reproduce el audio. Cuando lo lanzo en producción, cuando reproduzco audio (a través de la etiqueta a), recibo el siguiente mensaje: No se pudo cargar el recurso: net::ERR_UNKNOWN_URL_SCHEME .
¿Puede por favor decirme en qué dirección mirar, dónde buscar una solución? Ya he googleado todo y cero información. Estaría extremadamente agradecido. Gracias.
Backend en matraz:
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 de trabajo (local):
<audio controls> <source src="localhost:5000/get-wav?path=/full_path/file.wav" type="audio/wave"> <p> Your browser does not support HTML5 <code>audio</code>. To listen, click on <a href="localhost:5000/get-wav?path=/full_path/file.wav">link</a> </p> </audio>Frontend, versión que no funciona en prod (otra computadora):
<audio controls> <source src="external_address.com/get-wav?path=/full_path/file.wav" type="audio/wav"> <p> Your browser does not support HTML5 <code>audio</code>. To listen, click on <a href="external_address.com/get-wav?path=/full_path/file.wav">link</a> </p> </audio>@Danil, las siguientes son algunas de las opciones que puede probar:
De acuerdo con la información de la red, el error Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME se produce cuando el http o https predeterminados no son los tipos para <a href="url"></a> . Sugieren agregar target="_blank" para evitar el problema. Personalmente, creo que también podría ser la forma en que está diseñada la propia API. Para eso, mira la opción tres.
Usando la plantilla jinja en lugar de html. Puede cambiar el html simple a jinja para ver si funciona como se esperaba.
Desde:
@app.route("/get-wav") def get_wav(): path = request.args.get('path') return Response(generate_wav(path), mimetype="audio/x-wav") <audio controls> <source src="localhost:5000/get-wav?path=/full_path/file.wav" type="audio/wave"> <p> Your browser does not support HTML5 <code>audio</code>. To listen, click on <a href="localhost:5000/get-wav?path=/full_path/file.wav">link</a> </p> </audio>Para:
@app.route("/get-wav/<string:name>") def get_wav(): path = os.path.join("your/absolute/base_dir", name) return Response(generate_wav(path), mimetype="audio/x-wav") <audio controls> <source src="{{ url_for("get_wav", name=file.wav) }}" type="audio/wav"> <p> Your browser does not support HTML5 <code>audio</code>. To listen, click on <a href="{{ url_for("get_wav", name=file.wav) }}">link</a> </p> </audio> Su api actual está diseñada de la siguiente manera, https://api.domain.com/get-wav?path=/full_path/file.wav . Este diseño haría que el camino fuera vulnerable y expuesto para ser recuperado. Por lo tanto, le sugiero que pruebe la opción de carpeta de carga proporcionada por el matraz y la implemente en consecuencia.
Un ejemplo simple basado en la documentación del matraz :
Primero deberá configurar la carpeta de carga
import os from flask import Flask, flash, request, redirect, url_for from werkzeug.utils import secure_filename UPLOAD_FOLDER = '/path/to/the/uploads' # This is the top level folder name of your wav files ALLOWED_EXTENSIONS = {'wav', 'mp3'} # Supported extensions app = Flask(__name__) app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDERAhora, cuando desee obtener un archivo wav, haga lo siguiente:
from flask import send_from_directory @app.route('/uploads/<name>') def get_wav(name): # Here, you can use the name to perform some operations, such as generate_wav. But, if you are not generating the wav you could also return an already generated one here using send_from_directory. return send_from_directory(app.config["UPLOAD_FOLDER"], name)Finalmente, deberá usar jinja para obtener la API como archivo y obtenerla de la siguiente manera:
<audio controls> <source src="{{ url_for("get_wav", name=file.wav) }}" type="audio/wav"> <p> Your browser does not support HTML5 <code>audio</code>. To listen, click on <a href="{{ url_for("get_wav", name=file.wav) }}">link</a> </p> </audio>Algunas referencias: