I'm creating a website for a musician who's website will be checked around the globe, so the compatibility of the reproduction of the audio element is essential.
Therefore I thought about the following to cover all possible browsers:
<audio controls="controls" data-music data-bind-target="{{ fileName }}">
<source src="assets/audio/mp3/fileName.mp3" type="audio/mpeg" />
<source src="assets/audio/ogg/fileName.ogg" type="audio/ogg" />
<source src="assets/audio/webm/fileName.webm" type="audio/webm" />
<source src="assets/audio/wav/fileName.wav" type="audio/wave" />
</audio>
I've seen websites which only insert mp3 and ogg, so I would like to know if I'm taking it too far. I've checked the MDN site regarding the formats but not sure what to follow, therefore I would like the opinion of other developers.
Creating these formats takes no effort so thats not the issue. I would like to know:
If this helps to make the audio file better cross-browser?
Does it affect the global performance or not?
Do all the files download or only the first one which works in the order displayed?
Which order would you recommend? if it matters...
Related
I'm testing an EPUB with audio file, fixed layout format, in an 2012 iPad 2. I want to the audio file "autoplays" in one specific page with some text on it. After some tests, I've get some answers:
1.- Autoplay DOES work, when in the package.opf I set the values "landscape", "portrait", "both" and "auto" in the "rendition:spread" property; which create a synthetic spread for rendering the content (which, is when the system creates two adjacent pages simultaneously on the device screen).
2.- Autoplay DOESN'T work when I set the value "none", which is what I want to use in the mentioned property in the previous point (I don't want to use a "synthetic spread" in my design).
This is the code i'm trying in the xhtml file, the sound part:
<audio autoplay="autoplay" loop="loop">
<source src="../audio/latidos.ogg" type="audio/ogg" />
<source src="../audio/latidos.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
and this is the "meta" part about spread and layout of the book design in the package.opf file:
<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:spread">none</meta>
Any comments about this issue? Perhaps the model of my iPad?
I'm trying to find a tag/code that allows me to play background music when a webpage is launched or executed, is there any that is compatible with Google Chrome and if there are any, which codes work with chrome?
<!DOCTYPE html PUBLIC "-//w3c//DTD HTML 4.01 Transitional//EN"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My First Web Application</title>
</head>
<body>
<bgsound src="music/sample.mp3">
<noembed><img src="images/download.jpg" ></noembed>
</bgsound>
Fur Elise
</body>
</html>
The <bgsound> tag is Internet Explorer-specific and will thus not work in other browsers such as FireFox or Chrome. The <embed> tag should work in FireFox and Chrome if you use it correctly. It will use a browser plug-in to play the sound. Below is an example:
<embed loop="true" src="music/sample.mp3" hidden="true" type="video/quicktime"></embed>
loop="true" specifies to play the sound repeatedly.
src="sample.mp3" specifies the relative path of the sound file to play. The variety of formats you can play depends on what type= you specify.
hidden="true" indicates to not show the media player's interface. Hide it if you want the user to not be able to pause, stop, or navigate through the sound.
type="video/quicktime" specifies to use a Quicktime component, which means the client must have Quicktime installed. Use application/x-mplayer2 for Windows Media Player or audio/x-pn-realaudio-plugin for Real Player audio. Quicktime plays more formats and is probably what you will want to use.
Alternatively, use <object> in a very similar way. An example is below:
<object data="music/sample.mp3" type="video/quicktime" width="0" height="0">
<param name="mp3" value="music/sample.mp3">
<param name="autostart" value="1">
<param name="playcount" value="true">
</object>
The embedding method places a media player in your page. Here's the most basic version of the code:
<audio controls="controls"><source src="music/sample.mp3" type="audio/mpeg" /></audio>
If you would prefer not to show the player (and give the user no control), use this code:
<audio><source src="music/sample.mp3" type="audio/mpeg" /></audio>
An audio for the web which is fully cross-browser needs some different formats to work on all browsers. Commonly I see that people use mp4 and ogg. But I want to be completely sure. Therefore I added webm and wav. Is this completely needed? Especially wav files as they are so heavy. This question should be thought thinking about performance for a responsive site.
This is my html example:
<audio controls="controls" data-music="1">
<source src="http://example.webm" type="audio/webm" />
<source src="http://example.mp4" type="audio/mpeg" />
<source src="http://example.ogg" type="audio/ogg" />
<source src="http://example.wav" type="audio/wav" />
</audio>
Will this all be downloaded and affect the global performance?
Additionally, does the order matter of the type of formats?
This is driving me crazy. When I try to view the video embedded into the page, I get the following error in firefox "Video format or MIME type is not supported".
I am on IIS, and I do have the correct MIME type for MP4. Is there anything else I could check?
The issue ended up coming from our CMS.
The MP4 file was being loaded though a script, and that script's name contained "-", which the CMS decided to replace with ".". Simply opening up Firebug's Net tab allowed me to fix the error in a matter of minutes.
Firefox does not support H264 anyway, so that MP4 file had to be loaded through Flash.
I had problems with Firefox because I only had an mp4 file, but this javascript seems to work ok.
The new video tag is used and the object code is provided as a fallback. When Firefox can't find the non existent ogv file it throws an error, which runs the javascript to remove the video tag and just leave the fall back object code, which runs fine in Firefox. (I'm using JQuery, but the same could presumably be achieved with plain javascript.)
<script type="text/javascript">
function kill_video_tag() {
// Remove source tags
$('#vidid').children('source').remove();
// Grab everything else inside
var ob = $('#vidid').html();
// Add the fallback code before the video tag
// and then remove the video tag
$('#vidid').before(ob).remove();
}
</script>
<video id="vidid" width="320" height="256" controls>
<source src="http://www.mysite.com/nice_video.mp4" type="video/mp4" />
<source src="http://www.mysite.com/this_does_not_exist.ogv" type="video/ogg" onerror="kill_video_tag();" />
<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab" WIDTH="320" HEIGHT="256" >
<PARAM NAME="src" VALUE="http://www.mysite.com/nice_video.mp4" >
<PARAM NAME="autoplay" VALUE="false" >
<EMBED SRC="http://www.mysite.com/nice_video.mp4" TYPE="image/x-macpaint" PLUGINSPAGE="http://www.apple.com/quicktime/download" WIDTH="320" HEIGHT="256" AUTOPLAY="false"></EMBED>
</OBJECT>
</video>
I have an audio object with two sources, in M4A and OGG formats.
The code is as follows:
<audio id="audio1" controls="controls" preload="none">
<source src="music.m4a" />
<source src="music.ogg" />
</audio>
I can then call document.getElementById('audio1').play() and it starts playing.
It works well in all browsers. But in Safari, it only works if the M4A file is the first source.
I.e. if I have this code with OGG file first:
<audio id="audio1" controls="controls" preload="none">
<source src="music.ogg" />
<source src="music.m4a" />
</audio>
Safari won't react to the play() JavaScript call, only to the mouse click on the play button.
Is there any solution to this apart from always putting the M4A file first?
Thanks!
Have you tried telling the browser what MIME type you're using.
Use "audio/mp4" as the MIME type (don't forget to add it to your .htaccess)
<audio id="audio1" controls="controls" preload="none">
<source src="music.oga" type="audio/ogg" />
<source src="music.m4a" type="audio/mp4" />
</audio>
Maybe try adding an EMPTY.m4a file first? .5 sec of no noise?
I have been having trouble with .ogg on safari myself.
I never thought to try another type of file 1st.
This will probably fix my problem. Thanks.
My problem was gaps in .mps files. So I switched to .ogg.
Adding a default blank .m4a might help your problem.
I'm curios to know if this works, post either way.