前面没有播放音频：加载资源失败：net::ERR_UNKNOWN_URL_SCHEME

Posted 2023-03-24

【中文标题】前面没有播放音频：加载资源失败：net::ERR_UNKNOWN_URL_SCHEME

【英文标题】：Audio not playing on the front: Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME

【发布时间】：2022-01-19 16:14:50

【问题描述】：

我在前面播放音频时遇到问题。此问题仅在部署到 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>

prod（另一台计算机）上的前端非工作版本：

<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>

【问题讨论】：

你有没有抛出任何错误？在浏览器控制台或 api 日志中？另外，本地的 type="audio/wav" 的前端代码是错误的吗？

什么是真正的“external_address.com”？混淆使事情更难理解，因此也更难回复。

@coldy 错误仅在浏览器控制台中引发 - net::ERR_UNKNOWN_URL_SCHEME。不幸的是，这一切都是错误的。 type="audio/wav"（或 type="audio/wave"，相同）的前端代码在本地运行时有效。同时，如果您通过谷歌浏览器从源标签 () 获取链接并将其粘贴到新标签中 - 音频可以正常工作。

@patrick-mevzek "external_address.com" 只是带有端口（例如，172.16.1.1:5678）或远程域名（external_address.com）的远程 IP 地址。

然后放一个真实的网址，以http://或https://开头

【参考方案1】：

@Danil，以下是您可以尝试的一些选项：

一个：

根据net-informations，错误Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME是当默认http或https不是<a href="url"></a>的类型时引起的。他们建议添加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> 

一些参考资料：

Handling File uploads Flask file uploads jinja2

【讨论】：

感谢您的回答。在此处发布问题之前，我尝试了 1。它没有帮助。对于2，我已经简化了代码，使它有这个问题并且易于阅读。第三点解决了我的问题。使用 send_from_directory 函数，一切正常。太好了，谢谢！

如果答案有帮助，请考虑接受它作为问题。谢谢