CS 50.12 :: HTML5 :: 1. Introduction

Audio in HTML5

CCCConfer lesson

Browser support for audio formats

We will be using ACC (m4a) and Ogg/Vorbis (oga) formats

browser support for audio

Download and Convert audio files

Download mp3 files - http://mp3.com

Convert mp3 to m4a and oga format using - http://www.videolan.org/

Add code to play audio

<audio controls>
<source src="audio-files/sky.m4a" type="audio/mp4" />
<source src="audio-files/sky.oga" type="audio/ogg" />
<p>Your browser does not support HTML5 video.</p>
</audio>

Audio Sample 1

Add attributes such as autoplay

<audio controls autoplay>
<source src="audio-files/sky.m4a" type="audio/mp4" />
<source src="audio-files/sky.oga" type="audio/ogg" />
<p>Your browser does not support HTML5 video.</p>
</audio>

Audio Sample 2

or attributes such as autoplay and loop

<audio controls autoplay loop>
<source src="audio-files/sky.m4a" type="audio/mp4" />
<source src="audio-files/sky.oga" type="audio/ogg" />
<p>Your browser does not support HTML5 video.</p>
</audio>

We do not use the attributes of poster, width or hieght

Audio Sample 3

Customize Control Bar

Now lets explore how to customize the control bars of an audio or video element.

STEP 1
Prepare your website by adding the Jquery library to the folder on your local computer and on the student server. I recommend these files be placedinside a scripts sub-folder.

http://jquery.com/

I also need a file named player.js which has this code

$(function(){

// Stop if HTML5 video isn't supported
if (!document.createElement('video').canPlayType) {
$("#VideoControls").hide();
return;
}

var video = document.getElementById("VideoSample");

});

STEP 2
Next I create this code in the HTML page, I REMOVE the controls attribute and instead assign an ID so I can later control the element with JavaScript.

<video id="VideoSample" width="640" height="480" preload="none" poster="images/clouds-poster.png">
<source src="boiling_storm_clouds_512kb.mp4" type="video/mp4" />
<source src="boiling_storm_clouds.webm" type="video/webm" />
<source src="boiling_storm_clouds.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
<div id="VideoControls">

</div>

STEP 3
Now I add CSS in the head of the document that controls the div tag that will eventually display the video controls

#VideoControls div {
float: left;
height: 30px;
line-height: 30px;
}
</style>

HTML/CSS - Custom Controls Sample File 1 and Javascript file

Add a play / pause button:

STEP 1
In the HTML I add a div tag with an id and class

STEP 2
Next I modify the player.js file, the new code is shown below

var video = document.getElementById("VideoSample");

// Play/Pause ============================//
$("#play_button").bind("click", function(){
video.play();
});

$("#pause_button").bind("click", function(){
video.pause();
});

$("#play_toggle").bind("click", function(){
if (video.paused) {
video.play();
$(this).html("Pause");
} else {
video.pause();
$(this).html("Play");
}
});

});

STEP 3
Add more CSS code

.player-button {
width: 50px;
text-align: center;
cursor: pointer;
}

HTML/CSS - Custom Controls Sample 2 and JavaScript file

Add a progress bar that shows amount of video played.

STEP 1
Add HTML that establishes divs that show the progress of the video as it plays

STEP 2
Modify the player.js file by adding this new JavaScript code

// Play Progress ============================//
$(video).bind("timeupdate", function(){
var timePercent = (this.currentTime / this.duration) * 100;
$("#play_progress").css({ width: timePercent + "%" })
});

STEP 3
Add CSS that style these div tags

#progress {
position: relative;
background: #555;
width: 310px;
}

#play_progress {
position: absolute;
background: #6C9;
}

HTML/CSS - Video Controls Sample file 3 and Javascript file

Add a progress bar that shows the video has loaded

Please Note: when you test this on your local computer the bar will immediately jump from gray to aqua, when you test it on the Web it will load more slowly and you will see the bar progress.

STEP 1
Modifiy the HTML adding yet another div which will show the progress of the download. Place the new div above the play_progress div.

STEP 2
Add this to the player.js file

// Load Progress ============================//
$(video).bind("progress", function(){
updateLoadProgress();
});
$(video).bind("loadeddata", function(){
updateLoadProgress();
});
$(video).bind("canplaythrough", function(){
updateLoadProgress();
});
$(video).bind("playing", function(){
updateLoadProgress();
});

function updateLoadProgress() {
if (video.buffered.length > 0) {
var percent = (video.buffered.end(0) / video.duration) * 100;
$("#load_progress").css({ width: percent + "%" })
}
}

});

STEP 3
Use CSS to style the new div

#load_progress {
position: absolute;
background: #069;
}

HTML/CSS - Custom Controls Sample File 4 and Javascript file

Create a Current Time Played and Duration display

STEP 1 - add more div tag info

STEP 2 - modify the Javascript

// Time Display =============================//
$(video).bind("timeupdate", function(){
$("#current_time").html(formatTime(this.currentTime));
});
$(video).bind("durationchange", function(){
$("#duration").html(formatTime(this.duration));
});

function formatTime(seconds) {
var seconds = Math.round(seconds);
var minutes = Math.floor(seconds / 60);
// Remaining seconds
seconds = Math.floor(seconds % 60);
// Add leading Zeros
minutes = (minutes >= 10) ? minutes : "0" + minutes;
seconds = (seconds >= 10) ? seconds : "0" + seconds;
return minutes + ":" + seconds;
}

STEP 3 - modify the CSS

#time {
width: 120px;
text-align: center;
}

HTML/CSS - Custom Controls Sample File 5 and JavaScript file

Lab Activity

In lab we will practice downloading a mp3 file, then downloading the audio/video converter and use that software to convert the file to .m4a and .oga files. We will also load the JQuery library if you have not alredy done that.