Media API - Exercise

Contact Us or call 1-877-932-8228
Media API - Exercise

Media API

Duration: 20 to 30 minutes.

In this exercise, you will add a feature to the preceding demo that allows the user to jump to the beginning to a stanza.

  1. Open html5-audio-and-video/Exercises/audio-javascript.html in your editor.
  2. Notice that each <p> tag now has an id of the format pos- and a number. This number represents the time (in seconds) at which this stanza begins.
  3. You will add JavaScript code to insert working play and pause images (found in the Images folder) at the beginning of each stanza, like this: Play and Pause Images
    • When the play image is clicked, the audio should jump to that stanza and play.
    • When the pause image is clicked, the audio should pause.

Challenge

  1. Add code to the reportTime() function so that the stanza currently being played is given the "highlight" class (already defined in style.css.
  2. Make sure to remove the class when the stanza is no longer being played.

Solution:

html5-audio-and-video/Solutions/audio-javascript.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
<script>
	var playTimer;
	
	window.addEventListener("load",function() {
		document.getElementById("cmd-play").addEventListener("click",play,false);
		document.getElementById("cmd-pause").addEventListener("click",pause,false);
		document.getElementById("cmd-restart").addEventListener("click",restart,false);
		var stanzas = document.getElementById("poem").getElementsByTagName("p");
		for (var i=0; i<stanzas.length; ++i) {
			insertPlayButton(stanzas[i]);
		}
	},false);
	
	function play() {
		document.getElementById("my-audio").play();
		reportTime();
	}
	
	function reportTime() {
		var curTime = document.getElementById("my-audio").currentTime;
		document.getElementById("play-time").innerHTML=Math.round(curTime);
		playTimer = setTimeout(reportTime,500);
	}
	
	function pause() {
		document.getElementById("my-audio").pause();
		if (typeof playTimer != "undefined") {
			clearTimeout(playTimer);	
		}	
	}
	
	function restart() {
		document.getElementById("my-audio").currentTime=0;
		play();	
	}
	
	function insertPlayButton(stanza) {
		var pos=stanza.id.split("-")[1];
		var startHTML = stanza.innerHTML;
		var buttonHTML = "<img src='Images/play.gif' title='Play' onclick='jumpTo(" + pos + ")'><img src='Images/pause.gif' title='Pause' onclick='pause()'>";
		stanza.innerHTML=buttonHTML+startHTML;
	}
	
	function jumpTo(pos) {
		document.getElementById("my-audio").currentTime=pos;
		play();	
	}
</script>
---- C O D E   O M I T T E D ----

Challenge Solution:

html5-audio-and-video/Solutions/audio-javascript-challenge.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----

	function reportTime() {
		//get the current time from the audio element
		var curTime = document.getElementById("my-audio").currentTime;
		//display the current time (rounded) in the "play-time" element
		document.getElementById("play-time").innerHTML=Math.round(curTime);
		//update the current time in 1/2 second (500 ms). This is done by having the function call itself.
		playTimer = setTimeout(reportTime,500);
		//get all the stanzas in the poem (each stanza is a pargraph)
		var stanzas = document.getElementById("poem").getElementsByTagName("p");
		var pos;
		var stanzaFound=false;
		//loop all the stanzas (all the <p> tags)
		for (var i=stanzas.length-1; i>=0; --i) {
			//set the stanza's position in the loop's iteration
			pos=stanzas[i].id.split("-")[1];
			//if the posistion is less than or equal to the current time and the stanza has not yet been found, then...
			if (pos <= curTime && !stanzaFound) {
				//first, set stanzaFound to true
				stanzaFound=true;
				//then highlight the stanza by adding the css class "highlight", which is defined in style.css
				stanzas[i].className="highlight";
			} else {
				//else make sure the the stanza is not highlighted
				stanzas[i].className="";
			}
		}
	}
---- C O D E   O M I T T E D ----

Next