Play Audio Local File with HTML

Using local file as audio src

I can think of two ways.

Within your audio tag:

src="file:///C:/.../file.mp3"

or you could use a Blob using the file API.

HTML:

<input type="file"></input>

JS:

audio.src = URL.createObjectURL(document.getElementsByTagName('input')[0].files[0]);

Play audio local file with html

You set the src attr directly on the audio element. fiddle

var $audio = $('#myAudio');$('input').on('change', function(e) {  var target = e.currentTarget;  var file = target.files[0];  var reader = new FileReader();    console.log($audio[0]);   if (target.files && file) {        var reader = new FileReader();        reader.onload = function (e) {            $audio.attr('src', e.target.result);            $audio.play();        }        reader.readAsDataURL(file);    }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input type="file"><audio controls id="myAudio" autoplay></audio>

HTML Audio() How to load local file?

You need to load it via a server like Apache or IIS. Try Wampserver

It has to be a URL over http:// and not file://

How to use a short local file reference in html

To play a specific file, then you need a specific unique reference to that file! If you are interested in playing multiple files, or controlling a playlist, then you might be interested in a sample like this https://www.codeproject.com/Articles/5164334/Create-Music-Playlist-with-HTML5-and-JavaScript?msclkid=029eb55ec0f911eca54f7b314e3fd12c
If you copy your audio file into the same folder as your html file, then you can reference that file by it's name only, and not include the full file path, if you rename that file to audio.mp3 then it would match the example.

That audio.mp3 reference is a route reference to the hosted site, it may not represent a specific file, it might be a registered route that the server is programmed to resolve the actual file to play. So if you wanted many files to be served through a common route you would need some code that handles that route and knows how to select the actual file that you want to serve.

To reference your file then we expect to see html like this:

<audio src="file:///media/removable/USB%20Drive/Music/mp.3/sub_urban_cradles_official_music_video_4etlBXMByoK-gucZnSJ_.mp3" id="myAudio" />

In the specific case of https://programminghead.com/how-to-play-audio-in-html-using-javascript the example html that does not include the full path to the audio file does not actually work, the working script actually references this full path:

<audio src="https://programminghead.com/audio/audio.mp3" id="myAudio"></audio>

Notice that this is in fact a Fully Qualified URL. If the file was hosted at the route of the site then it would be possible to use a relative link like

 <audio src="audio.mp3" id="myAudio"></audio>

But that would be translated by the browser into

https://programminghead.com/audio.mp3

See how the browser has injected the current folder URL to the page as the prefix for the audio.mp3. That is the assumed behaviour when the link is not fully defined. But there is no file at that location to play.

Be careful when interpreting online code examples that are executable, especially if they reference external files. They are often simplified or contain modifications or artifcats that allow the code to run within the page that you are viewing them.

Understand first that file references and how they are resolved is common to all types of files and links in html, the <audio src=""/> behaves the same way as <img src=""/> or even <a href=""></a> in terms of how the browser resolves the actual file reference.

How i can play audio in html?

This is not from your code. The problem appear because you don't set the correct permissions for the file, this is why you get a 403 error and you can't play audio files on your page.

(I know my answer is a little bit blur, hope someone else could help you better ...)

HTML5 Audio to play a playlist of local mp3 files

createObjectURL instead of new FileReader()

var songs = document.getElementById("songs"),    myAudio = document.getElementById("myAudio");function next(n){  var url = URL.createObjectURL(files[n]);  myAudio.setAttribute('src', url);  myAudio.play();}var _next = 0,    files,    len;songs.addEventListener('change', function() {  files = songs.files;  len = files.length;  if(len){    next(_next);  }});myAudio.addEventListener("ended", function(){   _next += 1;   next(_next);   console.log(len, _next);   if((len-1)==_next){     _next=-1;   }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input type="file" id="songs" multiple><audio controls id="myAudio" autoplay></audio>

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

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