Question

I have currently created a simple drawing application and was wondering if anybody could help me with the coding of attaching a specific sound with a color and for every time a user is drawing on the canvas with the color the sound will play while drawing.

Thanks!

This is the Javascript I have so far for the drawing app:

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;  
}

Answer 1

<audio id="snd_red" src="red.mp3"></audio>
<audio id="snd_blue" src="blue.mp3"></audio>
...

snd = null;
playing = false;

canvas.addEventListener('mousedown', function(){
    if (snd && !playing) {
        playing = true;
        snd.play();
    }
}, false);

canvas.addEventListener('mouseup', function(){
    if (snd && playing) {
        snd.stop();
        snd = null;
        playing = false;
    }
}, false);

function onColorClick(e, color){
    snd = document.getElementById("snd_" + color);
}

and you can do this in 1 line for all colors:

$('#red,#blue,#green,...').bind('click', function(e) { onColorClick(e.target.id, $(this).attr("id")); }, false);

but could be even:

$('.color').bind('click', function(e) { onColorClick(e.target.id, $(this).attr("id")); }, false);

if you could add class=”color” to each one of them (but leave the is untouched)

SOLUTION:

basically my answer worked, but you’re code had some problems:

http://neswork.com/javascript/sound-draw/1st/ (as you like: sound only when drowing)

http://neswork.com/javascript/sound-draw/2nd/ (as I like: sound always)