I've been messing around with programming a test app for android and I've come across a issue playing a audio file. My problem lies with as soon as the page loads the audio file plays when it's not meant to and doesn't play via a button click
I'm using the example for cordova to get the audio to play but I can't work out why the audio plays straight away
Thanks
Script
script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
playAudio("/android_asset/www/audio/audio.mp3");
}
// Audio player
//
var my_media = null;
var mediaTimer = null;
function playAudio(src) {
if (my_media == null) {
// Create Media object from src
my_media = new Media(src, onSuccess, onError);
} // else play current audio
// Play audio
my_media.play();
// Update my_media position every second
if (mediaTimer == null) {
mediaTimer = setInterval(function() {
// get my_media position
my_media.getCurrentPosition(
// success callback
function(position) {
if (position > -1) {
setAudioPosition((position) + " sec");
}
},
// error callback
function(e) {
console.log("Error getting pos=" + e);
setAudioPosition("Error: " + e);
}
);
}, 1000);
}
}
</script>
HTML button click
<a class="button" onclick="playaudio('/android_asset/www/audio/audio.mp3')";>Play that audio!</a>
Because onDeviceReady() is listener callback for addEventListener.
So whenever this listener instantiate your onDeviceReady() method will be called automatically.
And from that method you are calling playAudio() method, that's why your audio start playing automatically.
Remove this playAudio() method call from the onDeviceReady() callback function.
EDIT:
change this
<a class="button" onclick="playaudio('/android_asset/www/audio/audio.mp3')";>Play that audio!</a>
with,
<a class="button" onclick="playAudio('/android_asset/www/audio/audio.mp3');">Play that audio!</a>
Related
Can anybody please recommend a working example for using cordova media plugin in intel xdk environment to play sound on android phones? I tried this example (http://qnimate.com/create-a-music-player-app-using-intel-xdk/) without luck. The code for that sample is attached. I tried html5 audio tag and Soundjs library but they don't play sound on android native browser. Some online posts suggest the cordova media plugin would be a fix for android browser. However, I googled a lot and still cannot find a working example. Your help will be much appreciated.
<!DOCTYPE html>
<html>
<!--
* Please see the included README.md file for license terms and conditions.
-->
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
#-ms-viewport { width: 100vw ; zoom: 100% ; }
#viewport { width: 100vw ; zoom: 100% ; }
#-ms-viewport { user-zoom: fixed ; }
#viewport { user-zoom: fixed ; }
</style>
<script src="js/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
Play Audio
Pause Playing Audio
Stop Playing Audio
<p id="audio_position"></p>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/cordova-init.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
<script>
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
//http://labs.qnimate.com/sound.mp3
playAudio("http://labs.qnimate.com/sound.mp3");
}
// Audio player
var my_media = null;
var mediaTimer = null;
// Play audio
//
function playAudio(src) {
if (my_media == null) {
// Create Media object from src
my_media = new Media(src, onSuccess, onError);
} // else play current audio
// Play audio. playAudioWhenScreenIsLocked make sure the audio is playing even if screen is locked.
my_media.play({ playAudioWhenScreenIsLocked : true });
// Update my_media position every second
if (mediaTimer == null) {
mediaTimer = setInterval(function() {
// get my_media position
my_media.getCurrentPosition(
// success callback
function(position) {
if (position > -1) {
setAudioPosition((position) + " sec");
}
},
// error callback
function(e) {
console.log("Error getting pos=" + e);
setAudioPosition("Error: " + e);
}
);
}, 1000);
}
}
// Pause audio
//
function pauseAudio() {
if (my_media) {
my_media.pause();
}
}
// Stop audio
//
function stopAudio() {
if (my_media) {
my_media.stop();
}
clearInterval(mediaTimer);
mediaTimer = null;
}
// onSuccess Callback
//
function onSuccess() {
console.log("playAudio():Audio Success");
}
// onError Callback
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
// Set audio position
//
function setAudioPosition(position) {
document.getElementById('audio_position').innerHTML = position;
}
</script>
</body>
</html>
I just can't figure out why my song file is not running either on browser or android emulator following is my code. I have tried every thing on google but can't find the solution I was working through this documentation Media Docementation
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Media Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
playAudio("song/Banjaara.mp3");
}
// Audio player
//
var my_media = null;
var mediaTimer = null;
// Play audio
//
function playAudio(src) {
alert('In Play Audio');
if (my_media == null) {
// Create Media object from src
my_media = new Media(src, onSuccess, onError);
} // else play current audio
// Play audio
my_media.play();
// Update my_media position every second
if (mediaTimer == null) {
mediaTimer = setInterval(function() {
// get my_media position
my_media.getCurrentPosition(
// success callback
function(position) {
if (position > -1) {
setAudioPosition((position) + " sec");
}
},
// error callback
function(e) {
console.log("Error getting pos=" + e);
setAudioPosition("Error: " + e);
}
);
}, 1000);
}
}
// Pause audio
//
function pauseAudio() {
if (my_media) {
my_media.pause();
}
}
// Stop audio
//
function stopAudio() {
if (my_media) {
my_media.stop();
}
clearInterval(mediaTimer);
mediaTimer = null;
}
// onSuccess Callback
//
function onSuccess() {
console.log("playAudio():Audio Success");
}
// onError Callback
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
// Set audio position
//
function setAudioPosition(position) {
document.getElementById('audio_position').innerHTML = position;
}
</script>
</head>
<body>
Play Audio
Pause Playing Audio
Stop Playing Audio
<p id="audio_position"></p>
</body>
</html>
Try to add /android_asset/www/ before file path. As I remember android need absolute path to file. So you code should be like this
playAudio("/android_asset/www/song/Banjaara.mp3");
Ofcourse if song folder is in your main html directory.
I have very simple code like this:
<script type="text/javascript" charset="utf-8">
function playAudio() {
// i try to specificate path to audio file different ways:
var src ="/android_asset/www/track.mp3";
//src = "http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3";
var media = new Media(src, // success callback
function() {
console.log("playAudio():Audio Success");
},
// error callback
function(err) {
console.log("playAudio():Audio Error: "+err);
});
alert('sm'); // alert doesn't work -> so prev func 'new Media' doesn't work too
media.play();
}
</script>
And call of this func is such:
<body onload="playAudio()">
I don't understand - why doesn't it work? Audio file is 'assets/www/track.mp3'
The problem is here
var src ="/android_asset/www/track.mp3";
JS don't know /android_asset/
Only JAVA know about this path only so either use java - JS injection or put this file inside www folder.
I don't understand yet why, but when I try do work with this code:
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function playAudio(url) {
// Play the audio file at url
// http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3
var my_media = new Media(url,
// success callback
function () {
console.log("playAudio():Audio Success");
alert("ok");
},
// error callback
function (err) {
console.log("playAudio():Audio Error: " + err);
alert("oops");
}
);
// Play audio
my_media.play();
}
</script>
And called it in:
Play Audio
Or when I call it this way:
Play Audio
Only on simulator it work! But in web-browser it doesn't work still yet
I have a sample phonegapp application which plays an audio stream(i.e- kalimba.mp3) in background of the app. Playing audio in background is working fine. when I press device home button application is getting minimized but audio playing continues but when I press device back button, the application is getting terminated and so as the background audio.
I have added this line, for not exiting the app on click on back button in my .java file
super.setBooleanProperty("keepRunning", true);
But application is still getting terminated. I want my application be still running when I press back button or home button in my android device and play the audio stream until I close the app from task manager. How to do it?
I am using Android V4.0.0.
here is my code
<html>
<head>
<title>Media Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
playAudio("/android_asset/www/Kalimba.mp3");
}
// Audio player
//
var my_media = null;
var mediaTimer = null;
// Play audio
//
function playAudio(src) {
// Create Media object from src
my_media = new Media(src, onSuccess, onError);
// Play audio
my_media.play();
// Update my_media position every second
if (mediaTimer == null) {
mediaTimer = setInterval(function() {
// get my_media position
my_media.getCurrentPosition(
// success callback
function(position) {
if (position > -1) {
setAudioPosition((position) + " sec");
}
},
// error callback
function(e) {
console.log("Error getting pos=" + e);
setAudioPosition("Error: " + e);
}
);
}, 1000);
}
}
// Pause audio
//
function pauseAudio() {
if (my_media) {
my_media.pause();
}
}
// Stop audio
//
function stopAudio() {
if (my_media) {
my_media.stop();
}
clearInterval(mediaTimer);
mediaTimer = null;
}
// onSuccess Callback
//
function onSuccess() {
console.log("playAudio():Audio Success");
}
// onError Callback
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
// Set audio position
//
function setAudioPosition(position) {
document.getElementById('audio_position').innerHTML = position;
}
function disalert(){
alert("extra functionality is working fine");
}
</script>
</head>
<body>
Play Audio
Pause Playing Audio
Stop Playing Audio
<p id="audio_position"></p>
<button onclick="disalert();">click to interupt</button>
</body>
</html>
//Deviceready function
document.addEventListener('deviceready', function() {
document.addEventListener("backbutton", go_back, false);
}, false);
//Function for back button function
function go_back(){
}
After clicking backbutton your application should goes to background. Try this
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("backbutton", go_back, false);
}
function go_back(){
document.addEventListener("pause", onPause, false);
}
function onPause() {
//Move your application to background.....
}
im trying to record an audio file using Media object in phonegap and then play it. i have no problem recording, but then when i try to play it my app shuts down, both on my emulator and my device. on the logcat it says: "null pointer exception at org.apache.cordova.readyPlayer (AudioPlayer.java)". many thanks to anyone who is willing to help me, it took me a while to realize im completely lost here.
here is the code which i copied from http://docs.phonegap.com/en/2.4.0/cordova_media_media.md.html#media.stopRecord and added .play() after the .stopRecord(). i can add the manifest and activity if needed, i doubt that the problem is there but i could be wrong.
index.html:
<script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Record audio
//
function recordAudio() {
var src = "myrecording.amr";
var mediaRec = new Media(src, onSuccess, onError);
// Record audio
mediaRec.startRecord();
// Stop recording after 10 sec
var recTime = 0;
var recInterval = setInterval(function() {
recTime = recTime + 1;
setAudioPosition(recTime + " sec");
if (recTime >= 10) {
clearInterval(recInterval);
mediaRec.stopRecord();
document.getElementById('audio_position').innerHTML = "finished";
**mediaRec.play();**
}
}, 1000);
}
// Cordova is ready
//
function onDeviceReady() {
recordAudio();
}
// onSuccess Callback
//
function onSuccess() {
console.log("recordAudio():Audio Success");
}
// onError Callback
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
// Set audio position
//
function setAudioPosition(position) {
document.getElementById('audio_position').innerHTML = position;
}
</script>
<p id="media">Recording audio...</p>
<p id="audio_position"></p>
yuval
I found the same issue with Cordova 3.5 (with Media plugin 0.2.11) and Android 4.4. The solution is as described above. Basically something like this should do the trick:
mediaRec.stopRecord();
src = mediaRec.src; // if you don't have src defined anymore
mediaRec.release();
mediaPlay = new Media(src, onSuccess, onError);
mediaPlay.play();
There is no need to create an other Media object to play the previously recorded file. Just do the following - you have to release the media object after recording is stopped:
// variable in global scope
var mediaRec = 0;
// function to record an audio
function recordAudio() {
// create media object for your recording
mediaRec = new Media("phonegap_rec.amr", onMediaRecordSuccess, onMediaRecordError);
// start recording
mediaRec.startRecord();
// recording for 5 seconds
var recTime = 0;
var recInterval = setInterval(function() {
recTime = recTime + 1;
if (recTime >= 5) {
clearInterval(recInterval);
// stop recording after 5 seconds
mediaRec.stopRecord();
// release the media object (THIS IS THE KEY SOLUTION HERE)
mediaRec.release();
}
}, 1000);
}
// function to playback recorded audio
function playRecord() {
// check if the object exists
if (mediaRec) {
// now you can playback the recording
mediaRec.play();
}
}