CODEWITHSUNDEEP
pythonflaskhtml5-audio
Danil
Danil

Reputation: 31

Audio not playing on the front: Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME

I am having a problem with audio playback at the front. This problem is only present when deploying to prod. When launched locally, audio is played. When I launch it on production, when I play audio (via the a tag), I get the following message: Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME.

Can you please tell me which way to look, where to look for a solution? I've already googled everything and zero information. I would be extremely grateful. Thank you.

Backend on 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, working version (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, non-working version on prod (another computer):

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

Upvotes: 2

Views: 558

Answers (1)

coldy
coldy

Reputation: 2195

@Danil, the below are some of the options which you can try:

One:

According to net-informations the error Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME is caused when the default http or https are not the types to <a href="url"></a>. They suggest adding target="_blank" to avoid the issue. I personally feel it could be also the way the api itself is designed. For that, please look to option three.

Two:

Using jinja template instead of html. You can change the plain html into jinja to see if that functions as expected.

From:

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

To:

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

Three:

Your current api is designed as follows, https://api.domain.com/get-wav?path=/full_path/file.wav. This design would make the path vulnerable and exposed to be retrieved. Hence, I would propose you try the uploads folder option provided from flask and implement it accordingly.

A simple example based on flask documentation:

You will first need to set the uploads folder

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

Now, when you want to get a wav file, then do the following:

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)

Finally, you will have to use jinja to source the api as file and obtain it as follows:

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

Some References:

  1. Handling File uploads
  2. Flask file uploads
  3. jinja2

Upvotes: 1

Related Questions