I just spent days making a simple buzzer in an iOS app! You push a big red button and it plays a buzzing sound.
Actually, it took about 20 minutes to get it working, but there was a 1-2 second pause after pushing the button before the sound would play, which is unacceptable.
So of course I googled Preload Audio Phonegap and the found a bunch of plugins that claim to do that. Implementing them was time consuming and no matter what I did I just couldn't get them working.
Then I thought: I wonder what will happen if I just play the file once at zero volume to preload it?
Well, folks, that's all it took. I feel so foolish for wasting my own time; maybe this post will help you not waste yours.
function playAudio(src, preload) {
//requires Cordova Core Media plugin
//src is the path to the file in your www folder
// for example, audio/buzzer.mp3
function audioSuccess() {
console.log("[AUDIO]: Created " + src);
}
function audioError(msg) {
console.log("[AUDIO]: Error " + msg);
}
// Create Media object from src
my_media = new Media(src, audioSuccess, audioError);
// Play audio
if (preload === true) {
my_media.setVolume(0);
} else {
my_media.setVolume(1);
}
my_media.play();
}
Unfortunately, even though the preload works great on iOS, it doesn't work on other platforms (some platforms ignore my zero volume setting and just play the file when I try to preload), so I've had to reconfigure the playAudio function. This is what I've settled on for the moment, I hope it posts nicely to comments:
ReplyDeletefunction playAudio(src, preload) {
if (Device.platform === "FirefoxOS" || Device.platform === "Browser" || Device.platform === "WinPhone") {
if (preload === false) {
// create an audio element that can be played in the background
var audio = new Audio();
audio.src = src;
audio.preload = 'auto';
audio.mozAudioChannelType = 'content';
audio.play();
}
} else {
var my_media;
//console.log("playAudio");
function audioSuccess() {
//console.log("[AUDIO]: Success " + src);
}
function audioError(msg) {
//console.log("[AUDIO]: Error " + msg);
}
if (Device.platform !== "Browser") {
//console.log('[AUDIO]: Mobile Device');
// Create Media object from src
if (Device.platform == 'Android') {
src = '/android_asset/www/' + src;
//console.log("Android src: " + src);
}
my_media = new Media(src, audioSuccess, audioError);
// Play audio
if (preload === true) {
//console.log("[AUDIO]: Preloading " + src);
if (Device.platform !== "Android") {
my_media.setVolume('0.0');
my_media.play();
}
} else {
my_media.setVolume('1.0');
my_media.play();
//console.log("[AUDIO]: Playing " + src);
}
} else {
//console.log("[AUDIO]: Skipped");
}
}
}
What a mess! You can run it through http://www.jsbeautifier.org to clean it up.
ReplyDelete