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>
Related
I am using simple HTML5 audio tag. For .mp3 file it is working fine.
But I want to play android call recorder .3gpp files.
<audio controls preload='none' style=' width:200px;'>
<source src='file.3gpp' type='audio/mpeg'>
Your browser does not support the audio element.
</audio>
The point is, the Browser must support the file type you provide, not all browsers support all file types and codecs. Usually you have to add alternative source so that all browsers have at least one format that they can support. Just putting audio/mpeg in the type field does not do the trick.
Check this list of supported media formats:
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility
You can convert your file to something like a MP3 or OOG using Audacity audio editor, but there is no change that you just tweak you HTML so that all browser can play your original file (audio/3gpp).
You can add your file in the first line and any browser that supports that format will pick it up, if not than the browser tries the next till he reached the end than he shoes the message "Your browser does not support the audio element."
<audio controls preload='none' style=' width:200px;'>
<source src='file.3gpp' type='audio/3gpp'>
<source src='file.ogg' type='audio/ogg'>
<source src='file.mp3' type='audio/mpeg'>
Your browser does not support the audio element.
</audio>
I am trying to test if some audio files we currently have, can be played via HTML5.
The html code is as follows:
<audio width="720" height="405" controls src="https://machinename/media/play?ID=2" type="audio/wav"></audio>
When the page loads, it seems to be doing something, and later fails with a message that says Invalid source.
If i then look at F12 for more debugging info, it says:
AUDIO/VIDEO: Unknown MIME type
The content being rendered by the tag src="abc" is a wav file.
What am i missing? I am testing in IE11 and Chrome 43.
Any help much appreciated.
Since this seems to be a popular question, I will explain what the error was and how i fixed it.
At first glance it might seem that setting the src property to a url link is not quite right, but it infact this url link renders me a wav file. However the wav could not by played by the HTML5 autio tag, because of its encoding type; That is, the encoding of the content of the wav file. This can be mulaw, alaw, linear etc. Alaw is not a supported format for HTML5, so I changed mine to Ulaw, and now it is working perfectly.
W3C suggests that WAV files are not supported by Internet Explorer and the only file type that works across most browsers is mp3.
I also faced this issue while using a .wav file. I converted it to .mp3 and it worked fine.
<audio controls>
<source src="https://machinename/media/play?ID=2" type="audio/wav">
</audio>
You should be using the HTML5 <audio> ...</audio> tags for your purposes.
A sample code for wav would be as follows:
<audio controls>
<source src="abc.wav" type="audio/wav">
</audio>
Currently, there are 3 supported file formats for the element: MP3, Wav, and Ogg:
Chrome supports MP3, Wav, and Ogg formats, and Internet Explorer currently supports MP3 only, hence the possible invalid source error message you are seeing.
Simply convert all your wav files into mp3 and you should be safe for all browsers!
You can read more here http://www.w3schools.com/html/html5_audio.asp
Hope this helps!
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.
I am recording audio in different mobiles and each saves the file in different format like
.m4a, .3ga, .amr
. The problem now I am facing is how to play such audio files in any browser.
<audio controls height="100" width="100">
<source src="myfile.mp3" type="audio/mpeg">
<source src="myfile.ogg" type="audio/ogg">
<embed height="50" width="100" src="myfile.mp3">
</audio>
I tried the above code, but not useful. because I am unable to apply the code for .m4a, .3ga and .amr.
Phone recordings wont be in mp3 files for sure
Any other approach I need to apply ?
Any suggestions ? Please
I'm sorry to bring you the bad news, but you can't play any file format in a <audio> HTML5 element.
Instead, you can choose from a list of valid audio formats as listed here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
Shortly, the valid formats are:
WebM
Ogg
MP3
AAC
WAV
In your case, if you would like to play any audio format that isn't supported by the HTML5 spec, you will have to solve it, the same way audio files were played before HTML5, by using Plugins.
You can find on the web lots of audio-plugins for the browser, for each type of file format.
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