Media Development and Production


Media Development and Production

Professor's Introduction


Several years ago we developed a simple Flash application that loaded a photo and an mp3 file into a Moodle HTML Block. We've since revised it to be a simple HTML5/Javascript application. There's an example in the HTML block to the left (Professor's Introduction Sample).

New Implementation

The following code is taken directly from the HTML Block on this page. You can replace the Flash version in any course using this code. You will have to adjust the paths for the image, audio and pdf files. Note that the CSS, Javascript and HTML are all inline here. You can copy and paste the whole code segment below into the “Configure HTML block”.


 #TargetPlayerProf {
      display: none;

  var TargetPlayerProf;
  var Play_Pause_BtnProf;
  var TimeCodeProf;
  var TCIntervalProf =  window.setInterval(TCTrackerProf, 1000);

 function AddInteractivityProf() {
     this.Play_Pause_BtnProf = document.getElementById("Play_Pause_BtnProf");
     this.TargetPlayerProf = document.getElementById("TargetPlayerProf");
     this.TimeCodeProf = document.getElementById("TimeCodeProf");
     this.Play_Pause_BtnProf.addEventListener("click", PlayAudioProf); } 

 function TCTrackerProf(evt) {
     document.getElementById("TimeCodeProf").textContent = SecondsToSecondsAndMinutesProf(TargetPlayerProf.currentTime) + " / " + SecondsToSecondsAndMinutesProf(TargetPlayerProf.duration); } function SecondsToSecondsAndMinutesProf(theTime) {
     theTime = Math.round(theTime);
     var minutes = Math.floor(theTime / 60);
     var seconds = theTime - minutes * 60;
     function str_pad_left(string,pad,length) {
        return (new Array(length+1).join(pad)+string).slice(-length);
     return str_pad_left(minutes,'0',2)+':'+str_pad_left(seconds,'0',2);

 function PlayAudioProf(evt) {
     if ( !TargetPlayerProf.paused) {
         Play_Pause_BtnProf.src = "";
      } else {;
         Play_Pause_BtnProf.src = "";
<div id="ProfIntro">
     <img src="" width="170px" />
     <br clear="all"/>
     <img id="Play_Pause_BtnProf" style="padding-top:6px; padding-left:6px;" src="" height="20px;"/> <span id="TimeCodeProf"  style="padding-left:10px;">00:00/00:00</span>
     <hr width="150"/>
     <p style="text-align: center;"><a href="" target="_blank">Transcript ...</a> </p>
<audio id="TargetPlayerProf" src="" controls></audio>

Skip Table of contents

Table of contents

  • Professor's Introduction
Skip AdministrationSkip NavigationSkip AccessibilitySkip Professor's Introduction Sample