0

Boa tarde!

Estou tentando realizar uma tarefa aparentemente simples, que é rodar um player de áudio em uma pagina Html utilizando um app feito em Flask, porém não consigo fazer com que o player carregue o áudio.

APP PYTHON:

# -*- coding: utf-8 -*-
#/usr/bin/python3

import os, sys

from flask import Flask, render_template


app = Flask(__name__, template_folder=os.path.abspath("templates"))
path_music = os.getenv("HOME") + "/project/musics/"


@app.route("/", methods=["GET"])
def index():
    return render_template("index.html", music=path_music+"music.mp3")
    

if __name__ == "__main__":
    app.run(debug=True, port=8080)

ARQUIVO HTML:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <title>Sound Music</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body>
    
    <audio controls preload="metadata" id="tagAudio" style="width: 99%">
        <source src="{{music}}" type="audio/mpeg">
        Your browser does not support the audio tag.
    </audio>
    
    <!--
    <audio controls preload="metadata" id="tagAudio" style="width: 99%">
        <source src="/home/michael/project/musics/music.mp3" type="audio/mpeg">
        Your browser does not support the audio tag.
    </audio>
    -->
    
</body>

</html>

RETORNO NO NAVEGADOR: inserir a descrição da imagem aqui

Fiz alguns testes rodando o arquivo index.html direto pelo Firefox retirando a sintaxe utilizada pelo Flask e o áudio é carregado.

RODANDO ARQUIVO PELO FIREFOX inserir a descrição da imagem aqui

Alguém já teve este problema pode me dar uma força ?

Desde já agradeço!

1 Resposta 1

0

Observe que o que vai na sua variável {{music}} no template é criada apontando para o caminho em disco do arquivo mp3. Isso é criado como uma string (texto) e é esse texto que é colocado no HTML.

Quando você está servindo um projeto de um framework em Python, seja o Flask, ou outro, o caminho dos arquivos estáticos não é igual o caminho em disco - o que tem que ser feito é que em alguma configuração do projeto você tem que dizer qual é o diretório que tem seus arquivos estáticos - e alguma configuração para o framework pegar os arquivos de lá.

Com as configurações no lugar, você passa para o template só o nome do arquivo de áudio, e no template, chama a função embutida url_for desse jeito:

# Arquivo em Python
...

@app.route("/", methods=["GET"])
def index():
    return render_template("index.html", music="music.mp3")
...

# Template HTML para o flask:
    
    <audio controls preload="metadata" id="tagAudio" style="width: 99%">
        <source src="{{ url_for('static', filename=music) }}" type="audio/mpeg">
        Your browser does not support the audio tag.
    </audio>

(lembre-se, dentro das {{ }} nos templates, o que vale é a linguagem do Jinja2, que lembra um pouco Python - então, ali dentro "music" é a variável que foi passada para o template, e o texto final que vai ficar na tag "src=" do html que o browser vai enxergar é o retorno da função url_for)

Com isso, o Flask vai montar a url correta para pegar os arquivos da pasta que estiver configurada para servir arquivos estáticos. Por padrão, se você não configurou, é a pasta static (no caso, dado o nome que você colocou no exemplo, provavelmente project/static - (e você pode colocar uma pasta "/musics" lá dentro).

Para mudar a pasta de onde o url_for puxa arquivos estáticos, na hora de criar o objeto Flask, você pode passar a opção static_folder= como em:

app = Flask(__name__,
            template_folder=os.path.abspath("templates"),
             static_folder='music',
)

Mas como para o projeto completo você vai precisar também de arquivos CSS, Javascript, etc... o melhor pode ser deixar essa pasta como "static" mesmo, criar um "project/static/musics", e dentro código Python, saber que até o project/static a função url_for gera pra você automaticamente, e você constrói o caminho a partir dali:

path_music = "musics/"

@app.route("/", methods=["GET"])
def index():
    return render_template("index.html", music=path_music+"music.mp3")
3
  • Valeu cara! Você me salvou pela segunda vez! 25/01/2021 às 0:24
  • Tenho um outro POST que com sua ajuda eu consegui resolver meu problema, só precisava finalizar ele, acredito que eu não tenha permissão para fazer tal operação, segue o link: pt.stackoverflow.com/questions/466193/… 25/01/2021 às 0:26
  • Se a resposta resolveu seu problema, é só marcar a resposta como aceita - não tem mais "finalizar". No caso do outro post, você pegou as dicas que deixei, e descreveu o que funcionou e marcou como aceito - não é o mais comum, mas é perfeitamente válido.
    – jsbueno
    25/01/2021 às 3:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .