I am workign with PhoneGap 3.0.0 and my confic.xml file does have the needed plugins. I can start saying that my sound do start when i run my code, and that everything else works. Just 1 thing dont want to work.
I am using Jquery Mobile.
I cant stop the audio.
I am calling a function called "stopAudio()" that read a global variable "my_audio" and fire of the "stop()" function.
Here is my code.
Index.html
Stop Audio
AudioHandler.js
document.addEventListener("deviceready", onDeviceReady, false);
var my_media = null;
function playAudio(url) {
try {
var my_media = new Media(url,
// success callback
function () {
my_media.release();
},
// error callback
function (err) {
my_media.release();
});
// Play audio
my_media.play();
} catch (e) {
alert(e.message);
}
}
function stopAudio() {
my_media.stop();
}
controller.js
$("#stopaudio").click(function() {
stopAudio();
});
Example usage:
playAudio("/android_assets/www/mysound.mp3");
So i have these 3 files. What i posted is a small amount of the content, but the other content in those files have nothing to do with the audio. I did also try and comment everything out and so forth.
So, basicly the "controller.js" is the file where the click are detected, and from there the function "stopAudio()" are called that comes from AudioHandler.js.
My audio do start on startup of the phone.
I cant stop the audio.
Im running out of ideas, any help would be welcome :-)
Thanks :)
You've declared my_media as a local variable here:
try {
var my_media = new Media(url,
You want it to be global, so remove the var:
function playAudio(url) {
try {
my_media = new Media(url,
// success callback
function () {
my_media.release();
},
// error callback
function (err) {
my_media.release();
});
// Play audio
my_media.play();
} catch (e) {
alert(e.message);
}
}
Related
i am building an app with ionic, i want to run a function whenever a video starts to play,like hide a button and etc. here's my code
let video = <HTMLVideoElement> document.getElementById(i)
if(video.paused) {
video.play()
video.oncanplay=()=>console.log('Starts playing');
}
The code is not working, please how can i run a function whenever any video on that page starts playing
var vid = document.getElementById("myVideo");
vid.onplay = function() {
alert("The video has started to play");
};
From here: https://www.w3schools.com/tags/av_event_play.asp
Try this, play returns a promise.
const video = document.getElementById("myVideo");
async function playVideo() {
try {
await video.play();
// video is playing, do your stuff here
} catch(err) {
// video is not playing
}
}
if(video.paused) {
playVideo()
}
For more info: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play
I dynamically set image and audio sources when window/document is already loaded, e.g. I set them after user performs some manipulations on the page:
// image and audio set
jQuery("#image").css('background-image', 'url(../content/icons/1/18.png)').css('backgroundPosition', '0 -40px');
var myAudio = new Audio('http://domain/content/audio/1/full-18.mp3');
myAudio.pause();
// i want this part of code be executed only when images and audio is fully loaded
myAudio.play();
Solution number 1, isn't working
jQuery("#page").load(function() {});
Solution number 2, isn't working
jQuery(window).load(function() {});
Any other idea how to this can be solved? Thank you in advance
You need to specifically target the image element to check if it has loaded.
$('#image').load(function () {
console.log('image loaded');
});
To check if the audio element is ready to be played you need to use onloadeddata.
var myAudio = new Audio('http://www.mfiles.co.uk/mp3-downloads/edvard-grieg-peer-gynt1-morning-mood.mp3');
myAudio.onloadeddata = audioIsLoaded();
function audioIsLoaded() {
console.log('audio is loaded');
}
Run the below code snippet to see this in action.
$('#image').load(function() {
alert('image loaded');
});
var myAudio = new Audio('http://www.mfiles.co.uk/mp3-downloads/edvard-grieg-peer-gynt1-morning-mood.mp3');
myAudio.onloadeddata = audioReady();
function audioReady() {
alert('audio ready');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" src="http://armpit-wrestling.com/wp-content/uploads/2016/06/bret-hart.jpg">
I have a simple mobile app designed using PhoneGap. I am some mp3 in it and I am using the Media plugin of PhoneGap. Everything is working fine, the audio is playing and so on.
The issue, I noticed after playing 8-12 times, the audio stops playing. I do not get sound. Here are my codes:
JavaScript
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
// Audio player
var media = null;
var audioP = false;
// Play audio
function playAudio(src) {
if (audioP === false) {
media = new Media(src, onSuccess, onError);
media.play();
audioP = true;
} else {
media.release();
}
}
// onSuccess Callback
function onSuccess() {
console.log("playAudio():Audio Success");
audioP = false;
}
// onError Callback
function onError(error) {
}
</script>
Help please!
I have read previous posts on this and documents by microsoft but cannot seem to get my app to run Sound in the background. It plays 100% but when ever the app is then suspended the music also stops. I have added "Background Tasks" declarations selecting Audio and my audio tag looks like this
<audio id="musicplayr" msAudioCategory="BackgroundCapableMedia" controls="controls"><source src="song.mp3"/> </audio
and finally my javascript includes the references to MediaControls
var MediaControls = Windows.Media.MediaControl;
// Add event listeners for the buttons
MediaControls.addEventListener("playpressed", play, false);
MediaControls.addEventListener("pausepressed", pause, false);
MediaControls.addEventListener("playpausetogglepressed", playpausetoggle, false);
// Add event listeners for the audio element
document.getElementById("musicplayr").addEventListener("playing", playing, false);
document.getElementById("musicplayr").addEventListener("paused", paused, false);
document.getElementById("musicplayr").addEventListener("ended", ended, false);
and below in the code i have the event handlers
// Define functions that will be the event handlers
function play() {
document.getElementById("musicplayr").play();
}
function pause() {
document.getElementById("musicplayr").pause();
}
function playpausetoggle() {
if(MediaControls.isPlaying === true) {
document.getElementById("musicplayr").pause();
} else {
document.getElementById("musicplayr").play();
}
}
function playing() {
Windows.Media.MediaControl.isPlaying = true;
}
function paused() {
Windows.Media.MediaControl.isPlaying = false;
}
function ended() {
Windows.Media.MediaControl.isPlaying = false;
}
*Note musicplayr is the reference for the html5 tag
Any help appreciated why this is not working?
You also need an event handler for the stoppressed event. Without any of the four handlers--playpressed, pausepressed, playpausetogglepressed, and stoppressed--background audio won't be enabled. See http://social.msdn.microsoft.com/Forums/en-IN/winappswithhtml5/thread/2ca0c122-df31-401c-a444-2149dd3e8d68 on the MSDN forums where the same problem was raised.
.Kraig
In order to get an HTML5 animation playing with sound on an idevice, I've made a div the size of the entire browser named "theScreen", and use the following code:
audioCont.prototype.iCrapLoadPlayThrough = function () {
if (this.supported) {
theScreen = document.getElementById("theScreen");
var self = this;
theScreen.addEventListener('touchstart', function(){self.iCrapClickedLoadPlayThrough();}, false);
return(1);
} else {
return(0); // Not supported
}
};
audioCont.prototype.iCrapClickedLoadPlayThrough = function () { // Check if supported, then load the audio file
var self = this;
theScreen.removeEventListener('touchstart', function(){self.iCrapClickedLoadPlayThrough();}, false);
this.addCanPlayThrough();
this.load();
}
Now this works, and the sound/animation starts when the user taps on the screen. The problem is, if they tap on it again the sound stops, and each repeat tap you hear a few ms of audio. Does anyone know why?
It's not removing the event listener because it's an anonymous function. Remove the anonymous function and just have the function name instead
theScreen.addEventListener('touchstart',self.iCrapClickedLoadPlayThrough,false)
theScreen.removeEventListener('touchstart',self.iCrapClickedLoadPlayThrough,true)
I've found a solution to the problem:
theScreen.addEventListener('touchstart', eventID=function() {self.iCrapClickedLoadPlayThrough();}, false);
then
theScreen.removeEventListener('touchstart', eventID, false);