KISA 4 - Declaring the audio player in the sketch

Your browser does not support HTML 5. You may want to update your browser.

In KISA 3, the only purpose of the <audio ...> tag in the html file is to declare the player. Actually, the player can be declared in the sketch and the audio tag can be removed from the .html file.

The change in the .pde file is in line 17. Change it so declares a new Audio element:

 17  Audio audio = new Audio();
instead of using getElementByID.

The four lines from the <audio ...> to the </audio> tags are removed from the .html file.

But this may cause a problem. There is no warning if the user has an old browser that cannot handle the audio tag. Additions to the setup and draw methods solve this problem. Near the beginning of the setup procedure we add lines 29-32 which avoid errors if the audio object is not available.

 29    if (audio == null) {
 30      noLoop();
 31      return;
 32    }
    

Near the beginning of the draw procedure we provide a message in lines 58-62:

 58    if (audio == null) {
 59      text("Your browser does not handle the HTML 5 audio tag.  You ", 20, 30);
 60      text("may want to upgrade your browser to the current version.", 20, 60); 
 61      return;
 62    }
    

Unfortunately, the above error checking may not be helpful as hoped. If the browser cannot handle the audio player, it probably can't handle the canvas either and will never see the Processing.js code. Consequently, we added a warning to the canvas tag (lines 11 and 12) to the .html file.

At this point you have learned all the concepts needed to use the Audio API. In this the next part we will illustrate how they can be used to add some new features to the player.

< Previous   Next >

[+/-] The KISA4.html file

  1  <!DOCTYPE html>  
  2  <html>
  3  <head>
  4    <title>KISA 4 (Keep It Simple Audio)</title>
  5    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6    <script type="text/javascript" src="processing.min.js"></script>
  7  </head>
  8  <body>
  9    <h1>Keep It Simple Audio 4</h1>
 10    <canvas id="KISA" data-processing-sources="KISA4.pde CircleButton.pde">
 11      Your browser does not support HTML 5.  You may want to update your
 12      browser.
 13    </canvas>
 14  </body>
 15  </html>

[+/-] The KISA4.pde file

  1  // KISA
  2  // Keep It Simple Audio version 4
  3  // James Brink  brinkje@plu.edu
  4  // 3/7/12  4/12/12
  5  
  6  // The constants can be modified.
  7  int width = 500;  // Width of canvas
  8  int height = 290; // Height of canvas
  9  // It is assumed that both .ogg and .mp3 versions of the files are available
 10  // in the same folder.  The file names must be complete URLs except for the
 11  // ending .ogg or .mp3 which must be omitted. It will be added as needed for
 12  // the browser.  Use the prefix "file:///" or "http:// as appropriate.
 13  String file1 = "http://brinkje.com/KISA_Sounds/groove";
 14  String file2 = "http://brinkje.com/KISA_Sounds/jingle";
 15  
 16  // Global variables
 17  Audio audio = new Audio();
 18  
 19  int time;
 20  String audioStatus;
 21  CircleButton playBtn, pauseBtn, stopBtn;
 22  CircleButton volumeDownBtn, volumeUpBtn, timeDownBtn, timeUpBtn;
 23  CircleButton file1Btn, file2Btn;
 24  
 25  void setup() {
 26    // Setup the sketch
 27    size(width, height);
 28    smooth();
 29    if (audio == null) {
 30      noLoop();
 31      return;
 32    }
 33    frameRate(20);
 34    audio.addEventListener("loadstart", loadStart, false);
 35    audio.addEventListener("playing", playing, false);
 36    audio.addEventListener("pause", pause, false);
 37    audio.addEventListener("ended", ended, false);
 38    audio.addEventListener("error", error, false);
 39    
 40    playBtn = new CircleButton(130, 145,"Play");
 41    pauseBtn = new CircleButton(230, 145, "Pause");
 42    stopBtn = new CircleButton(330, 145, "Stop");
 43    volumeDownBtn = new CircleButton(165, 170, "Volume down");
 44    volumeUpBtn = new CircleButton(270, 170, "Volume up");
 45    timeDownBtn = new CircleButton(165, 195, "Time down");
 46    timeUpBtn = new CircleButton(270, 195, "Time up");
 47    file1Btn = new CircleButton(20, 220, file1);
 48    file2Btn = new CircleButton(20, 245, file2);
 49  
 50    audioStatus = "";
 51    setSource(file1);  // pick the initial audio file
 52  } // setup
 53  
 54  void draw() {
 55    // Draws the sketch on the canvas
 56    background(#FFFFAA);
 57    fill(#000000);
 58    if (audio == null) {
 59      text("Your browser does not handle the HTML 5 audio tag.  You ", 20, 30);
 60      text("may want to upgrade your browser to the current version.", 20, 60); 
 61      return;
 62    }
 63  
 64    textAlign(CENTER);
 65    text("KISA 4", width/2, 30);
 66    text("Source file: " + audio.src, width/2, 60);
 67    text("Status: " + audioStatus, width/2, 80);
 68    text("Current time: " + round(audio.currentTime) 
 69         + "sec.   Length: " + round(audio.duration), width/2, 100) + " sec.";
 70    text("Volume (0 to 1): " + round(10 * audio.volume)/10.0, width/2, 120);
 71  
 72    playBtn.draw();
 73    pauseBtn.draw();
 74    stopBtn.draw();
 75    volumeDownBtn.draw();
 76    volumeUpBtn.draw();
 77    timeDownBtn.draw();
 78    timeUpBtn.draw();
 79    file1Btn.draw();
 80    file2Btn.draw();
 81  }
 82  
 83  void setSource(String url ) {
 84    // Called to set the source file.  Do not include the file extension
 85    // in the url.  It will be added here.
 86    if (audio.canPlayType && audio.canPlayType("audio/mpeg")) {
 87      audio.setAttribute("src", url + ".mp3");
 88    } else {
 89      audio.setAttribute("src", url + ".ogg");
 90    }
 91    audioStatus = "File selected";
 92  }
 93  
 94  void stop() {
 95    // Called stop playing the file by pausing it and setting the
 96    // time back to 0;
 97    audio.pause();
 98    audio.currentTime = 0;
 99    audioStatus = "Stopped";
100  }
101  
102  void loadStart() {
103    // LoadStart event processing
104    audioStatus = "Loading";
105  }
106  
107  void playing() {
108    // Playing event processing
109    audioStatus = "Playing";
110  }
111  
112  void pause() {
113    // Pause event processing.
114    // There is no stop event but a "stop" causes a pause.  This
115    // method checks to see if the current time = 0. If so it assumes
116    // stopped
117    if (audio.currentTime == 0)
118      audioStatus = "Stopped";
119    else
120      audioStatus = "Paused";
121  }
122  
123  void ended() {
124    // Ending event processing
125    audioStatus = "Finished playing";
126  }
127  
128  void error() {
129    // error event processing
130    audioStatus = "Error";
131  }
132  
133  void mouseClicked() {
134    // Mouse clicked event processing
135    var v, t;
136    if (playBtn.isOver()) {
137      audio.play();
138    } else if (pauseBtn.isOver()) {
139      audio.pause();
140    } else if (stopBtn.isOver()) {
141      stop();
142    } else if (volumeUpBtn.isOver()) {
143      v = audio.volume + 0.1;
144      audio.volume = constrain(v, 0, 1);
145    } else if (volumeDownBtn.isOver()) {
146      v = audio.volume - 0.1;
147      audio.volume = constrain(v, 0, 1);
148    } else if (timeUpBtn.isOver()) {
149      t = audio.currentTime + 0.1 * audio.duration;
150      audio.currentTime = constrain(t, 0, audio.duration);
151    } else if (timeDownBtn.isOver()) {
152      t = audio.currentTime - 0.1 * audio.duration;
153      audio.currentTime = constrain(t, 0, audio.duration);
154    } else if (file1Btn.isOver()) {
155      setSource(file1);
156    } else if (file2Btn.isOver()) {
157      setSource(file2);
158    }
159  }

[+/-] The CircleButton.pde file

Updated 11/6/14