Audio not playing using HTML5 audio tag in Phonegap app - html

I've an audio file on my phone's SD card and I want to play it using my PhoneGap and HTML5 based hybrid mobile app. I am using the HTML5 audio tag as following:
<audio src="cdvfile://localhost/myfolder/subfolder/audio.mp3"><audio>
However unfortunately it doesn't play.
I want this to work on iOS, android and windows.
Please advice.

You should put the sound file in the www folder, or one of its subfolders.

I have successfully used audio tags in Cordova applications.
I have found two cases where audio will not play:
1) use of the new WKUIWebview plugin (does not allow the file protocol in thw www folder)
2) the head is missing a content security policy, which can happen creating an app with Phonegap instead of Cordova

Related

Ionic3 how to play audio file?

I am trying to make a audio player for Ionic3.
First, I used tag in html. It works on IOS but not work in Android.
Second, I tried #ionic-native/media. But it should record first and can play.
I am wondering to how to implement audio player.
Please help.
You can easily use Ionic-audio plugin for that.
Here is the Demo
npm install ionic-audio --save
An audio player plugin for Ionic that works out of the box in the
browser and device using an underlying audio provider depending on the
environment. When running inside the browser the plugin will default
to a Web Audio provider, whereas on a device it will switch to Cordova
Media if cordova-plugin-media is available, otherwise falls back to
web audio.
Git Repo

Chrome play mp4 in external program

I have some mp4 files which are served in a web app with the parameter to open them instead of downloading them :
"Content-Disposition inline
Here is my question :
Can I open my link/mp4 inside an external app such as VLC instead of chrome (for now it uses the default html5 player in a new tab)
I have looked for custom URI Schemes but I didn't understand a thing and I would prefer a solution working on Linux/Windows.
Thanks !

How to use Audio in a Mobile Chrome App

I'm aiming to have a sound occur when the user presses a certain button.
This is working on my desktop and in Chrome on my Android 4.4 phone but when I launch this as a cordova app the audio stops working.
<audio hidden='true' id='win-audio'>
<source src='audio.mp3' type='audio/mpeg' />
</audio>
with the following being called when a click event happens
document.querySelector('#win-audio').load();
document.querySelector('#win-audio').play();
I have tried using a <video> tag instead (with the same mp3 loaded). I've also tried the ogg format in case it's a codec issue but with no luck.
On PhoneGap people solve this using the Media plugin - I'd rather do this properly using HTML5 audio but if that's impossible, is there an equivalent for Mobile Chrome Apps?
After trying many solutions I discovered that we can use the Cordova media plugin to substitute for lack of HTML5 audio support.
First install the plugin from the command line from within your project directory using cca plugin add org.apache.cordova.media
Next add the following line to your config.xml file:
<plugin name="Media" value="org.apache.cordova.AudioHandler" />
You can then use the new Media object from within Javascript as follows:
var audio = new Media('/android_asset/www/path_to_your.mp3');
audio.play();
Note that you must issue the correct path that Cordova expects, which is NOT relative to the Javascript file the code is in. The above will work for Android, and to support iOS see: iOS Phonegap Media Object - How do I access a resource in the WWW folder?

flash content on html 5 native app on android and ios

How can we run swf file inside native app of android and Ios. I want to run swf inside html5 app. Presently I am using PhoneGap or Cardova for this app.
Is there any option for html5 than please suggest.
No, you can't. Especially not on iOS that does not have any flash support at all.
Have you tried Google Swiffy? It allows to convert SWF into HTML5.
If you want to use SWF for playing animation on HTML5, you also can use LWF (an animation sample on HTML5), it works well on Android and iOS.
you can use Puffin browser for IOS and Android,
works very well for all flash swf, AS1/AS2/AS3 included

Using phonegap and html5 video tag: caveats?

I am planning to build a JavaScript/HTML5 app, and wrap it with phonegap to be installed on an android tablet.
In it, I want to show a video file.
Is it just a matter of creating an index.html file, and putting a mymov.ogv file in the same directory, and then using:
<video src="mymov.ogv"...>
and it will work on Android?
I have read about some problems with this, but my quest got me confused.
What are the caveats, if any?
PS: the video should be packaged within phonegap, such that the video is shown when the app is not connected to wifi. So it's a local file.
PPS: Since it's for internal use, I am able to choose a particular modern android version (if that makes any difference). There is no need to support old android versions whatsoever.
According to this resource: http://caniuse.com/ogv There is not support for ogv format in Android. Remember that Phonegap applications are just display in a rapped browser window-- So if the browser doesn't support it, you can't use it. Whether the video is on-board the device or streamed, doesn't matter.
You can certainly embed with the tag, but you might want to use the associated Javascript API to provide some control over the video.