To Do This Week:
Map Projects Due After the Break on March 20th
Class
AUDIO/VIDEO & JavaScript
- Video and Audio elements
- Audio/Video DOM reference
- Chrome – must interact with page (click something) before video or audio can play
- Look at Examples: av-javascript.zip
video-pair
video-timer | video-timer2
video-menu
video-grid - In-class exercise: Come up with ideas for what create using audio or video and JavaScript
Student Pairings
DOM elements: querySelector & querySelectorAll
Events: timeupdate
Array methods: find()
A/V Methods: addtexttrack
CSS animation: @keyframe
Workshop:
Maps
Final Project ideas
Map Projects
Map Projects List
AUDIO/VIDEO Project (5%)
Due March 27th
In this project you are to use JavaScript to manipulate audio and/or video elements on the page. Come up with an idea for what you want to do, such as:
- karaoke lyrics to a public domain audio or video tack,
- text or commentary to accompany a video,
- page style changes to match video
- an interactive video story or essay
- a work of sound/visual art
Write out the algorithm (the steps of instructions for what you want to do) and use this to begin coding the JavaScript. You may use ChatGPT to assist you with the code, but you are required to make a statement in the head to describe how you used ChatGPT.
Your JavaScript must have detailed comments at each stage of the script describing what the code is doing.
Using Math.random
GENERATIVE/RANDOM – Math.random
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
let x = getRandomInt(0, 20);