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.
Related
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>
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>
For some reason, my video on wordpress wont show up when I use iframe to view it. In I.E., it automatically loads the video into the windows media player versus playing through the iframe.
I am using a local mp4 for the video's. From what I can tell, there's no issues with my I-Frame code. Anyone got any idea's? I cant get it to play in the iframe!
You should not be using <iframe>'s like that. In the past it was a relatively more popular method, but extremely unreliable even back than.
What you should do instead is either encode your video's as .flv's and use flash to play them, or encode them for the 'new' html5 <video>-tag for which no additional plugins are required. To get the best results with the new tag you should convert for 3 different codecs, but H.264 gets you quite far. This is how it ends up looking if you have converted multiple formats:
<video controls>
<source src="somevideo.webm" type="video/webm">
<source src="somevideo.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video in WebM with VP8 or MP4 with H.264.
<!-- You can embed a Flash player here, to play your mp4 video in older browsers -->
</video>
And you can read more about it here.
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
I have no idea why this isnt working.
<video src="American.avi" controls="controls">
<object data="American.avi" type="video/avi" />
<embed src="American.avi" />
All of the above tags return either "Missing Plugin" or have video controls that dont load a video. There is no link to install the missing plugin on chrome, there is on Firefox but it says no suitable plugins were found.
Any suggestions?
If you are trying to ensure a wide range of compatibility across browsers, then I believe the suggested method of embedding video using HTML5 tags is as follows;
<video width="480" height="320" controls="controls">
<source src="American.ogg" type="video/ogg" />
<source src="American.mp4" type="video/mp4" />
<p>I'm afraid that your browser does not support the video tag.</p>
</video>
AVI is a video container, and could contain video in one of a wide variety of formats. As such, I believe it's preferable if you can convert your video to .ogg and .mp4 formats to ensure compatibility across a wide range of browsers.
To clarify, the above code will show a single video player which will use any one of the provided source methods (but only one). So you can provide multiple formats for a given video window and the browser will pick which of the source elements that it can display and it will display that. So, with the above code, if the browser can play the .ogg version of the file it will, otherwise it will try to play the .mp4 file instead.
Browsers generally don't support AVI. The choice of containers and codecs you have is limited, partly deliberately (because lots of formats means lots of potential security holes) and partly due to unfortunate limitations like software patents.
To get cross-browser-compatible <video> you will need to provide MP4 and one of WebM or OGG Theora. You can also use the MP4 video in a Flash player as a fallback for browsers that don't support <video>.
See this table for which browsers support which formats.