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?
Related
Update:
I did a fully build via Android studios, and the HTML5 Video does not work at all. It may be related to it targeting a web site? Though I can have the app open a website from the app directly, so maybe something else I am missing. I also tried with the video in the app directory, but again, it did not seem to load at all.
I am building a Cordova/Framework7 app that I need to embed videos into.
The video loads, and I can scroll back and forth through the video, but the giant PLAY button does not respond when touching it in app.
<video id='video' controls>
<source src="https://website.com/FancyVideo.mp4" type="video/mp4">
Your browser does not support HTML5 video
</video>
I've tried to make an event listener to trigger the video (with and without the onload bi)
window.onload = function() {
var video = document.getElementById('video');
video.addEventListener('click', function () {
video.play();
}, false);
}
So I am not sure what to do, it should work.
I have followed several other question threads but none seem to work, or are mostly obsolete. I have also tried media plugins with similar results.
HTML5 element on Android
html5 videos not showing controls on android once loaded
Note:
I am using
PhoneGap desktop application, and a Galaxy S7 running Android 8.0.0
Cordova Android Version 7.1.0
Cordova Version 8.0.0
Framework 7 Version 3.0.1
PhoneGap Version 8.0.0
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
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
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
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.