Sound Effects | FSD Curriculum

Opening Task (20 Minutes)

Scholars will complete opening task on Schoology covering topics learned from python foundations unit
Randomly selected scholar will facilitate review with peers

Howler.js (30 Minutes)

Teacher Guided Demonstration of implementing JS library to play sound effects

How do we add external JS files to our code?
- <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.4/howler.min.js"></script>

Background Audio:

let music = new Howl({
  src: ['bg_music.mp3'],
  autoplay: true, // start music immediately
  loop: true, // loop music endlessly
})

Controllable Audio:

let sound1 = new Howl({
  src: ['sound1.mp3'],
})

let sound2 = new Howl({
  src: ['sound2.mp3'],
})

// Play a sound when user increases their points
function increasePoints() {
  points = points + 1

  sound1.play()
}
// Play a sound when user reaches certain points
function gameLoop() {
  if (points >= 10000) {
    sound2.play()
  }
}

Break (10 Minutes)

Work Time (80 Minutes)

Scholars will work to implement audio and sound effects

Instructors will rotate to assist scholars and monitor

1. Linking the External Script:

First, we need a library that helps us play sounds. We’ll use a popular library called Howler.js. We can’t write the whole library in our code, but we can link to it using an external file.

Add this line inside the <body> section of your HTML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.4/howler.min.js"></script>

This line tells your code to load the Howler.js library from the internet whenever your HTML page opens.

2. Setting Up the Sounds:

Now that Howler.js is loaded, we can use it to play sounds!

Define your sound effects. Create variables like music, sound1, and sound2 and use the new Howl function from Howler.js:

let music = new Howl({
  src: ['bg_music.mp3'],
  autoplay: true, // start music immediately
  loop: true, // loop music endlessly
})

let sound1 = new Howl({
  src: ['sound1.mp3'],
})

let sound2 = new Howl({
  src: ['sound2.mp3'],
})

Inside the curly braces {}, you can set options for each sound:
- src: This is a list of file paths to your sound effects (e.g., ['bg_music.mp3']).
- autoplay: Set to true to play the sound as soon as the code runs (for background music).
- loop: Set to true to make the sound play repeatedly (for background music).

3. Playing Sounds with Functions:

Now you can play your sounds at specific moments in your code!

Create functions to control the sounds:

function increasePoints() {
  points = points + 1
  sound1.play() // Play sound1 when user clicks on button
}

function gameLoop() {
  if (points >= 10000) {
    sound2.play() // Play sound2 when points reach 10000
  }
}

Call these functions whenever you want the sounds to play (e.g., when points increase or a certain level is reached).

Remember:

Make sure your sound files (bg_music.mp3, sound1.mp3, sound2.mp3) are in the same folder as your HTML file or a folder linked correctly in your project.

Cleanup / Dismissal (10 Minutes)

Scholars will submit a benchmark demonstrating completion of adding dynamic points and button

JavaScript ‐ Sound Effects