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>
Related
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.
First I made a screen recording as a video I would like to display.
Than I uploaded the video to VLC to convert the video.
I made one MP4 and a fallback for OGG.
I then moved the videos to my dropbox account so I can host them there.I right clicked and got the link to each video from dropbox. I am trying to use the links as the src in the video tags.
<video width="400" controls>
<source src="https://www.dropbox.com/s/m7emkfs994sgm5g/Untitled.m4v?dl=0" type="video/mp4">
<source src="https://www.dropbox.com/s/9owwdbm8p0nz1f0/oggguntitled.ogg?dl=0" type="video/ogg">
</video>
Even though I told VLC to convert it to MPV, the file extension is m4v.. Is that the same thing?
The video just shows blank. Not getting any errors either.Not sure what I missed.
The following Fixed it for me.
I made two changes:
change dl=0 at the end of your dropbox link to dl=1. I believe this makes it a download link instead of a page to view a download link.
Due to a bug in chrome on OSX certain mp4 files will fail to play correctly (some kind of graphics acceleration issue), but it won't fall back to the ogv. For this reason, i have placed the ogv as first since it will work on OSX-chrome, and platforms that don't support it should fall back to the mp4.
<video width="400" controls>
<source src="https://www.dropbox.com/s/9owwdbm8p0nz1f0/oggguntitled.ogg?dl=1" type="video/ogg">
<source src="https://www.dropbox.com/s/m7emkfs994sgm5g/Untitled.m4v?dl=1" type="video/mp4">
</video>
I need your help.
I want to put a link of the music into the audio tag and it seems like this:
<audio controls autoplay>
<source src="http://www.boxca.com/lctj4xdqkhjr/Evgeny_Grinko_-_Вальс_.mp3.html" type="audio/mpeg">
<source src="http://pressplayaudio.com/?artist=Evgeny-Grinko&track=Field.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
But, it doesn't work and I don't know what's the problem.
you're trying to link an html website with some audio player on it, instead of referencing real audio files. This wont work.
You need to provide a reference to a physical file that you host somewhere
My aim is to play the mp3 file from the google drive. I am using the plugin MediaElement js. The reference I got is https://www.portalzine.de/dev/html5/hosting-mp3-files-on-google-drive-html5-audio-player/
This is working in chrome, Mozilla firefox but not in IE-11, safari and opera. I want this to be play in all browsers. Please give me the suggestions....
1. URL for the audio file (anyone can view)
https://drive.google.com/file/d/1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-/view?usp=sharing
2. Extract the id from URL
1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-
3. URL for playing the audio file
https://docs.google.com/uc?export=download&id={id}
example:
https://docs.google.com/uc?export=download&id=1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-
4. URL for downloading the audio file
https://drive.google.com/uc?authuser=0&id={id}&export=download
example:
https://drive.google.com/uc?authuser=0&id=1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-&export=download
5. HTML for playing audio:
<audio controls="controls">
<source src="https://docs.google.com/uc?export=download&id={id}">
</audio>
example:
<audio controls="controls">
<source src="https://docs.google.com/uc?export=download&id=1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-">
</audio>
6. HTML for downloading audio:
<a href="https://drive.google.com/uc?authuser=0&id={id}&export=download"/>Download
example:
<a href="https://drive.google.com/uc?authuser=0&id=1nQklEicsMeGBnuk0vv6zkHtXtyGyO9S-&export=download"/>Download
In another thread on another page someone wrote the only solution that has worked for me:
If you share an MP3 by link, you obtain a link like this
https://drive.google.com/file/d/XXXXXXXXXXXXXXXXXX/view?usp=sharing
where XXXXXXXXXXXXXXXXXX is the ID of your MP3 file. Then you can obtain a direct link to this audio by
http://docs.google.com/uc?export=open&id=XXXXXXXXXXXXXXXXXX
In particular you can use
<audio controls>
<source src="http://docs.google.com/uc?export=open&id=XXXXXXXXXXXXXXXXXX" type="audio/mp3">
<p>Your browser does not support HTML5 audio :(</p>
</audio>
The first link is the one you normally get, the other link is what you want to use with
Try to think of this as HTML code:
<audio controls>
<source src="http://docs.google.com/uc?export=open&id=XXXXXXXXXXXXXXXXXX" type="audio/mp3">
</audio>
Make sure you convert that link right and it will work!
I'm using Direct Link Creator plugin of Google Drive and get the link easily. Here's an example.
<audio controls="controls">
<source src="https://docs.google.com/uc?export=download&id=0B_ETxiqrp0SzbF9VQ3JCS2hnSlU">
</audio>
<video controls="controls">
<source src="https://drive.google.com/uc?export=download&id=0B0JMGMGgxp9WMEdWb1hyQUhlOWs" type='video/mp4' />
</video>
I was trying to accomplish this inside the SSML audio tag for Actions on Google. None of the above steps seemed to work. I finally found a solution.
1) Get the file ID from the sharing link
https://drive.google.com/file/d/your_file_id/view?usp=sharing
2) Construct the direct link
http://docs.google.com/uc?export=open&id=your_file_id
3) Paste the direct link into a web browser and hit enter
4) Copy the resulting URL after you have been redirected by your browser
Note: This will be a much longer URL that looks something like this:
https://doc-XX-XX-docs.googleusercontent.com/docs/securesc/XXXXXXXXXXXXXXXXXXXXX/XXXXXXXXXXXXXXXXXXXX/000000000000000/0000000000000000000000/*/your_file_id?e=open
Using this final URL is the only way I could get my uploaded sound files to work with Actions on Google.
I cannot figure out how to incorporate ogg files into a playlist for an HTML5 tag. Right now I read files from a directory JSON object that formats as follows:
var playlist = [{"url":"mp3\/122911.mp3","title":"122911"},
{"url":"mp3\/100909.mp3","title":"100909"},{"url":"mp3\/011110.mp3","title":"011110"},
{"url":"mp3\/061207C.mp3","title":"061207C"},{"url":"mp3\/110309.mp3","title":"110309"},
{"url":"mp3\/120409.mp3","title":"120409"},{"url":"mp3\/031608.mp3","title":"031608"},
{"url":"mp3\/100609C.mp3","title":"100609C"},{"url":"mp3\/120408.mp3","title":"120408"},
{"url":"mp3\/012908.mp3","title":"012908"},{"url":"mp3\/032107.mp3","title":"032107"}]
that works wonders and loading the ogg files into that object is not the issue. I just need to know how to tell firefox that the ogg files are there. Is there a parameter I'm missing in order to do that along with 'url' and 'title' in the JSON? I know it can go right in the audio tag if I'm just creating everything statically, but I'm not. The audio tag is simply:
<audio class="aud" autoplay>
<p>Your browser doesn't support HTML 5 audio.</p>
</audio>
and it works just fine with the mp3s in chrome and safari so far. I know I'm missing something simple. I have the ogg files, just confused about the parameters in the playlist I suppose. Thanks!
How this is working?
<audio class="aud" autoplay>
<p>Your browser doesn't support HTML 5 audio.</p>
</audio>
There is no source. Are you dynamically adding <source> to the <audio>?
Let me tell how it works:
You can specify multiple <source for the <audio>. Browsers will look top to bottom in the <source>s and try to play the first one it supports. So, if you write this way:
<audio class="aud" autoplay>
<source src="music.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML 5 audio.</p>
</audio>
This will be sufficient. Browses, that support mp3, will use the first source. If the browser, like firefox, that does not support mp3 will discard this and look next. It will find .ogg next and will play that one.
You can see more here:
http://www.w3schools.com/html/html5_audio.asp