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.
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.
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 need to use a .wav format audio in my HTML code. I used the following code and test it on chrome.
<audio controls controlsList="nodownload"><source src="sample.wav" type="audio/wav"></audio>
But it's showing an empty audio file on my webpage over and over again and my chrome browser telling me to download that .wav file. How to solve that problem?
Your snippet works well, you can test it here (I made a copy and paste from your post)
http://87.106.127.248/wav.html
Use only well known combinations of sample rate/bit depth, i.e. 44.100/16 bit with browsers
For streaming purposes on the web (like in an audio tag) you should create copies of your audio file in .mp3 and .ogg format and use these for your website.
Then a typical audio tag which could be handled by practically all modern browsers would look like this:
<audio>
<source src="path/to/yourfile.ogg" type="audio/ogg">
<source src="path/to/yourfile.mp3" type="audio/mpeg">
</audio>
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 am trying to embed a html5 audio tag in my web page here is the code.
<audio controls>
<source src="http://thearabiclab.com/wp-content/uploads/2015/07/arabic-word-meeting.ogg" type="audio/ogg">
<source src="http://thearabiclab.com/wp-content/uploads/2015/07/arabic-word-meeting.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
path of both the files mp3 and ogg are correct, the issue is when the page loads first time it will display the player correctly but suddenly it will transform into something like the image below.
https://www.dropbox.com/s/xkjrql4vzr3pkrh/Screenshot%202015-07-05%2015.12.56.png?dl=0
Please help to resolve this issue.
thanks
You mentioned code working fine for me..
What you can do to debug it first make a separate HTML file copy and paste the code, check if it working or not. It's looking sure... some conflict with your Js or jQuery.