Adding Background Music and Sound Effects to your Kaplay Game

Adding an audio to your game can greatly enhance the player's experience. Kaplay simplifies this process by providing the methods to load, play, and control sound effects and background music. Let’s dive into how you can use Kaplay's powerful audio features to bring your game to life.

 

Loading Sounds

To use audio files in your game, you first need to load them using the loadSound() function.

This function requires two parameters:

a.   the name of the sound and

b.   the file path.

 

Here's an example,

const k = kaplay();
k.loadSound("jumpSound", "sounds/jump.mp3");

 

Now, the sound is ready to be played whenever needed in the game.

 

Playing Sounds

The play() function allows you to play any sound you've loaded. It supports various options through the AudioPlayOpt interface, making it easy to customize playback.

 

Here's how you can use it.

 

k.play("jumpSound", {
    volume: 0.5, // Plays the sound at 50% volume
    speed: 1.5,  // Plays the sound 1.5x faster
    loop: true,  // Loops the sound continuously
});

 

Advanced Sound Options

The AudioPlayOpt interface offers flexibility for sound customization. Here's a breakdown of its properties:

 

Property	Description	Example
paused	Starts audio paused if set to true.	{ paused: true }
loop	Repeats the sound after it ends.	{ loop: true }
volume	Sets audio volume (0.0 to 1.0).	{ volume: 0.75 }
speed	Adjusts playback speed (1.0 = normal).	{ speed: 2.0 }
detune	Changes pitch (100 = 1 semitone).	{ detune: 200 }
seek	Starts playback from a specific time (in seconds).	{ seek: 5 }
pan	Adjusts stereo position (-1.0 to 1.0).	{ pan: -0.5 }

 

Stopping Sounds

Every time you play a sound using the play() function, it returns an AudioPlay object. You can use this object to stop the sound or perform other actions.

 

For example,

const sound = k.play("jumpSound");
sound.stop(); // Stops the sound

 

Randomizing Sounds

Kaplay supports creative sound manipulation, such as randomizing pitch for dynamic effects. Here's an example:

k.play("noteC", {
    detune: Math.floor(Math.random() * 12) * 100, // Randomly detunes the sound
});

By mastering these audio features, you can transform your game into a more engaging experience. Whether it's adding a subtle background track or dynamic sound effects, Kaplay gives you the tools to create rich audio interactions.

 

Follow below step-by-step procedure to build a working application.

 

Step 1: Create a KAPLAY project add-sounds by executing below command.

 

npx create-kaplay add-sounds

  Upon successful execution of above command, you can see a project structure looks like below. 

 

Step 2: Update src/main.js file like below.

 

main.js

import kaplay from "kaplay";

// Initialize Kaplay
const k = kaplay();

// Set gravity for the game world
k.setGravity(1000);

// Load assets
k.loadRoot("./"); // Base path for assets (useful for publishing)
k.loadSprite("bean", "sprites/bean.png"); // Load the player sprite
k.loadSound("jumpSound", "sounds/jump.mp3"); // Load the jump sound

// Create the player object
const player = k.add([
  k.pos(120, 80), // Initial position
  k.sprite("bean"), // Use the "bean" sprite
  k.body(), // Enable physics
  k.area(), // Define collision area
]);

// Function to handle player jump
const handleJump = () => {
  k.play("jumpSound", {
    volume: 0.5, // Play sound at 50% volume
    speed: 1.5, // Play sound at 1.5x speed
  });
  player.jump(400); // Make the player jump
};

// Function to move the player
const handleMovement = (direction) => {
  const speed = 300; // Set the movement speed
  player.move(direction * speed, 0);
};

// Bind keys to actions
player.onKeyPress("space", handleJump); // Jump on spacebar press
player.onKeyDown("left", () => handleMovement(-1)); // Move left
player.onKeyDown("right", () => handleMovement(1)); // Move right

// Add the ground to the game world
k.add([
  k.rect(k.width(), 100), // Ground width spans the game width
  k.pos(0, 700), // Position at the bottom of the screen
  k.area(), // Define collision area
  k.outline(3), // Add an outline for visibility
  k.color(109, 99, 19), // Brown-like color for the ground
  k.body({ isStatic: true }), // Make the ground static
]);

// Notes:
// - Use `sound.stop()` to stop any playing sound if needed.

 

Step 3: Create sounds folder in public folder and add jump.mp3 file to it. You can download this file from this location.

 

Step 4: Execute below commands from project root folder to run the Application.

npm install
npm run dev

 

Launch the url ‘http://localhost:3001/’ in a browser to play with the Application.

 

You can see a demo recording here (https://www.youtube.com/watch?v=JsTjaMT7oxw)

 

You can download the Application from this link.

Previous                                                    Next                                                    Home