画布HTML5中的音频onclick

Question

我正在开发一种音乐应用程序，在该应用程序中按下某个区域时会发出声音。 但是，我无法将声音文件链接到画布上的形状。

我正在使用moveTo和lineTo方法创建形状，并希望在该区域实现声音文件。 我该怎么做呢？ 我应该使用元素还是函数？

目前，这是我到目前为止所拥有的：

<canvas id="myCanvas" width="850" height="250" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>

    <script>
    $(function(){
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    var C = (function () {
      context.beginPath();
      context.moveTo(20, 20);
      context.lineTo(60, 20);
      context.moveTo(20, 20);
      context.lineTo(20, 230);
      context.moveTo(60, 20);
      context.lineTo(60, 160);
      context.moveTo(60, 160);
      context.lineTo(75, 160);
      context.moveTo(75, 160);
      context.lineTo(75, 230);
      context.moveTo(75, 230);
      context.lineTo(20, 230);
      context.stroke();
      return(this);
      }

      var sound = new Audio("C.wav");
    sound.preload = 'auto';
    sound.load();

    function playSound(volume) {
    var click=sound.cloneNode();
    click.volume=volume;
    click.play();
}

Answer 1

这是您可以执行此操作的一种方法。包括一个按钮来触发playSound（）方法。 在playSound（）方法中，您还可以调用C（）方法来绘制形状。

 <!DOCTYPE html> <html> <head> </head> <body> <button onClick="playSound(1)">Play sound</button> <canvas id="myCanvas" width="850" height="250" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var C = (function() { context.beginPath(); context.moveTo(20, 20); context.lineTo(60, 20); context.moveTo(20, 20); context.lineTo(20, 230); context.moveTo(60, 20); context.lineTo(60, 160); context.moveTo(60, 160); context.lineTo(75, 160); context.moveTo(75, 160); context.lineTo(75, 230); context.moveTo(75, 230); context.lineTo(20, 230); context.stroke(); return (this); }); var sound = new Audio("C.wav"); sound.preload = 'auto'; sound.load(); function playSound(volume) { C(); var click = sound.cloneNode(); click.volume = volume; click.play(); } </script> </body> </html>

画布HTML5中的音频onclick

问题描述

1 个解决方案

解决方案1
0 2015-11-19 03:36:17

画布HTML5中的音频onclick

问题描述

1 个解决方案

解决方案1 0 2015-11-19 03:36:17

解决方案1
0 2015-11-19 03:36:17