How to use JavaSript with Flask to play mp3?-CodePudding

I'm trying to play an mp3 file from JavaScript in a Flask framework.

Inside of the js file, I have:

    let audio = new Audio('bell.mp3');
    audio.play();

I'm getting a 404 error so it can't find the mp3 file.

My project folders look like this:

main.py
templates
    home.html
Static
    Scripts
        script.js
        bell.mp3

I also tried to put the bell.mp3 file in templates and in the root folder, but it still can't find it. How do I access it through javascript with the flask framework? I just found out I have to put js and css into a Static folder for flask and I still don't really know why so I'm wondering if I have to do something else weird like that.

CodePudding user response：

You don't need Flask or JS to play mp3, it's built in browser. You can use HTML to serve a player for your audio https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

<audio src="{{ url_for('static', filename='Scripts/bell.mp3') }}" autoplay>
  <a href="{{ url_for('static', filename='Scripts/bell.mp3') }}">Download OGG audio</a>.
</audio>

CodePudding user response：

Try to paste this code in your html file (music with autoplay):

<audio src="../Static/Scripts/bell.mp3" autoplay>

Music without autoplay:

<audio src="../Static/Scripts/bell.mp3">