如何在绘图应用程序上单击颜色时播放声音

我目前创建了一个简单的绘图应用程序，想知道是否有人可以帮助我编码使用颜色附加特定声音，并且每次用户在画布上绘制颜色时，声音将在绘图时播放。

谢谢！

这是我到目前为止为绘图应用程序准备的 Javascript：

var started = false;
var canvas, context;
var stampId = '';
var lastColor = 'red';
var lastStampId = '';
function init() {
    canvas = $('#imageView').get(0);
    context = canvas.getContext('2d');
    // Auto-adjust canvas size to fit window.
    canvas.width  = window.innerWidth - 80 ;
    canvas.height = window.innerHeight - 80 ;
    //$('#container').get(0).addEventListener('mousemove', onMouseMove, false);
    canvas.addEventListener('click', onClick, false);
    canvas.addEventListener('mousedown', ev_canvas, false);
    canvas.addEventListener('mousemove', ev_canvas, false);
    canvas.addEventListener('mouseup',   ev_canvas, false);
    // Add events for toolbar buttons.
    $('#red').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
    $('#orange').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
    $('#yellow').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
    $('#green').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
    $('#blue').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
    $('#purple').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);

    // Attach the mousedown, mousemove and mouseup event listeners.
  }
  // The pencil tool instance.
  tool = new tool_pencil();
  // This painting tool works like a drawing pencil which tracks the mouse 
  // movements.
  function tool_pencil () {
    var tool = this;
    this.started = false;
    // This is called when you start holding down the mouse button.
    // This starts the pencil drawing.
    this.mousedown = function (ev) {
        context.beginPath();
        context.moveTo(ev._x, ev._y);
        tool.started = true;
    };
    // This function is called every time you move the mouse. Obviously, it only 
    // draws if the tool.started state is set to true (when you are holding down 
    // the mouse button).
    this.mousemove = function (ev) {
      if (tool.started) {
        context.lineTo(ev._x, ev._y);
        context.stroke();
    context.lineJoin = "round";
    context.lineWidth = 5;
      }
    };
    // This is called when you release the mouse button.
    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
      }
    };
  }
  // The general-purpose event handler. This function just determines the mouse 
  // position relative to the canvas element.
  function ev_canvas (ev) {
    if (ev.layerX || ev.layerX ==0) { // Firefox
      ev._x = ev.layerX;
      ev._y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 10 ) { // Opera
      ev._x = ev.offsetX;
      ev._y = ev.offsetY;
    }
    // Call the event handler of the tool.
    var func = tool[ev.type];
    if (func) {
      func(ev);
    }
  }

function onClick(e) {
    if (stampId.length > 0) {
        context.drawImage($(stampId).get(0), e.pageX - 90, e.pageY - 60, 80, 80);
    }
}
function onColorClick(color) {
    // Start a new path to begin drawing in a new color.
    context.closePath();
    context.beginPath();
    // Select the new color.
    context.strokeStyle = color;
    // Highlight selected color.
    var borderColor = 'white';
    if (color == 'white' || color == 'yellow') {
        borderColor = 'black';
    }
    $('#' + lastColor).css("border", "0px dashed white");
    $('#' + color).css("border", "1px dashed " + borderColor);
    // Store color so we can un-highlight it next time around.
    lastColor = color;
}
function onFill() {
    // Start a new path to begin drawing in a new color.
    context.closePath();
    context.beginPath();
    context.fillStyle = context.strokeStyle;
    context.fillRect(0, 0, canvas.width, canvas.height);
}
function onStamp(id) {
    // Update the stamp image.
    stampId = '#' + id;
    $(lastStampId).css("border", "0px dashed white");
    $(stampId).css("border", "1px dashed black");
    // Store stamp so we can un-highlight it next time around.
    lastStampId = stampId;  
}