前面没有播放音频:无法加载资源:net::ERR_UNKNOWN_URL_SCHEME
Audio not playing on the front: Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME
我在前端播放音频时遇到问题。只有在部署到 prod 时才会出现此问题。在本地启动时,会播放音频。当我在生产中启动它时,当我播放音频(通过 a 标签)时,我收到以下消息:加载资源失败:net::ERR_UNKNOWN_URL_SCHEME.
能否请您告诉我应该怎么看,在哪里寻找解决方案?我已经用谷歌搜索了所有内容和零信息。我将不胜感激。谢谢。
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")
前端,工作版本(本地):
<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>
产品(另一台计算机)上的前端、非工作版本:
<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,以下是您可以尝试的一些选项:
一个:
根据 net-informations,当默认的 http 或 https 不是 <a href="url"></a>
的类型时,会导致错误 Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME
。他们建议添加 target="_blank"
来避免这个问题。我个人觉得这也可能是 api 本身的设计方式。为此,请查看选项三。
两个:
使用 jinja 模板而不是 html。您可以将普通 html 更改为 jinja 以查看其是否按预期运行。
发件人:
@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>
收件人:
@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>
三个:
你现在的api设计如下,https://api.domain.com/get-wav?path=/full_path/file.wav
。这种设计会使路径易受攻击并暴露以供检索。因此,我建议您尝试使用 Flask 提供的上传文件夹选项并相应地实施它。
一个基于 flask 文档的简单示例:
您首先需要设置上传文件夹
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_FOLDER
现在,当你想得到一个wav文件时,然后执行以下操作:
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)
最后,您将不得不使用 jinja 获取 api 作为文件并按如下方式获取它:
<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>
一些参考资料:
我在前端播放音频时遇到问题。只有在部署到 prod 时才会出现此问题。在本地启动时,会播放音频。当我在生产中启动它时,当我播放音频(通过 a 标签)时,我收到以下消息:加载资源失败:net::ERR_UNKNOWN_URL_SCHEME.
能否请您告诉我应该怎么看,在哪里寻找解决方案?我已经用谷歌搜索了所有内容和零信息。我将不胜感激。谢谢。
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")
前端,工作版本(本地):
<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>
产品(另一台计算机)上的前端、非工作版本:
<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,以下是您可以尝试的一些选项:
一个:
根据 net-informations,当默认的 http 或 https 不是 <a href="url"></a>
的类型时,会导致错误 Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME
。他们建议添加 target="_blank"
来避免这个问题。我个人觉得这也可能是 api 本身的设计方式。为此,请查看选项三。
两个:
使用 jinja 模板而不是 html。您可以将普通 html 更改为 jinja 以查看其是否按预期运行。
发件人:
@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>
收件人:
@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>
三个:
你现在的api设计如下,https://api.domain.com/get-wav?path=/full_path/file.wav
。这种设计会使路径易受攻击并暴露以供检索。因此,我建议您尝试使用 Flask 提供的上传文件夹选项并相应地实施它。
一个基于 flask 文档的简单示例:
您首先需要设置上传文件夹
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_FOLDER
现在,当你想得到一个wav文件时,然后执行以下操作:
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)
最后,您将不得不使用 jinja 获取 api 作为文件并按如下方式获取它:
<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>
一些参考资料: