How to play a mp3 file in html from a static folder?

Question

I am trying to convert text to audio using python.I saved the converted audio file in static folder.I tried to play the audio file using the below html code.

{%extends "main.html" %}
{% block file %}
     <p>{{data}}</p>
     <audio id="myAudio">

        <source src="C:\Users\kousik\Desktop\static\uploads\welcome.mp3" type="audio/mpeg">
        Your browser does not support the audio tag.
     </audio>
     <button onclick="playAudio()" type="button">Play Audio</button>
     <script type="text/javascript">
        var x = document.getElementById("myAudio"); 

function playAudio() { 
  x.play(); 
} 
     </script>
{% endblock %}

I am trying to play but i am getting error

Not allowed to load local resource: file:///C:/Users/kousik/Desktop/static/uploads/welcome.mp3

Answer 1

at first put you'r mp3 file into the project folder

also try using it more flexible so everyone can access when it's on live server for example

also change this "\" to "/"

ex:consider you'r file location is this

myproject->myfiles->welcome.mp3

what you should do is

         <source src="/myfiles/welcome.mp3" 
         type="audio/mpeg">

so when you put you'r project in any localhost,production it will work