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

Question

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

谢谢!

这是我到目前为止用于绘图应用程序的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;  
}

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

您可以在1行中针对所有颜色执行此操作:

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

但可能甚至是:

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

如果可以将class =“color”添加到其中的每一个中(但保持原样)

解:

基本上我的答案是有效的，但是您的代码存在一些问题:

http://neswork.com/javascript/sound-draw/1st/(如您所愿:仅在驶入时发出声音)

http://neswork.com/javascript/sound-draw/2nd/(如我所愿:总是发声)