KISA 4 Tutorial

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:

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.

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 >

  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  }

  1  class CircleButton {
  2    // Used to draw labeled button
  3    int centerX, centerY;
  4    String label;
  5    int radius = 9;
  6    int diameter;
  7    color col = #0000FF;
  8    CircleButton(int centerXX, int centerYY, String labelL) {
  9      // Constructor (centerXX, centerYY) is the center of the circle.
 10      // labelL is the button's label shown on its right.
 11      centerX = centerXX;
 12      centerY = centerYY;
 13      label = labelL
 14      ellipseMode(CENTER);
 15      diameter = 2 * radius;
 16    }
 17  
 18    boolean isOver() {
 19      // Determines the mouse is over the circle.
 20      return sq(mouseX - centerX) + sq(mouseY - centerY) <= sq(radius);
 21    }
 22  
 23    void draw() {
 24      // Draws the circle button with its labelon the right
 25      fill(col);
 26      ellipse(centerX, centerY, diameter, diameter);
 27      fill(0);
 28      textAlign(CORNER);
 29      text(label, centerX + radius + 5, centerY + 5);
 30    }
 31  
 32    void setLabel(String s) {
 33      label = s;
 34    }
 35  
 36  }  // end of CircleButton class

KISA 4 - Declaring the audio player in the sketch

The Tutorial