【问题标题】：Canvas Mask Help w/ custom audio player scrubber / waveform带有自定义音频播放器擦洗器/波形的 Canvas Mask 帮助
【发布时间】：2015-04-20 22:41:15
【问题描述】：

我有两个 png，一个是白色的，另一个是红色的。

<img class="rangeHorizontal" id="seek"     src="http://i.imgur.com/hRHH9VO.png">
            <img id="seekFill" src="http://i.imgur.com/WoJggN0.png">

当歌曲不播放时它应该是白色的，当歌曲正在播放时它应该随着歌曲的进行而填充红色，并且分别向后和向前擦洗时也是如此。

除了画布部分之外，我已经能够应付大部分的游戏功能。

目前这两个 png 是相互叠加的，当歌曲播放时，整个红色 png 叠加在顶部，.. 而不是只显示一部分，.. 这很难解释，但我有一个小提琴所以事情变得更清晰。

https://jsfiddle.net/tallgirltaadaa/q9qgyob0/

想要的效果会喜欢这个播放器，它也使用了两个png的方法：

http://codecanyon.net/item/zoomsounds-neat-html5-audio-player/full_screen_preview/4525354?ref=hkeyjun

如果有人能帮我一点忙，我会很高兴的。我整个早上都在蒙面并尝试使用画布，但没有运气。

【问题讨论】：

标签： javascript html audio canvas image-masking

【解决方案1】：

代码有点多，但这里有一种技术可以用来绘制图像的剪辑版本。根据需要实施 -

现场示例

在每个timeupdate:

画布被清除
绘制了白色底部图像（您可以随意缩放）
计算进度（当前时间/持续时间）
红顶图像是使用剪切参数绘制的：

即。

ctx.drawImage(image, sx, sy, sw, sh,  dx, dy, dw, dh);

完整的示例代码（由于 API 的使用不得不替换音乐）-

var imgBg = new Image(),
    imgFg = new Image(),
    count = 2;
imgBg.onload = imgFg.onload = init;
imgBg.src = "http://i.imgur.com/hRHH9VO.png";
imgFg.src = "http://i.imgur.com/WoJggN0.png";

function init() {
  if (--count) return;   // makes sure both images are loaded
  
   var canvas = document.querySelector("canvas"),
       ctx = canvas.getContext("2d"),
       audio =  document.querySelector("audio");
  
  canvas.width = imgBg.naturalWidth;
  canvas.height = imgBg.naturalHeight;
  
  render();
  
  audio.volume = 0.5;
  audio.addEventListener("timeupdate", render);
  
  function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(imgBg, 0, 0);
    
    // calc progress
    var pst = audio.currentTime / audio.duration;
    
    // draw clipped version of top image
    if (pst > 0) {
      ctx.drawImage(imgFg, 0, 0, (canvas.width * pst)|0, canvas.height,  // source
                           0, 0, (canvas.width * pst)|0, canvas.height); // dst
    }
  }
}

body {background:#ccc}
canvas {width:600px;height:auto}

<audio src="https://raw.githubusercontent.com/epistemex/free-music-for-test-and-demo/master/music/kf_colibris.mp3" controls></audio>
<canvas></canvas>

【讨论】：