HTML5 visualisations in mobile - javascript

I am trying to make use of a few visualization libraries for a mobile app I am making (with phonegap).
The libraries are: https://github.com/jsantell/dancer.js and http://www.michaelbromley.co.uk/blog/42/audio-visualization-with-web-audio-canvas-and-the-soundcloud-api
However, they do not seem to work in mobile. Is there a way you could integrate these into an app? Or is the support for some of the tech these make use of now supported yet. I have only tested on iOS.
Thanks.

The problem as for right now is that the Web Audio API is not supported in mobile other than iOS 6+
Check this:
http://caniuse.com/#feat=audio-api
This API is the base for building an audio visualizer.
If you are working with Phonegap you could make part of the application web and the visualizer part native and use ir as a Phonegap plugin. It is justified to do this depending how much % of the application the visualizer is.

You might be able to use the Intel XDK for this. It allows you to make mobile applications using jQuery/JS/HTML5. Assuming you have all the code, it shouldn't be too difficult to port.
HTH.

Related

Can an HTML5/javascript Android app access the camera/voice recorder?

I'm thinking of getting into Android app development and I hear HTML5 apps are becoming more popular now. Can HTML5 + javascript be used to access media inputs on the phone, or is this only available to Java apps?
Thanks
Frameworks like Phonegap make this possible by providing a wrapper around the api of each device it supports, which can be called from your html5 application built using it. Check their site here or their api documentation for the camera api here.
In pure HTML5/JS, you can't.
But, you can use fameworks like Phonegap that provides JS libraries allowing you to access to the device capabilities such as GPS, camera, etc.

HTML5 framework for both Web and Mobile (LAMP)

Which are the possible options for HTML5 framework which support both web and mobile development. For example, if I have to develop a application for web which is 100% iPad or Android tabs compatible (with touch, slide support) then what should be the ideal choice in LAMP environment.
I have heard of Sencha which looks like HTML5 mobile only framework. Please correct me if that's not the case.
Jquery Mobile is a great choice for cross-browser compatibility. In my experience it creates both great-looking mobile sites and desktop sites. It may take a bit of tweaking to get it working the way you want it, but overall I've found it to be the best solution.
www.jquerymobile.com

Any Javascript framework with just one API that supports both Desktop and Mobile?

Any Javascript framework with just one API that supports both Desktop and Mobile (includes phones and tablets)? If not, why isn't there? What happens if I need to port the website from Desktop experience to Mobile experience, do I have to rewrite the entire website?
What do you think about Dojo or Ext JS?
Use Titanium at http://www.appcelerator.com/ for mobile development
Sencha has ExtJS and Touch. Both are very similar in API and worth taking a look.
If you are looking for HTML5 standard based mobile/desktop application, then look at Sench Touch. It works on mobile as well as desktop. Checkout the examples - http://dev.sencha.com/deploy/touch/examples/ - on your desktop (HTML5 compliant browsers) or on your mobile/iPad and see it in action.
Dojo 1.7 works no issue both on desktop and mobile, the only complain for me is the drag and drop API doesn't support touch for now

How do I leverage my knowledge of Html/JS/CSS for iOs, Android, etc?

Is it possible to create responsive, mobile-style apps without coding directly for iOS or Android with the same html/js/css stack that is used for major browsers?
Have a look at these books, they really helped me get started with developing for mobile using web technologies:
Building Android Apps with HTML, CSS, and JavaScript
Building iPhone Apps with HTML, CSS, and JavaScript
As others have said you can make a web app styled for mobile. There are some nice framworks to help you with styling and things like nice animated swipes etc. I would recommend looking at jQuery Mobile and Sencha Touch.
For sencha there is a list of getting started resources in my answer to another stackoverflow question here.
If you you want to make your web app native (and have access to features like the camera and accelerometer) I would recommend PhoneGap, but there are other frameworks already mentioned like Titanium.
Phonegap can be used along with Sencha Touch or jQueryMobile and has lots of resources to help get you started e.g. the API docs and getting started guide (check out the phonegap website for others)
Hope that helps!!
Yeah, it's called Web App.
You're probably goin to use some touch/mobile library like jQuery Mobile or Sencha Touch to make the user interaction easier and fancy.
You don't need to code on C/Java to put out someting great for mobiles. ;)
On top of that you can also use PhoneGap to create the complete "native" look and feel, without writing any code in Java/Objective-C.
#Jason if you have Good Knowledge in java scrip then i prefer to you to start with Appcelerator Titanium Click Here Link For and Link two This will good For Developing Application for iphone and android platform .There are lot Tutorial you can find for both android and iphone.

Is there access to the iPhone accelerometer using Javascript?

I'm starting to try and do some web based game programming for my iPhone, and other web enabled phones that my friends have, and was having a hard time finding information on accessing the accelerometer using Javascript in the browser.
With the latest release, I know I've got access to location information now but I was hoping that I could make use of the accelerometer for some of the games I plan on making.
Alternately, is this also possible with the Android phones?
In the latest iOS update (4.2) the accelorometer is now accessible from Javascript.
See: http://www.mobilexweb.com/blog/safari-ios-accelerometer-websockets-html5
iOS 4.2 provides Accelerometer & Gyroscope support through the DeviceOrientation API.
DeviceMotionEvent class
reference
DeviceOrientationEvent class
reference
Here a working javascript snippet.
If your are using iOS 4.2 or more, then you can do it: http://www.albertosarullo.com/blog/javascript-accelerometer-demo-source
jharlap is correct, however I'd be curious to know if this would work on the Palm Pre. Native development on the Pre is done using html and JavaScript, however there are special JavaScript APIs to access the phone's features that I believe only work for locally stored apps. I wonder if these are available through the browser. I doubt it, but it would be interesting.
Checkout PhoneGap project. It provides API to access the accelerometer and the GPS location from javascript.
"Regular" javascript cannot access the accelerometer info, it can access the geolocation using the W3C geolocation API supported by iPhone OS 3.0.
Yet, a project (e.g. PhoneGap) can be used to build a bridge between javascript and Objective-C capabilities to expose that functionality. This works if you want to deploy the app as a standalone application, that simply has one WebKit which loads the html content from the server.
I haven't played with their framework, but they provide templates for the iPhone and Android projects and you can work on developing your javascript game which would work almost-out-of-the-box on iPhone and Android. I cannot comment on the performance and the user experience though.

Categories