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

To Do This Week:

Start Javascript Codecademy #2 (DUE February 19)

---

View Interactive Websites

 

Review

 

New Stuff

• How to think inside the browser…
• External scripts: <script src="myScript.js"></script>
• Inserting HTML content: document.querySelector("#demo").innerHTML = "Paragraph changed."
• Style property: Manipulating CSS with JS
• CSS animation and JS: add/remove classes
• setTimeout, setInterval: Timed execution
• window.scrollTo(): Scrolling control
• Graphic elements: progress bar, range slider, flip card
• reload page: location.href = “https://www.mypage.com”;

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:

• Chrome requires user interaction (e.g., a click) before video or audio can play.
• Learn more about Video and Audio elements.
• Audio/Video DOM reference
• fullscreen video, responsive videos
• karaoke timestamps :

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

Examples:

• Video Pair
• Video Timer
• Video Menu

---

In-class Exercise

Audio/Video API

Student Pairings

Project: Build a page with a video player and synced comments. Students use the Audio/Video API and timeupdate events to change text commentary as the video plays. 

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