Sound bei Mausevent im Hintergrund abspielen

K

KrisOtine

Grünschnabel
Schönen guten Nachmittag,

ich möchte ein simples Zeichenpad erstellen, das habe ich bereits von einem Tutorial übernommen und erweitert. (Mein Zeichenpad besteht auf der Grundlage dieses Tutorials: http://dev.opera.com/articles/view/html5-canvas-painting/). Das ganze soll Synästhesie visualisieren und beim Zeichnen Sound abspielen. Für den Sound habe ich die Möglichkeit mp3 oder mini Daten zu erstellen. Der Code funktioniert, doch ich habe schon einiges versucht den Sound einzubinden doch irgendwas mache ich ziemlich falsch und finde nicht die richtigen Codes. Ich möchte keine Playerleiste wie z.B. mit Quicktime, sondern einen einzelnen Klang im Hintergrund wenn die Maus eine Form zeichnet, also wenn 'mousedown' aufgerufen wird. Die Audio-Schnipsel werden sehr kurz sein, also ca. nur 2-5 sec.

Für jede Form (Linie, Quadrat, Kreis etc.) soll es einen Ton geben (z.B. Klavierton, Geige, Tuba etc.).

Wie muss ich meinen Code aufbauen, mit welchen Elementen?

Vielen lieben Dank im Voraus!

Code: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Paint</title>
    <style type="text/css" backgroundcolour="f3f8bf">
  #container { position: relative; }
  #imageView { border: 1px solid #000; }
  #imageTemp { position: absolute; top: 1px; left: 1px; }
</style>
  </head>
  <body>
    <div id="container">
      <canvas id="imageView" width="1000" height="500" style="border: 1px solid #000000; background-color: #d4d4d2;"
      </canvas>
    </div>
    <p>
    <label>Zeichenelemente<br/>
    <select id="dtool">
    	<optgroup label="Kreis">
        	<option value="kreis1">Kreis Hellblau</option>
            <option value="kreis2">Kreis Blau</option>
        </optgroup>
        <optgroup label="Eckige Formen">
        <option value="dreieck">Dreieck</option>
        <option value="eckig">Ecke</option>
        </optgroup>
        <optgroup label="Linien">
    	<option value="lineVertical">Vertikale</option>
        <option value="lineHorizontal">Horizontale</option>
        <option value="pencil">Fließende Linie</option>
        </optgroup>
        <option value="rect">Rechteck</option>
    </select></label></p>

    <script type="text/javascript">
    
if(window.addEventListener) {
window.addEventListener('load', function () {
  var canvas, context, canvaso, contexto;

  var tool;
  var tool_default = 'line';

  function init () {
	  
    // Canvas Element
    canvaso = document.getElementById('imageView');
    if (!canvaso) {
      alert('Error: I cannot find the canvas element!');
      return;
    }

    if (!canvaso.getContext) {
      alert('Error: no canvas.getContext!');
      return;
    }

    contexto = canvaso.getContext('2d');
    if (!contexto) {
      alert('Error: failed to getContext!');
      return;
    }

    // Temporäres Canvas
    var container = canvaso.parentNode;
    canvas = document.createElement('canvas');
    if (!canvas) {
      alert('Error: I cannot create a new canvas element!');
      return;
    }

    canvas.id     = 'imageTemp';
    canvas.width  = canvaso.width;
    canvas.height = canvaso.height;
    container.appendChild(canvas);

    context = canvas.getContext('2d');

    // Tool Select Input abholen
    var tool_select = document.getElementById('dtool');
    if (!tool_select) {
      alert('Error: failed to get the dtool element!');
      return;
    }
    tool_select.addEventListener('change', ev_tool_change, false);

    // Aktivieren des default tools
    if (tools[tool_default]) {
      tool = new tools[tool_default]();
      tool_select.value = tool_default;
    }

    // Event Listeners für Mausbewegungen
    canvas.addEventListener('mousedown', ev_canvas, false);
    canvas.addEventListener('mousemove', ev_canvas, false);
    canvas.addEventListener('mouseup',   ev_canvas, false);
  }

  // Bestimmt die Mausposition relativ zum Canvas Objekt
  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 == 0) { // Opera
      ev._x = ev.offsetX;
      ev._y = ev.offsetY;
    }

    // Aufrufen des event handlers des tools
    var func = tool[ev.type];
    if (func) {
      func(ev);
    }
  }

  // event handler für Änderung Zeichentools
  function ev_tool_change (ev) {
    if (tools[this.value]) {
      tool = new tools[this.value]();
    }
  }

  // Funktion zeichnet #imageTemp canvas über #imageView, nachdem #imageTemp gelöscht wird. Wird jedesmal aufgerufen, wenn eine Aktion beendet wird.
  function img_update () {
		contexto.drawImage(canvas, 0, 0);
		context.clearRect(0, 0, canvas.width, canvas.height);
  }

// Objekt Variable enthält die Anwendung/Ausführung für jedes Zeichentool
  	var tools = {};


	
  // Linie
  tools.pencil = function () {
    var tool = this;
    this.started = false;

   // Startet die Funktion, wenn Maustaste gedrückt wird
    this.mousedown = function (ev) {
        context.beginPath();
        context.moveTo(ev._x, ev._y);
        tool.started = true;
    };
	
    this.mousemove = function (ev) {
      if (tool.started) {
        context.lineTo(ev._x, ev._y);
		context.strokeStyle="#2851af";
        context.stroke();
      }
    };

    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
        img_update();
      }
    };
  };
  
  

  // Quadrat
  tools.rect = function () {
    var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
      tool.started = true;
      tool.x0 = ev._x;
      tool.y0 = ev._y;
    };

    this.mousemove = function (ev) {
      if (!tool.started) {
        return;
      }
       
	  var x = Math.min(ev._x, tool.x0),
		  y = Math.min(ev._y, tool.y0),
		  w = Math.abs(x - tool.x0, y - tool.y0),
          h = Math.abs(x - tool.x0, y - tool.y0);
         
		  
      context.clearRect(0, 0, canvas.width, canvas.height);

    if (!w || !h) {
        return;
      }

      context.fillRect(x, y, w, h);
	  context.fillStyle="#FF0000";
    };

    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
        img_update();
      }
    };
  };
  
  
  
  // Dreieck
  tools.dreieck = function () {
	  var tool = this;
	  this.started = false; 
	  
	  this.mousedown = function (ev) {
		  tool.started = true; 
		  tool.x0 = ev._x;
		  tool.y0 = ev._y;
	  };
	  
	  this.mousemove = function (ev) {
		  if (!tool.started) {
			  return;
		  }
	
	
	context.clearRect(0, 0, canvas.width, canvas.height);

	var x = ev._x;
	var y = ev._y;
      context.beginPath();
      context.moveTo(tool.x0, tool.y0);
      context.lineTo(ev._x,   ev._y);
	  context.lineTo(ev._x + 60, ev._y + 60);
	  context.lineTo(tool.x0, tool.y0);
      context.closePath();
	  context.fillStyle="fdf402";
	  context.fill();

    };

    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
        img_update();
      }
    };
  };
  
  
  
  // Kreis Blau (kreis2)
  tools.kreis2 = function() {
	  var tool = this; 
	  this.started = false; 
	
	 this.mousedown = function (ev) {
      tool.started = true;
      tool.x0 = ev._x;
      tool.y0 = ev._y;
    };

    this.mousemove = function (ev) {
      if (!tool.started) {
        return;
      }
	  
	  var x = Math.min(ev._x,  tool.x0),
          y = Math.min(ev._y,  tool.y0),
          w = Math.abs(ev._x - tool.x0),
          h = Math.abs(ev._y - tool.y0);
	  
      context.clearRect(0, 0, canvas.width, canvas.height);
	   
	context.fillStyle="#4f70ba";
	context.fill();
	context.beginPath();
	context.arc(x, y, w, h, Math.PI*2, true);
	context.closePath();
	

	}
  		 this.mouseup = function (ev) {
    		  if (tool.started) {
     		   tool.mousemove(ev);
      		  tool.started = false;
      		  img_update();
      }
    };
  };
  
  
  // Kreis Hellblau (kreis1)
  tools.kreis1 = function() {
	  var tool = this; 
	  this.started = false; 
	
	 this.mousedown = function (ev) {
      tool.started = true;
      tool.x0 = ev._x;
      tool.y0 = ev._y;
    };

    this.mousemove = function (ev) {
      if (!tool.started) {
        return;
      }
	  
	  var x = Math.min(ev._x,  tool.x0),
          y = Math.min(ev._y,  tool.y0),
          w = Math.abs(ev._x - tool.x0),
          h = Math.abs(ev._y - tool.y0);
	  
      context.clearRect(0, 0, canvas.width, canvas.height);
	   
	context.fillStyle="#a4c5e0";
	context.fill();
	context.beginPath();
	context.arc(x, y, w, h, Math.PI*2, true);
	context.closePath();
	

	}
  		 this.mouseup = function (ev) {
    		  if (tool.started) {
     		   tool.mousemove(ev);
      		  tool.started = false;
      		  img_update();
      }
    };
  };
  
  
  // horizontale linie.
  tools.lineHorizontal = function () {
	var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
      tool.started = true;
      tool.x0 = ev._x;
      tool.y0 = ev._y;
    };

    this.mousemove = function (ev) {
      if (!tool.started) {
        return;
      }

      context.clearRect(0, 0, canvas.width, canvas.height);

      context.beginPath();
      context.moveTo(tool.x0, tool.y0);
      context.lineTo(ev._x, tool.y0);
	  context.strokeStyle="000000";
      context.stroke();
      context.closePath();
    };

    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
        img_update();
      }
    };
  };
  
  // vertikale linie.
  tools.lineVertical = function () {
    var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
      tool.started = true;
      tool.x0 = ev._x;
      tool.y0 = ev._y;
    };

    this.mousemove = function (ev) {
      if (!tool.started) {
        return;
      }

      context.clearRect(0, 0, canvas.width, canvas.height);

      context.beginPath();
      context.moveTo(tool.x0, tool.y0);
      context.lineTo(tool.x0, ev._y);
	  context.strokeStyle="white";
      context.stroke();
      context.closePath();
    };

    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
        img_update();
      }
    };
  };
  
  
 
  
  // Ecken
  tools.eckig = function () {
    var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
      tool.started = true;
      tool.x0 = ev._x;
      tool.y0 = ev._y;
    };

    this.mousemove = function (ev) {
      if (!tool.started) {
        return;
      }

      context.clearRect(0, 0, canvas.width, canvas.height);

      context.beginPath();
      context.moveTo(tool.x0, tool.y0);
      context.lineTo(ev._x, ev._y);
	   context.lineTo(ev._x + 100, ev._y + 100);
	  context.strokeStyle="yellow";
	  context.lineWidth="5";
      context.stroke();
      context.closePath();
    };

    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
        img_update();
      }
    };
  };

  init();

},  false); }


</script>
  </body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück