I'm creating a smartphone app that is essentially a talking phrasebook, using App Framework 2 and Cordova 2.9, testing on a Samsung Galaxy S4. I found that after playing about 25 - 30 sound clips the sound stopped playing. I found the problem was that audio resources on Android are finite and not being released after issuing the media.play. I added a console log for each successful play and this showed successful execution even when it ran out of resources.
So, I added media.stop and media.release after the media.play (as discussed in several other questions on this forum and elsewhere) and found sound stopped working completely....sigh.
On a hunch, I added an alert statement between the media.play and media.stop and now sounds can be played as often as I want so long as I click OK when the alert displays. I also noticed the console log entries were no longer being made at all. So, it looks like the command after media.play is being executed immediately and not waiting for the sound to finish playing. Thus I issue media.play and before it can play the media.stop and media.release are executed and so I'm getting no sound. This seems to be confirmed as I noticed the alert was being displayed before the sound clip had finished playing and tapping OK terminated the sound playback, presumably because the media.stop and media.release were executed.
Am I misunderstanding how a synchronous call is supposed to work? Any suggestions to fix this much appreciated. Here's my js code:
<!-- Get the web root path -->
<script type="text/javascript">
function getWebRoot() {
"use strict" ;
var path = window.location.href ;
path = path.substring( 0, path.lastIndexOf( '/' ) ) ;
return path ;
}
</script>
<!-- /Get the web root path -->
<!-- Play sound using cordova -->
<script type="text/javascript">
function soundclip() {
var my_media = new Media(getWebRoot() + "/test.ogg", function() { console.log("my media found so stop and release after play"); });
my_media.play() ;
if (my_media) {
alert("my media found alert before stop and release") ;
my_media.stop();
my_media.release();
} ; // End If my_media
} ; // End soundclip
</script>
<!-- /Play sound using cordova -->
And here's the html
<input type="button" onClick="soundclip()" value=" Play Ay Caramba 1">
Thanks for any suggestions, this is driving me nuts !!
Related
I've got a problem with some code in Ionic.
I am developing an app on Ios and Android that needs access to the video.
The video is private and specific that is why I need to store them in the assets folder.
Here is the problem, sometimes on Android, the video can not be loaded from this file and I have a GET error, it tries 30 times to get the video and then stop.
That means that whenever I play the video I get an Error saying: Uncaught promise the play() method was interrupted by a call to pause().
Here are the request from the app
Error message
Above are the request and the error code.
Here is my HTML5 code :
<ion-row class="ion-justify-content-center ion-align-items-center">
<video class="ion-no-margin" #video *ngIf="exercise?.video"
playsinline loop preload="auto" [ngClass]="{'preview-video': !isExerciseStarted}"
tappable (click)="onClickStartVideo()" [poster]="exercise.thumbnail">
<source [src]="exercise?.video" type='video/mp4'>
</video>
</ion-row>
And here is the TypeScript :
public onClickStartVideo() {
const video = (<HTMLVideoElement>this.video.nativeElement);
if (this.isVideoPlaying) {
video.currentTime = 0;
} else {
video.currentTime = 0;
video.play();
}
this.isVideoPlaying = true;
}
Thank you for your help.
I'm using the following html code. I'm able to get a video stream on my desktop, but I'm getting a grey play button in the android webView app. I'm serving this over a https connection.
Please guide me as Im new to both of these code snippets.
HTML
<div id="video-container">
<video id="camera-stream" width="500" autoplay></video>
</div>
Script.js
window.onload = function() {
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if (navigator.getUserMedia) {
navigator.getUserMedia({ video: true },
function(localMediaStream) {
var vid = document.getElementById('camera-stream');
vid.srcObject = localMediaStream;
},
function(err) {
console.log('The following error occurred when trying to use getUserMedia: ' + err);
}
);
} else { alert('Sorry, your browser does not support getUserMedia'); }
}
This screenshot is taken from my desktop chrome browser.
and this is taken from my phone webView.
I know this is an old thread but I recently run into the same issue and only after a lot of tries I finally found the solution.
If you see this play button all the permission should be set correctly.
It seems that the webview is waiting for an user interaction to start the stream but tapping on the icon does not starts the video (idk how the user should "approve" the streaming)
The solution is to change the setting of the webview in you webapp:
webView.settings.mediaPlaybackRequiresUserGesture = false;
In this way the stream starts correctly without any user interaction
i have tried running cordova media plugin in both kitkat and lollipop but it shows no response.
Not even the 3rd parameter for error's function is running.
I have also read almost every article or question about this problem and tried every way i could but nothing worked.
All i finally concluded was that this plugin is not fully supported in android versions above 4.1
I have tried:
<script>
document.body.onload="ready()";
function ready()
{
document.addEventListener("deviceready",function() {
var src;
// src's value
var med=new Media(src,
function() {
alert("success");
},
function(e)
{
alert("failed code: "+e);
});
med.play();
med.release();},false);
}
</script>
here is what i have tried replacing with //src's value
src = 'cdvfile://audio.mp3';
src = 'file:///android_asset/www/audio.mp3';
src = "cdvfile:///android_asset/www/audio.mp3";
src = "audio.mp3";
even after that stupid conclusion i wrote about up there, i still am doubtful that how it still runs on some devices with same os. So, any ideas of making audio files play in cordova app?
MORE INFO:
1>My project structure
appName
|___www
|___[+]css
|___[+]js
|___index.html
|___[+]img
|___audio.mp3
2>I am targeting 6.3.0 marshmallow 😋
Media definitely works for me on marshmallow - albeit I use wav files rather than mp3. I use
audioFail = loadAudio('sounds/no.wav'); where the file is stored in www/sounds
The media constructor is asynchronous but your code uses med immediately after issuing the call to the constructor - have you confirmed that med exists and is defined before you try to call med.play()?
For a long time i m trying to solve problem with cordova media plugin...
All i want is to play internet radio stream on button press (play)
This is my code:
app.js
var mmedia;
function playAudio(url) {
mmedia = new Media(url,
function () {
console.log("playAudio():Audio Success");
},
function (err) {
console.log("playAudio():Audio Error: " + err);
}
);
// Play audio
mmedia.play();
}
index.html
<input type="button" value="Play" onclick="playAudio('http://streaming.tdiradio.com:9000/');" />
But all i get is silence...And few hours later radio just starts playing..
Hours after app was closed (i didn't release media though)...
I'm using Android 4.4.2 on my phone..
On Ripple works just fine without 1s of delay..
What is this about? And what is the best way to solve this?
I am working on an app and using IntelXDK to build it. I need to play some sounds if conditions are met, first I have tried HTML5 with JS and on desketop it's working but when built, it has no sound...
First attempt - HTML5 & JS
<audio src="snd/yes.mp3" id="yes"></audio>
<audio src="snd/no.mp3" id="no"></audio>
if(condition) {
$('#yes').trigger("play");
} else {
$('#no').trigger("play");
}
Then I tried the native IntelXDK version that goes like this:
if(condition) {
intel.xdk.player.playSound("snd/yes.mp3");
} else {
intel.xdk.player.playSound("snd/no.mp3");
}
No only that it doesn't work but it also f***s up the rest of my code not allowing the popup and page change to trigger.
Does anyone know how to fix this ?
Do I need to preload the sounds before playing them?
**UPDATE
I just discovered that if I use the HTML5 Audio tags and I give links to the sounds inside my server, the sounds are working, but if I try to get the same sounds from my snd folder they won't work...why is that?
The problem is that your "root" is not where you think it is, so your "snd" directory is not being found. This problem varies, unfortunately, with each target, it is not something the XDK controls, it has to do with how Cordova apps are constructed. You can use these functions to locate the root of your files and that should help you make this work.
// getWebPath() returns the location of index.html
// getWebRoot() returns URI pointing to index.html
function getWebPath() {
"use strict" ;
var path = window.location.pathname ;
path = path.substring( 0, path.lastIndexOf('/') ) ;
return 'file://' + path ;
}
function getWebRoot() {
"use strict" ;
var path = window.location.href ;
path = path.substring( 0, path.lastIndexOf('/') ) ;
return path ;
}