How to use a short local file reference in html-CodePudding

I can't make a specific file like: file:///media/removable/USB Drive/Music/mp.3/sub_urban_cradles_official_music_video_4etlBXMByoK-gucZnSJ_.mp3. into a simple universal file like simple.mp3. I want to be able to add my mp3s to the following code but can't because it's too specific:

<html>
 <body>
   <audio src="audio.mp3" id="myAudio"></audio>
   <button id="myBtn">Play Audio</button>
   <script>  document.getElementById("myBtn").addEventListener("click",function(){
       document.getElementById("myAudio").play();
     }
     );
   </script>
 </body>
</html>

<!-- for some reason, it doesn't work here but the code is on:https://programminghead.com/how-to-play-audio-in-html-using-javascript/ -->

like how does: <audio src="audio.mp3" id="myAudio"></audio> work? If I put audio.mp3 in a search engine it goes to a webpage and not the audio. but when I click the play button it plays audio. how? I would like to be able to make a link like that so my mp3s will work in place of audio.mp3.

CodePudding user response：

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 Drive/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.