Jump to content

Phaser game not loading music on Firefox (Linux Mint)


Recommended Posts

Hey all, I am learning Phaser by studying a prototype from one of my friends and I have a few problems.
I am using Firefox:


But the music does not load. The file paths are correct, and the music plays on Chrome and on the Windows version of Firefox. Could this be a problem of my browser, am I doing something wrong, or could it be a Phaser bug?

<html>    <head>        <script src="Phaser.js"></script>    </head>    <body>    <script>                       	// get users screen size			var w = window,   				d = document,    			e = d.documentElement,   				g = d.getElementsByTagName('body')[0],    			x = w.innerWidth || e.clientWidth || g.clientWidth,    			y = w.innerHeight|| e.clientHeight|| g.clientHeight;            // get users screen size            //winW = document.body.offsetWidth;            //winH = document.body.offsetHeight;                        // choose a random image for game background            var backgrounds = [                                "images/brown & purple.jpg","images/green & black.jpg",                                 "images/multi.jpg", "images/simple.jpg","images/grey.jpg"                                             ],                background = backgrounds[Math.floor(Math.random() * backgrounds.length)];                              (function () {                            var game = new Phaser.Game(x, y, Phaser.CANVAS, '', { preload: preload, create: create, update:update}); //w, h                                               function preload() {                                        // load and name the game assets                    game.load.image('player',       'images/player1_01.png');                     game.load.image('background',    background);                    game.load.image('part',         'images/particle.png');                    game.load.image('partS',        'images/particle-small.png');                    game.load.image('partM',        'images/particle-med.png');                    game.load.image('orbs',         'images/orb_small.png');                                         // load the games main music                    game.load.audio('EmbryonicW', ['Sounds/Embryonic_Waves.mp3', 'Sounds/Embryonic_Waves.ogg']);                    // load collect chirp sound                    game.load.audio('Randomize5', ['Sounds/Randomize5.mp3']);                                    }                                                // pre create variables and assign them names                var group;                var player;                var score = 0;                var scoreText;                var music;                var chirp;                                                function create() {                    // add music to game world and play                    music = game.add.audio('EmbryonicW',1,true);                    music.play('',0,1,true);                    chirp = game.add.audio('Randomize5');                                        // assign the game assets                    bg = game.add.tileSprite(0, 0, 3040, 1944, 'background');                                        /*set the game worlds size                    game.world.setSize(3040,1944);*/                                        // game.world.setSize no longer is supported                    // no we use                    game.world.setBounds(0, 0, 3040, 1944);                                     // add player to game world                    player = game.add.sprite(game.world.centerX, game.world.centerY, 'player');                    player.name = "player";                    // confines players body to the game world                    player.body.collideWorldBounds=true;                                        // create a group for plaver vs orb collision                    collect = game.add.group();                                        // create a camera that will follow the player                    game.camera.follow(player);                                        // create game score board and set it to center of world set color and font size                    scoreText = game.add.text(game.world.centerX, game.world.centerY, 'score: 0', { font: "70px Arial", fill: "#ffffff", align: "center" });                                        // create a hover / float effect to the score board                    game.add.tween(scoreText)                        .to({ y: game.world.centerY - 7 }, 1000, Phaser.Easing.Linear.None, true)                        .to({ y: game.world.centerY + 7 }, 1000, Phaser.Easing.Linear.None)                        .loop();                                        // randomly place 3 orbs around the game world                    for(var i=0, nb=3; i<nb; i++){                           // add the newley made orbs to collect group                        orbs = collect.create(game.world.randomX,game.world.randomY,'orbs');                        orbs.name = "orbs";                          orbs.body.immovable = true;                                                     }// this is the end of orbs for loop                                                              // create a particle emitter                    emitter = game.add.emitter(player.body.x, player.body.y, 35);                    // set the partcles                    emitter.makeParticles(['part', 'partM' ,'partS']);                                    emitter.minParticleSpeed.setTo(-4, -4);                    emitter.maxParticleSpeed.setTo(100, 100);                    emitter.gravity = 0;                                          emitter.start(false, 500, 10);                                                             // set this to null so the defult cursor can be set using css or js                    this.game.stage.canvas.style.cursor = null;                }                                // this is the main game loop                function update() {                    // treat the Sprites x/y coordinates as being the middle of the player                    player.anchor.x = 0.5;	                player.anchor.y = 0.5;                    spin = 15;                                        /*// set emmiter position to the location of the player                    // this player.body is no longer needed                    emitter.x = player.body.x;                    emitter.y = player.body.y;*/                    // now we just use                    emitter.x = player.x;                    emitter.y = player.y;                                        // set up collison rules, the first object assigned will become obj1                    // the second object will become obj2                    game.physics.collide(player, collect, collisionHandler, null, this);                                        // this will cause the orbs to follow the player                     // game.physics.moveTowardsObject(orbs, player, 100);                                                            // if mouse button is pressed down then player spite should follow the mouse                    if (game.input.mousePointer.isDown)                        {                        //  moveTowardsMouse is no longer supported                          // game.physics.moveTowardsMouse(player, 200);                        //now we use                        game.physics.moveToPointer(player, 200);                        //	200 is the speed player will move towards the mouse                                                                            // rotate the player                        player.angle += spin;                            // this turns the emitter on if the mouse is pressed                        emitter.exists = true;                                                  if (Phaser.Rectangle.contains(player.body, game.input.x, game.input.y))                        {//	if it's overlapping the mouse, don't move any more                        player.body.velocity.setTo(0, 0);                        }}                    else                        {                        player.body.velocity.setTo(0, 0);                        // rotate the player at a slower speed                        player.angle += 2;                                                // this turn the emitter off if no keys are pressed                        emitter.exists = false;                               }                }                                        function collisionHandler (obj1, obj2) {                                   // if a collision occurs betewn the player and group                        // kill the collided orb and spawn a new one randomly                        // without .kill when the player bumps into another obj the obj will just roll away                        obj2.kill();                        collect.create(game.world.randomX,game.world.randomY,'orbs');                        // increase and update score if player collects orb                        score += 1;                        // i no longer need to use .text now you can just add your Name.content to access text                        //scoreText.text = 'score: ' + score;                        scoreText.content = 'score: ' + score;                                                // play chirp sound one time, if player collects orb                        chirp.play();                                                         }                        })();                    </script>     </body></html><style>    canvas{        cursor:url(images/cursor.png);      }</style>
Link to comment
Share on other sites

The path is correct. I also forgot to mention that the example works on Linux Chrome when I use the --allow-file-access-from-files flag to launch it, so I assume the paths must be correct, otherwise I would have the same problem on Chrome as well.


Could you or someone else test the code on some Firefox version running on Linux?

Here is a zip file with everything: https://dl.dropboxusercontent.com/u/785815/phaser%20tut.zip


There are two files, index.html and index_orig.html, they are the same code with a minor difference (one uses the entire screen while the other does not) and they both share the same problem.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...