DTC 477: Advanced Web Design & Development

Week 5: Audio/Video API

To Do This Week:

Get GitHub Account & Download GitHub Desktop

Watch this video for assistance: Git, GitHub, & GitHub Desktop for beginners

  1. Sign-up or Sign-in to a GitHub account.
  2. Install & Sign In Download GitHub Desktop and install it. Sign in with your GitHub account.
  3. Create a Repository Go to File → New Repository. Choose a name like "DTC477" and a local folder that just holds your class projects. Click Create Repository.
  4. Add Project Files You will be adding all class project folders and files to this local folder (you will also upload projects to your server!). GitHub Desktop will detect automatically all new folders and files in this local folder you set up. For now, add a test file to this local folder.
  5. Commit Changes After adding a file or folder, review the changes in GitHub Desktop. Write a short summary message (e.g., “Initial commit”). Click Commit to main.
  6. Publish to GitHub Click Publish Repository. Choose Public or Private. Click Publish. Your project is now on GitHub.com.
  7. Make & Push Updates Edit files as needed. Return to GitHub Desktop, write a commit message, commit, then click Push origin to update GitHub.
  8. Check on GitHub.com Go to your GitHub repository online. You’ll see your files and commit history.
GitHub Co-pilot is now a free - you need a GitHub repository 

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";
}
});

Reminders

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:

Code samples

Jump to a specific time.

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

Sync audio to the current video time (works for multiple media elements too).

audioElement.currentTime = videoElement.currentTime;

Slow down or speed up playback.

videoElement.playbackRate = 2.0; // double speed
videoElement.playbackRate = 0.5; // half speed

Trigger code when the video passes certain timestamps.

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

Loop only a specific section (from 5s to 10s).

videoElement.addEventListener("timeupdate", function () {
  if (videoElement.currentTime > 10) {
    videoElement.currentTime = 5; // loop back
  }
});

Play and pause the video.

videoElement.play();
videoElement.pause();

Restart from the beginning and play.

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

Toggle play/pause with one button.

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

Mute and unmute.

videoElement.muted = true;  // mute
videoElement.muted = false; // unmute

Play the video in a loop.

videoElement.loop = true;

Store timestamps and labels as objects (e.g., for lyrics or captions).

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

Audio/Video Challenge

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:

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.

Objects and Object Literals

Objects are variables that store properties and methods.

JSON (JavaScript Object Notation) is a format for storing and exchanging data. It looks similar to a JavaScript object and behaves in a comparable way.

Simple Object Literal


// JavaScript Object Literal Example
const person = {
    firstName: "Margie",
    lastName: "Pepper",
    age: 50,
    eyeColor: "brown",
};

console.log(`Hi, ${person.firstName}`);

Object Literal with "this"



// JavaScript Object Literal Example
const person = {
    firstName: "Henry",
    lastName: "Smith",
    age: 24,
    eyeColor: "green",
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
};

console.log(`Hi, ${person.fullName()}`);

Person Object Constructor


// JavaScript Object Constructor Example
function Person(firstName, lastName, age, eyeColor) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.eyeColor = eyeColor;
    this.fullName = function() {
        return `${this.firstName} ${this.lastName}`;
    };
}

// Create new Person objects
const person1 = new Person("Alice", "Brown", 32, "blue");
const person2 = new Person("Carlos", "Diaz", 28, "hazel");

console.log(person1.fullName()); // "Alice Brown"
console.log(person2.fullName()); // "Carlos Diaz"

Learn more about JSON and objects:

GitHub Introduction

GitHub Intro GitHub Desktop: Getting Started
  1. Install & Sign In Download GitHub Desktop and install it. Sign in with your GitHub account.
  2. Create a Repository Go to File → New Repository. Choose a name and local folder. Optionally add a README and .gitignore. Click Create Repository.
  3. Add or Create Project Files Place existing project files into the local folder, or create new files there. GitHub Desktop will detect them automatically.
  4. Commit Changes Review the changes in GitHub Desktop. Write a short summary message (e.g., “Initial commit”). Click Commit to main.
  5. Publish to GitHub Click Publish Repository. Choose Public or Private. Click Publish. Your project is now on GitHub.com.
  6. Make & Push Updates Edit files as needed. Return to GitHub Desktop, write a commit message, commit, then click Push origin to update GitHub.
  7. Check on GitHub.com Go to your GitHub repository online. You’ll see your files and commit history.
Git Terms from Github Glossary