I am building an offline Html5 App and I have to prepare my manifest file for caching all files I am using.In previous releases of JQM I just included:
jquery.mobile-x.x.x.min.js, jquery.mobile-x.x.s.min.css, the 2 icon files and the spinner.gif....And my App worked just fine...
Now it turns out that JQM 1.4.1 includes a bunch of files that I don't know if I have to cache them all?
What should I do with all these files?
Do I have to include them all in my manifest file?
This is not a thorough answer but no, you don't need both the regular and "minified" version of all those files. The .min.* files should theoretically load a bit faster and are worth bundling into the cache manifest. Also if you are targeting multiple device formats, you might want both the PNG and SVG images. However if you are targeting a single device profile (as we are) you can probably isolate only the image format that you want. The default is now SVG with PNGs as backup for browsers that don't support vector images fully.
Related
I have built an HTML5 creative that will be served via the Google Doubleclick environment. It utilizes CSS3 transforms / 3d animations etc. that aren't supported by IE8/9/10.
I would like to use Modernizr and checked the documentation but couldn't find any info as to how to reference an independent Flash(swf) file as a fallback. I don't mean within the same html document - like when you would hide or display a div, depending on what the browser supports, but instead just having a separate Flash file served?
Ideally I would just upload the swf, along all other HTML5 files into the same directory within the Doubleclick Studio environment, reference the swf via relative path and then have it served to IE8/9/10.
Any suggestions are welcome.
Thanks!
check out the latest version of yepnope, which is what powered Modernizr.load
Im working on an offline html5 audio player. Obviously I have to specify filetypes such as Mp3 for use with webkit and Vorbis for firefox etc as per the HTML5 spec. However for use on mobile devices like the iPhone for example I only want to get the files needed to play in this case mp3. Is there a way for me to tell browsers to cache specific files or do they have to add all the resources no matter what. Thus eliminating the burden of the user having to cache more files needed and exceeding restrictions (I'm aware that in mobile safari only 10MB can be cached.)
Is there a way to target certain resources in the cache per device.
Heres my manifest.
CACHE MANIFEST
CACHE:
index.html
master.js
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
style.css
buttons.png
image.jpg
/player/tunes/waterfall-audio.m4a
/player/tunes/waterfall-audio.oga
So obviously in firefox I only need to cache the oga and webkit the mp3. Any insights would be great!
I don't know any way in which you can target specific devices or platforms in cache manifest file.
But you can generate the manifest file on server side depending on the client that has sent the request. This way you can send different manifest files for different browsers and platforms.
Just make sure to set the MIME type to "text/cache-manifest".
Anyone have suggestions on how to best handle using App Cache when you have sets of assets used in one browser but not in another?
Example: OGG audio for Firefox and MP3 for IE. I can cache both types of files, but audio is huge and would store twice as many files as the browser can use.
My best thought is to create several different manifests. For example, one to load assets common to all browsers, and then a separate manifest for, say, MP3's, and load a page in an iframe that calls this manifest once I can determine on the client side that they're using IE. If however I find that they're using Firefox, I can load another page (with the attached OGG manifest) in the iframe.
Would this work or is there a more elegant solution?
For now I'm just using a nginx rewrite rule like this
location / {
if ($http_user_agent ~ Firefox) {
rewrite ^.*\/(app.manifest)$ $scheme://$http_host/moz.manifest redirect;
}
}
Most web servers will let you define similar rewrite rules. This is a good option because it's fast and doesn't require any further installation of software.
This guy is checking which browser using PHP, but you could do this using any framework, preferably something fast like Node or plain ruby Rack.
how can I play a midi file in my html/php page
Right now I surf the net and got lots of simple embed code like the one I given below
<EMBED SRC="C:\Windows\Media\Onestop.mid" hidden=true autostart=true loop=1>
But my firefox says to install plugin - Quicktime player
I dont think this is the way or how to bypass this above said issue, may be if you can suggest another method to do this if any,
thanks...
I know it's been a while, but this is top of Google for "website midi player", so I thought I'd drop in a solution.
I made a website and wanted to play a midi file, and there's a Javascript plugin you can use: http://www.midijs.net/
Just include the library:
<script src='http://www.midijs.net/lib/midi.js'></script>
And then the file you want to play: <script>MIDIjs.play('path/to.your/file.mid');</script>
Important edit
It seems that the remote file is doing Crypto mining, which is less than ideal. You should either store the file locally and remove t("https://coinhive.com/lib/coinhive.min.js",D), or use the original code from GitHub: https://github.com/babelsberg/babelsberg-js/tree/master/midijs
Thanks to #David de Kleer for pointing that out.
Use Web Audio API for modern browsers. See complete example of player. It works on desktop and mobile.
With html-midi-player, it is possible to embed a MIDI file in a website simply by inserting a midi-player element (a custom HTML element which works a lot like the audio element, but for MIDI files):
<midi-player src="jazz.mid" sound-font></midi-player>
Complete demo:
<midi-player src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player#2b12128/jazz.mid" sound-font>
</midi-player>
<!-- The following needs to be inserted somewhere on the page for the player(s) to work. -->
<script src="https://cdn.jsdelivr.net/combine/npm/tone#14.7.58,npm/#magenta/music#1.22.1/es6/core.js,npm/focus-visible#5,npm/html-midi-player#1.4.0"></script>
Full disclosure: I'm the author of html-midi-player.
The playback functionality is provided by Google's Magenta.js library. It's also possible to use Magenta.js directly to play MIDI files, but this requires a non-trivial amount of JavaScript coding, which is why I created html-midi-player.
As far as I know, there is no cross-browser way to do this: Flash, the most common option when embedding audio on a web page, doesn't play Midi files.
The only way is indeed the embed method, and whether that works will depend on how the user's browser is set up. A plug-in (like Quicktime) will have to be installed that can handle the file. If the "install plugin" dialog appears on a computer, it won't work there.
I think the only sane way is to convert those Midis to MP3 files.
Java can play MIDI files, and the necessary plugin is installed (in the factory) on most PCs
Incomplete examples here and here
I have been looking into HTML5 manifest but I am unclear as to whether or not there is file size limit for caching using the manifest.
For example if i wanted to make several audio files available offline would this be achieved using manifest? or is it really only for small images and text?
as far as i know the spec doesn't specify a maximum size for an object or for the entire cache, but e.g. firefox has a preference which by default allows a total of 50mb worth of cache-files. that implies that indeed the cache is optimized for small files (html, css, js, images) and not for big files (video, audio, ...).