Here is the discussion forum for this part of the course. Please either post your comments/observations/questions or share your creations.
What other examples would need tracks to be created on the fly?
What tools can you find on the Web, for updating a document's content in-sync with a video? Are these tools any easier to use than the techniques presented here?
Invent something fun with audio sprites! A small graphic animation with sound effects? A concerto with cats and dogs? Look for example at this example written by a student who followed this course:
HTML code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>playing sound when the square hits the edges</title>
<link rel="stylesheet" href="css\animationSound.css" />
<script src="js\animationSound.js"></script>
</head>
<body>
<main id="main">
<header id="header">
<h1>Simple animation with sound</h1>
</header>
<canvas id="myCanvas" width="500" height="500">
</canvas>
<aside id="aside">
<header>
<h2>
<b>Description</b>
</h2>
<p>
This is a simple animation that plays an arbitrary
animal sound when the square hits the canvas's border. To play different sounds
i used the addTextTrack method to add a textTrack, then used the VTTCue
class to create cues and added the cues to the textTrack that i added to the audio.(view the js code to see how it all works!)
</p>
<p>
<b>Note: Since the autoplay policy has changed you have to interact with your browser window as least once eg. by clicking a mouse button, if you want to hear the sound(s).
</b>
<br/>
Thus far this code doesn't work on microsoft edge (the VTTCue constructor is not supported). Use one of the other major browsers to see it in action.
</p>
</header>
</aside>
<footer id="footer">
©2020
created by the <em>nerd</em>
</footer>
</main>
</body>
</html>
CSS code:
#myCanvas {
display:flex;
float:left;
background-color:black;
border:2px solid green;
border-radius:.2em;
clear:both;
}
#aside {
display:flex;
width:30%;
height:500px;
padding-left:15px;
border: 2px solid green;
}
body{
background-color:antiquewhite;
}
#header,h2 {
text-align:center;
text-decoration:underline;
}
p {
font-family:'Sitka Banner';
}
#footer {
font-weight: bold;
color: black;
text-align: center;
width:100%;
clear: both;
padding-top: 10px;
}
p b {
color:magenta;
}
JS code:
let speedX = 3,speedY=4,asideH, canvas, ctx, width, height, size = 50, x = y = 100;
let x1 = y1 = 0;
let audio, track, cues, endTime, sounds;
let ids = ['purr', 'meow', 'bark', 'baa', 'moo', 'bleat', 'woof', 'cluck', 'mew'];
let squareColors = ['blue', 'green', 'red','pink', 'magenta','cyan', 'khaki','indigo','yellow'];
var idIncr = 0;
window.onload = function () {
canvas = document.querySelector("#myCanvas");
ctx = canvas.getContext('2d');
width = canvas.width;
height = canvas.height;
asideH = height;
var aside = document.querySelector("#aside");
aside.style.height = asideH;
audio = new Audio("https://mainline.i3s.unice.fr/mooc/animalSounds.mp3");
audio.addEventListener('loadedmetadata', function () {
track = audio.addTextTrack('metadata', 'animal sounds', 'en');
track.mode = 'hidden';
if (typeof track.getCueById !== 'function') {
track.getCueById = function (id) {
cues = track.cues;
for (var i = 0; i != track.cues.length; ++i) {
if (cues[i].id == id) {
return cues[i];
}
}
};
}
sounds = [{
id: "purr",
startTime: 0.200,
endTime: 1.800
}, {
id: "meow",
startTime: 2.300,
endTime: 3.300
}, {
id: "bark",
startTime: 3.900,
endTime: 4.300
}, {
id: "baa",
startTime: 5.000,
endTime: 5.800
}, {
id: "moo",
startTime: 6.500,
endTime: 8.200
}, {
id: "bleat",
startTime: 8.500,
endTime: 9.400
}, {
id: "woof",
startTime: 9.900,
endTime: 10.400
}, {
id: "cluck",
startTime: 11.100,
endTime: 13.400
}, {
id: "mew",
startTime: 13.800,
endTime: 15.600
}];
for (var i = 0; i !== sounds.length; ++i) {
var sound = sounds[i];
var cue = new VTTCue(sound.startTime, sound.endTime, sound.id);
cue.id = sound.id;
track.addCue(cue);
}
audio.addEventListener('timeupdate', function (event) {
if (event.target.currentTime > endTime)
event.target.pause();
});
requestAnimationFrame(animate);
});
}
function animate() {
// clear canvas
ctx.clearRect(0, 0, width, height);
// save and translate context
ctx.save();
ctx.translate(0, 0);
ctx.strokeStyle = 'indigo';
ctx.fillStyle = squareColors[idIncr];
ctx.lineWidth = 5;
ctx.fillRect(x, y, size, size);
ctx.strokeRect(x, y, size, size);
x += speedX;
y += speedY;
if (x + size > width || x < 0) {
playSound(ids[idIncr]);
speedX *= -1;
}
if (y < 0 || y + size > height) {
speedY *= -1;
playSound(ids[idIncr])
}
ctx.restore();
requestAnimationFrame(animate);
}
function playSound(id) {
var cue = track.getCueById(id);
audio.currentTime = cue.startTime;
endTime = cue.endTime;
audio.play();
if (idIncr < ids.length)
idIncr += 1;
if (idIncr === ids.length)
idIncr = 0;
}
Create an interactive page that will display information related to the video being played. We showed a simple example with Wikipedia pages and a Google map, but you can do better than that, maybe use OpenStreetMap (that is free)! Be creative :-)