Wie wird eine Klangwiedergabe wiedergegeben, während auf eine Zeichenanwendung geklickt wird?

Question

Ich habe im Moment eine einfache Zeichnung Anwendung erstellt und fragte mich, ob jemand mir mit der Codierung des Anfügens eines bestimmten Tones mit einer Farbe helfen könnte und für jedes Mal, wenn ein Benutzer auf der Leinwand mit der Farbe zeichnet, die der Sound beim Zeichnen spielt.

Danke!

Dies ist Javascript ich bisher für die Zeichnung App haben:

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

und Sie können dies für alle Farben in 1 Zeile tun:

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

könnte aber auch sein, :

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

wenn Sie class = hinzufügen könnten " Farbe“, um jeden von ihnen (aber lassen Sie die unberührte ist)

LÖSUNG:

im Grunde meine Antwort gearbeitet, aber du bist Code hatte einige Probleme:

http://neswork.com/javascript/sound-draw/1st/ (wie Sie wollen: nur Ton wenn drowing)

http://neswork.com/javascript/sound-draw/2nd/ (wie Ich mag: Sound immer)