如何在繪圖應用程序上單擊顏色時播放聲音？

Question

我目前已經創建了一個簡單的繪圖應用程序，並且想知道是否有人可以幫助我編寫附加特定聲音的顏色，並且每次用戶使用畫圖時聲音播放的顏色在畫布上繪圖。

謝謝！

這是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 =「色」他們中的每一個（但離開是不變）

SOLUTION：

基本上我的回答工作，但你的代碼有一些問題：

http://neswork.com/javascript/sound-draw/1st/（只要你喜歡：只發聲drowing時）

http://neswork.com/javascript/sound-draw/2nd/（因爲我喜歡：聲音總是）