WEEK 5: Audio/Video API
(February 3 & 5)

To Do This Week:

Start Javascript Codecademy #2 (DUE February 19)

GitHub Co-pilot is now a free – you need a GitHub repository 

Research Paper 

Learning JavaScript with AI: Thinking Like a Coder Before Writing Code

This is your chance to co-author a real academic paper, sharing your perspective on learning with AI. Your experience—whether positive, negative, or mixed—matters. We can explore what AI can and can’t do in learning programming.

To track your learning, we’ll be using AI not just for coding but for conversation and reflection. Midway through the course and at the end, you’ll have a guided chat where you’ll reflect on what’s working, what’s challenging, and how your understanding of JavaScript is evolving. These chats will generate summaries that you’ll revise into short essays, and together, we will turn this into a paper about AI-assisted learning.

>>LINK to Google Doc

Review

Loops: for loop, while loop, do/while loop

Iterating through array: forEach() / map()

let fruits = ["apple", "strawberry", "banana"];

//forEach() with arrow function
fruits.forEach((fruit, index, array) => {
    if (fruit.endsWith("y")) {
      array[index] = fruit.slice(0, -1) + "ies";
    } else {
    array[index] = fruit + "s";
}
});
console.log(fruits); // ["apples", "strawberries", "bananas"] 
let fruits = ["apple", "strawberry", "banana"];

let pluralFruits = fruits.map(fruit => {
  if (fruit.endsWith("y")) {
    return fruit.slice(0, -1) + "ies";
  } else {
  return fruit + "s";
}
});

console.log(fruits); // ["apple", "strawberry", "banana"] (unchanged)
console.log(pluralFruits); // ["apples", "strawberries", "bananas"]

Complex Example

Student Pairings

Inclass Coding

New Stuff

Random Numbers:

Generate a random number in a range:

// Random generator
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

getRandomInt(5, 10);

Audio/Video Element & JavaScript:

Important notes:

Examples:

In-class Exercise

Code samples

Jump to a Specific Time:

videoElement.currentTime = 10; // Jumps to 10 seconds

Sync Audio and Video (or Multiple Videos)

audioElement.currentTime = videoElement.currentTime;

Slow Down or Speed Up Playback

videoElement.playbackRate = 2.0; // Double speed  videoElement.playbackRate = 0.5; // Half speed

Trigger Events at Specific Timestamps

videoElement.addEventListener("timeupdate", () => { if (videoElement.currentTime > 5 && videoElement.currentTime < 6) { console.log("Triggered at 5 seconds!"); } });

Loop Only a Certain Section of the Video

videoElement.addEventListener("timeupdate", () => { if (videoElement.currentTime > 10) { videoElement.currentTime = 5; // Loops back  } });
Play/Pause the Video
videoElement.play(); videoElement.pause();

Restart Video from the Beginning

videoElement.currentTime = 0; videoElement.play();

Toggle Play/Pause with One Button

if (videoElement.paused) { videoElement.play(); } else { videoElement.pause(); }

Mute/Unmute Video

videoElement.muted = true; // Mute  videoElement.muted = false; // Unmute

Play Video in a Loop

videoElement.loop = true;

Timestamps as Object Literal

const lyrics = [ 
{ time: 0, text: "First line of the song" }, 
{ time: 5, text: "Second line of the song" }
];

 

 

Audio/Video Challenge

Student Pairings

Select One of the Challenges below. You are to use these in a web page with Javascript. Pick one of the challenges and create a solution by thinking through step by step what you want the script to do. Use JavaScript language in your steps.The focus is on Javascript not on design with CSS.

Download this ZIP folder for sample video/audio files.

Alien guy ZIP folder

Main Concepts: Audio/Video elements, DOM manipulation, event listeners, and time-based updates.

 

1. Video & Audio Tag Filter (Sort & Display by Category)

Challenge: Create a system where users can filter and display audio or video clips based on categories or tags (e.g., “spooky,” “happy” “sad”).
Users select a tag, and only matching media clips appear on the page.

When the user selects a category, the script dynamically updates the display, filtering the video or audio elements accordingly.

Could be used for media libraries, educational video sorting, or interactive storytelling experiences.

2. Custom Video Player with Interactive Features

Challenge: Build a custom video player with additional features beyond the basic play/pause buttons.
Allow users to control playback, change speed, apply effects, or modify audio/video settings dynamically.

The player could include:

  • Speed controls (slow motion, fast-forward).
  • Visual effects (CSS filters, color shifts, glitch effects).
  • Custom buttons for unique interactions (e.g., “Invert Colors,” “Echo Audio”).

Could be used to create a uniquely styled video experience, an interactive film, or a themed media player.

3. Time & Scroll-Based Interactive Triggers

Challenge: Create an interactive experience where videos and/or sounds trigger events based on time in a video or scrolling on a webpage.

The script detects either the user’s scroll position or specific timestamps in a video/audio file, then modifies HTML elements, plays sounds, or adds animations dynamically.

Could be used for interactive lectures, storytelling, or music-driven visual effects.

4. Video Audio Remix (Swap, Mix, or Manipulate Sounds)

Challenge: Allow users to swap background audio tracks for different moods while watching the same video.
The script should sync the video with different audio files, letting users change the vibe on the fly.

Users can pick between multiple audio tracks (e.g., “Lo-fi Chill,” “Synthwave,” “Epic Orchestral”) and swap them in real time.

Could be used for remixing experiences, interactive film scoring, or dynamic sound experimentation.

5. Video Memory Challenge (What Did You See?)

Challenge: Create a memory game where users watch a short video clip that then disappears. Afterward, they must recall and name objects or details from the video.

The script plays the video for a set time, then hides it and prompts the user with multiple-choice questions or an input field to test their memory.

Could be used for observation training, quick-recall challenges, or educational memory tests.