0

So I'm trying to run a python flask app which should render a html template which will record audio and send it to my flask server. I'm new to p5.js and I'm not able to run/get audio input on my web page. I've tried several solution mentioned in SO and youtube tuts but couldn't get it to work.

This is my file structure and scripts:

---> files
     ---> sketch.js
---> templates
     ---> index.html
---> app.py

index.html :-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jarvis</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
</head>
<body>
    Hello, This is home page!

    <script type="text/javascript" src="../files/sketch.js"></script>
</body>
</html>

sketch.js :-

var mic;

function setup(){
    mic = new p5.AudioIn();
    mic.start();
}

function draw() {

}

app.py :-

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
    return render_template('index.html')

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

It's a simple example and I can't get it work. When I run python app.py everything works with no errors but the browser does not ask for mic permission, nothing happens.

I'm on Windows 10 and using Firefox browser. (Tried on Google Chrome too, same problem!)

If anyone could help me or guide me, it would be really appreciated!

dev1ce
  • 1,419
  • 1
  • 19
  • 39

2 Answers2

0

You are trying to use Flask just to serve some static files. Check this other question to understand how to do what you're trying to do: How to serve static files in Flask

alessandro308
  • 1,912
  • 2
  • 15
  • 27
  • Hi, thanks for answering, this was just a bare minimum example to exactly explain what I'm trying to do, this will be a big project later, for right now I just want to access the mic when I run `python app.py` and in later part I will have to send the audio to this flask server... – dev1ce Jun 30 '21 at 08:24
0

I also had the same problem but I got it solved by following this tutorial.

Giving a link is bad so let me explain. You are supposed to save the p5.js sketch in a static folder and HTML in a templates folder. You basically just run the javascript files using url_for in the HTML. In the python file add a route to render HTML and a route to make the js file in the static folder work. It should work after the steps.

JoraSN
  • 332
  • 2
  • 14