I'm watching a Youtube video to learn HTML and CSS.
https://www.youtube.com/watch?v=cyuzt1Dp8X8&t=5566s
I downloaded an mp3 file to my computer, but when I run my code, the audio file doesn't play. In my HTML code, I used the name of the audio file rather than the path. I know the name of the mp3 file is correct. However, by using the path rather than the file name, I have been able to play the audio in my browser. Again, the first code will NOT play the audio file, but the second code will play the audio file.
<audio controls>
<source src="CouldItBeKP.mp3" />
</audio>
<audio controls>
<source src="C:\Users\james\Downloads\CouldItBeKP.mp3" />
</audio>
Also, the author of the Youtube video believes the location of the audio file matters. For example, the audio file won't play if I move the mp3 file from Desktop to Downloads or vice versa. The code is below.
<audio controls>
<source src="CouldItBeKP.mp3" />
</audio>
Please help! Thanks.
When you do not specify the full path, most browsers will assume that the file is in the same folder. So if your code was in ~\Documents, but the audio was in ~\Downloads, it would not play. If they were both in ~\Documents, it would play.
You need the path to be correct, without the path it greys out. Put it in your main directory and try ./CouldItBeKP.mp3
it seems like your audio files are on the downloads folder, but I'm not sure where your code is.
I would suggest you move your audio files and your codes to the same directory.
For example, if my HTML file is in
C:\Users\james\project
My music files also should be also in C:\Users\james\project or somewhere near this folder. Eg: C:\Users\james\project\music
Now, let's assume, my music files are inside C:\Users\james\project\music while my HTML file is in C:\Users\james\project
So, my code for playing the music would be like this.
<audio controls>
<source src="music/CouldItBeKP.mp3" />
</audio>
Or
<audio controls>
<source src="./music/CouldItBeKP.mp3" />
</audio>
./ means to start from the current folder. In our case, which is C:\Users\james\project
Then your second code will also play the audio.
Related
The audio player shows up but the audio won't play.
The audio file is in the same folder as the HTML file...
<audio controls>
<source src="audioFileName.ogg" type="audio/ogg">
Audio element not supported by your browser.
</audio>
What's wrong with the code?
I've tried mp3 as well with no luck.
I've also tried it with an mp3 audio file (same folder as well) and the code works, so most likely the problem is with the audio file itself. Maybe your navigator doesn't support it, or the name of the file is slightly wrong.
I am trying to play a song from my Desktop. This is what I have so far...
<audio src="Desktop/Moves.mp3" controls>
<p>Fallback content goes here.</p>
</audio>
I feel like something is wrong with the src but I am not sure what else to put.
First of all, the desktop is not a good place to put ANY file that you want to use in a website. Better put it in a subdirectory of the directory where your webpage is situated. So if your HTML page is in a folder named website, put the audio file in a folder inside that website folder, for example audio.
Second, it depends on the browser which audio file types it can handle. It's good to provide at least two formats, mp3 and ogg. Those two cover pretty much all browsers. Audacity can convert mp3 to ogg - it's free, you can find it via the search engine of your choice.
If you have those two files (i.e. the same piece of music, but two different filetypes), the code would for example look like this:
<audio controls>
<source src="audio/Moves.ogg" type="audio/ogg">
<source src="audio/Moves.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
try this:
<audio loop="loop" autoplay="autoplay">
<source src="Desktop/Moves.mp3" type="audio/mpeg" />
</audio>
I am a newbe in HTML and I want to embed an audio player which plays an mp3 file from a link from dropbox. I took a sample code from here however, is doesn't work. It opens a player but doesn't play. This is the relevant part of the code:
<audio controls>
<source src="https://www.dropbox.com/s/8besx3yh043u4qn/TestFile.mp3?dl=0" type="audio/mpeg">
</audio>
You point to the wrong source. This link actually points to a html file whose name is rewritten by the web server software. (If I follow this link, a file that starts with <!DOCTYPE html> is opened, that is an indicator that this file is an HTML-website)
If you do a right-click on the player and select to examine the element you'll find the real link to this file under the preview-auto_container element.
So the audio element of your file needs to look like:
<audio>
<source src="https://dl.dropboxusercontent.com/content_link/KRfRP3OWPuNXyfpYKUjCQOUzNIoE6o66TvxCHu6xKh5fErZ22kJHCOCvJ0TeCccu/file?dl=0&duc_id=dropbox_duc_id" type="audio/mpeg">
</audio>
I'm trying to play a MP4 video using video tag, but nothing is displayed. When I have my video in the same project directory the video plays, but I need to have the video in another directory. This is my code:
<div id= "show">
<video width="320" height="240" src="file:///F:/test.mp4" type="video/mp4" controls>
</video>
</div>
The problem is the path, so, what is the correct way to declare file's path?
Go to the mp4 when it's in the other directory and right click on the properties. copy the file path and then paste it in (and precede it by file://). make sure you turn the slashes to turn forward in the file path.
it should look something like this
file:///F:/Users/yourname/folder/subfolder/test.mp4
I want to insert an audio file in my web page. I have the .mp3, but not the .ogg, so my audio won't play. What can I do to insert that file?
I have the following code:
<audio controls autoplay>
<source src="Viva-la-vida.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Please correct me if I said something wrong. Thank you in advance!
The code you mentioned is working great with .mp3 file. You can do two things.
Check the path you specified in the src attribute for the .mp3 file.
Run your .html file in different browsers.