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!
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>
<html>
<body>
<audio controls>
<source src="one.wav" type="audio/wav">
</audio>
</body>
</html>
We are compressing the audio files(.wav) files using sox api. It's playing(.wav) perfectly fine when its not compressed. After compressing it's playing only in safari browser and not working in other browsers.The same audio file i can play with any audio player.Is there anything we need to do in order to work this in all browsers?
we are using following sox command to compress file
sox source.wav -e ima-adpcm target.wav
Unfortunately there is no set of codecs that browsers are required to support. If one browser is capable of decoding a file it does not guarantee that another browser can do that as well. The only thing that helps is testing, testing and testing...
There is for example AreWePlayingYet which is an old site from SoundCloud which has basic checks for various formats. Although it only checks for uncompressed wav.
The good news is that you can always provide fallbacks by specifying more than one <source/> within your <audio/> tag. The browser will go through the list until it finds a file it can decode.
I have searched a lot for this and found a lot of posts but none could help me.
I am trying to show a mp4 video like this
<video width="640" id="video1" controls="controls">
<source type="video/mp4" src="~/Content/Videos/HelpVideo.mp4" />
Your browser does not support HTML5 video.
</video>
But it always shows Error: Unsupported video type or invalid file path in IE11.
It works perfectly in firefox and chrome.
Even in IE11 when I right click on video and select Copy Video URL option then also it returned correct video URL which I get able to download and play properly.
The strange thing is when I try the same video in a sample project having only one html page and the same video in the same folder, it works in IE11 also!!
So can it be related to wrong path or something? I am using MVC4
I tried #Url.Content("~/Content/Videos/HelpVideo.mp4") for path but that also didn't work for IE.
I also tried adding mime type in project web.config file as well as applicationhost.config files
Edit
Just found in the network pan of developer tool of IE11 that mime type is going wrong for my videos, mime type is going application/octet-stream while it should be video/mp4
When I check this microsoft website for video support, http://ie.microsoft.com/testdrive/graphics/videoformatsupport/default.html it shows the correct mime types for videos i.e. video/mp4
So now the exact problem is known.
I have an HTML5 audio source defined as follows:
<audio>
<source src="../audio/segment.mp3" type="audio/mpeg" />
<source src="../audio/segment.wav" type="audio/wav" />
</audio>
The .mp3 is there for other browsers, and is expected to fail. The .wav file used to work without issue, but now does not. I have tried going over FF change logs and havent found anything in the latest releases. I am using FF 20 on Windows, and the error i receive now is:
"Media resource http://website.com/segment.wav could not be decoded"
If i throw the .wav URL in to the address bar FF will play the file without issue.
Note that at time of writing FireFox won't play 24bit .wav files. Convert them to 16 bit and they'll be happy.
I just faced this exact situation: the WAV file plays when loaded directly in Firefox, but not in an <audio> element. The problem for me was that the 44-byte header of my WAV files was invalid. After ensuring that the file length, byte rate, and block align were correct, I was able to play them just fine.
Here's the description of the WAV header specification that I used: https://ccrma.stanford.edu/courses/422/projects/WaveFormat/.
I'm having an issue with getting local videos working for the HTML5 Video element.
If I try and view a local OGG or WebM file directly, in Firefox 16.0.2 it works, but in chrome 22 it does not work!
However, if I view an OGG file on another webserver, it works correctly.
For example this file
http://www.quackit.com/video/pass-countdown.ogg
Works correctly for me, but if I save it onto my own server as
http://test.jammaloo.com/pass.ogg
Then it works in Firefox, but Chrome will not play it.
I believe the mimetype is being set correctly, can anyone help me track down the issue?
First of all try with adding support for more video types
Link - http://www.htmlgoodies.com/html5/client/how-to-embed-video-using-html5.html
video id="sampleMovie" width="640" height="360" preload controls
<source src="HTML5Sample_H264.mov" type='video/mp4;' />
<source src="HTML5Sample_Ogg.ogv" type='video/ogg;' />
<source src="HTML5Sample_WebM.webm" type='video/webm;' />
video
Second check your .htaccess file for content type - add mime type for webm, ogg, mp4
Link - http://docs.sublimevideo.net/troubleshooting
Link - http://www.htaccess-guide.com/adding-mime-types/
These solved my problem of playing video in HTML5 video tag. Hope it helps you too.
As i checked in the CHROME your content is not getting loaded with correct "TYPE"
If applicable (and nothing works) you can use- http://www.longtailvideo.com/players