Cordova 3.4.0, how to Media.setVolume()? - javascript

I've added sounds to my Cordova app (3.4.0), but I can't set the volume unless I play the sound.
Here is the code to make it works :
var myMedia = new Media("file:///android_asset/www/sounds/button.mp3");
myMedia.play();
myMedia.stop();
myMedia.setVolume("0.2");
I tried the below code, but it isn't working too :
var myMedia = new Media("file:///android_asset/www/sounds/button.mp3", function() {
this.setVolume("0.5");
});
Do you have another clean method ?

I set the volume to 0 before playing then incrementally increase it to the required volume. But you shouldn't need to bother with the fade in. Something like this should work:
mediaPlayer = new Media(localSoundsPath + sound_file_name);
mediaPlayer.setVolume(0);
mediaPlayer.play();
mediaPlayer.setVolume(0.2);

Related

Cocos2d ClippingNode and Alphathreshold in Javascript / Browser

i am trying tp use a png as a mask in Cocos2d-JS
like so:
this.mask=cc.Sprite.create(cache.getSpriteFrame("bar_mask"));
this.maskedFill = cc.ClippingNode.create(this.mask);
this.maskedFill.setAlphaThreshold(0.5);
But it does not work ...
I found in other posts, that I have to enable the stencil buffer like
CCSetupDepthFormat: #GL_DEPTH24_STENCIL8_OES
But I have no idea how / where to do that in Cocos2d-JS
can anyone help?
Thanks!
It works for me without any additional depthFormat settings.
I'm using single-file engine cocos2d-js-v3.7.js
Here's the minimal code (hope it helps):
var game = cc.Layer.extend({
init:function () {
this._super();
backgroundLayer = cc.LayerColor.create(new cc.Color(40,40,40,255), 320, 480);
var target = cc.Sprite.create("resources/doge.png"); /*child to clip*/
var mask = cc.Sprite.create("resources/doge-mask.png"); /*mask*/
var maskedFill = new cc.ClippingNode(mask);
maskedFill.setAlphaThreshold(0.9);
maskedFill.addChild(target);
maskedFill.setPosition(144, 224);
backgroundLayer.addChild(maskedFill,0);
this.addChild(backgroundLayer);
}
});

CreateJS FPS drop when calling stage.update

I'm making a game using CreateJS. On desktop my FPS is good but when I try to play this game on mobile (for example : iPhone 4) the FPS drops seriously.
I'm trying to figure out why but
Some code
My Canvas
<canvas id="gameCanvas"></canvas>
Setup
this.canvas = "gameCanvas";
this.stage = new createjs.Stage(this.canvas);
var context = this.stage.canvas.getContext("2d");
context.imageSmoothingEnabled = false;
createjs.Ticker.setFPS(30);
this.gameLoopBind = this.gameLoop.bind(this);
createjs.Ticker.addEventListener('tick', this.gameLoopBind);
GameLoop
// some extra code
this.stage.update();
When I comment the code 'this.stage.update()' my FPS on mobile/tablet is good...
I've no idea what I'm doing wrong...
EXTRA CODE
Play the game here => f.cowb.eu/mora/chick-ins
Gameloop Function
Game.prototype.gameLoop = function (e) {
if (this.running) {
this.timer++;
this.timer2++;
if (this.timer2 > 30) {
if (this.lastSnack + this.timeBewteen < this.stopwatch.seconds) {
var height = (this.topSnack) ? 150 : 300;
this.lastSnack = this.stopwatch.seconds;
new Snack(this, this.timer, height);
this.topSnack = this.topSnack ? false : true;
}
if (this.timer > (this.lastPostive + 300)) {
this.lastPostive = this.timer;
publisher.publish('showMessage',
this.positiveImages[Math.floor(Math.random() * this.positiveImages.length)],
common.lang,
'right');
}
this.timer2 = 0;
}
}
this.stage.update();
};
New Snack
You can find the code for creating a new snack here => http://jsfiddle.net/9ofpqq3z/
Here we create a new snack and animate it.
From looking at the architecture of the game, I would suggest that you draw the game elements on separate canvases as opposed to the way you have it right now where everything is on one canvas.
Place the TV parts that don't get redrawn often (or at all) on one canvas, and then the moving elements on a separate canvas.
That should help bring the frame rate up.
Also, you can take a look at the following set of slides on how to improve performance on mobile devices when using the canvas:
http://www.slideshare.net/DavidGoemans/html5-performance-optimization

howler.js play sound at a specific position

Hi I would like to start playing a sound on a scecific position. The api said that I can use .pos but it doesn't start where I would like it to start
<p>This sound last 13 sec.</p>
<h1>Audio</h1>
<h3>2:00</h3>
<h3>3:00</h3>
<h3>4:00</h3>
<h3>10:00</h3>
My javascript.
var son = [false, "0000"]
sound = new Howl({
urls: ['http://goldfirestudios.com/proj/howlerjs/sound.mp3'],
autoplay: false
});
function playSequence(events,valeur){
//if there is no sound play the track at a certain position
var playSound = function(valeur){
if(son[0] == true){
sound.stop();
son[0] = false;
}else{
son[0] = true;
sound.pos = parseInt(valeur[0]); // position at 2 sec
sound.play();
}
}
playSound(valeur);
}
//play the sound on click
$("a.val2").on('click', function(events){
valeur = $(this).text();
playSequence(events, valeur);
});
pos is a method, not a property. For best compatibility, you would want to play it like follows (fixed in the 2.0 beta branch):
sound.play(function(id){
sound.pos(valeur[0], id);
});
Here's how you would do it in 2.0 (check 2.0 branch at https://github.com/goldfire/howler.js):
var id = sound.play();
sound.seek(valeur[0], id);
If you are only playing one sound then there is no need to set the id, but it is best practice to change the position after playing when using 1.1.x.
I was having issues playing a sound at a specific time as well, it worked on the first play of a sound, but if I tried to go back and play that sound again, using seek immediately wouldn't work.
I just figured out a way to consistently make it work using howler v2:
function playSoundAtPosition(sound, pos) {
sound.once("play", () => {
sound.seek(pos);
});
sound.play();
}
This makes use of the callback method once which fires the callback to the play event and then immediately removes itself. I believe this helps because it waits until it actually knows the sound is playing before seeking to the desired time.
I know this is an old question but hopefully it's useful to someone if they come across this!
You can use Sprites!
var sound = new Howl({
src: ['sounds.webm', 'sounds.mp3'],
sprite: {
blast: [0, 3000],
laser: [4000, 1000],
winner: [6000, 5000]
}
});
// Shoot the laser!
sound.play('laser');
:)
I found it at this link How to Create and use Sprites

Banner rotator giving "loading" message in browsers

I have this banner rotator function:
var banners = ['../Graphics/adv/1.gif','../Graphics/adv/2.jpg']; //here put location of the files to display
var loadedImgSrc = null;
function loadBanner() {
var liczba = Math.floor(Math.random()*banners.length);
loadedImgSrc = banners[liczba];
var objImage = new Image();
objImage.onLoad=imagesLoaded();
objImage.src = banners[liczba];
}
function imagesLoaded() {
document.getElementById('ad_banner').src = loadedImgSrc;
startRotator();
}
function startRotator() {
setTimeout('loadBanner()',8000); //here, set up interval in miliseconds 1000ms -> 1s
}
This is giving a "loading" message, as if the browsers are continuously loading.
Does anybody have a simple banner-rotator to share?
Or does anybody know whats wrong with this one?
Thanks
Take a look at this custom animated banner made with jQuery. There are both horizontal and vertical versions.

Hide overflow on phaser

What I'm trying to do sounds pretty simple, but I can't do it.
I am building a game using Phaser, and on the top bar of my game want to print the picture of the player inside a circle. But I can't find a way to do this.
I find how to do a circle :
this.mask = this.game.add.graphics(0,0);
this.mask.drawCircle(50,50,50);
But I can't find a way to fill it with a picture, without the picture overflowing the circle.
Phaser has support for using an image to mask another.
See the official Alpha Mask example for an example with two images. Using an image for the mask might be the recommended method.
I've also created a JSFiddle that shows how to use a created circle:
// Create our 'main' state that will contain the game
var mainState = {
preload: function() {
// This function will be executed at the beginning
// That's where we load the images and sounds
this.load.crossOrigin = 'anonymous';
this.load.image('baseImage', 'https://placeholder.baker.com/200');
},
create: function() {
this.baseImage = this.game.add.sprite(this.world.centerX, this.world.centerY * .5, 'baseImage');
this.baseImage.anchor.setTo(0.5);
this.mask = game.add.bitmapData(this.baseImage.width, this.baseImage.height);
this.mask.circle(this.world.centerX, this.world.centerY * .5, 100, 'rgb(0,200,0)');
this.bmd = this.game.make.bitmapData(200, 200);
this.bmd.alphaMask('baseImage', this.mask);
this.game.add.image(this.game.world.centerX, this.world.centerY * 1.5, this.bmd).anchor.set(0.5);
},
};
// Initialize Phaser, and create a game
var game = new Phaser.Game(200, 400);
// Add the 'mainState' and call it 'main'
game.state.add('main', mainState);
// Start the state to actually start the game
game.state.start('main');

Categories