Canvas Mask Help с пользовательским скруббером / формой аудио-плеера

Question

У меня есть два PNG, один белый, а другой красный.

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

Когда песня не воспроизводится, она должна быть белого цвета, а когда песня идет, она должна заполняться красным цветом по мере продвижения песни, а также при чистке назад и вперед соответственно.

Мне удалось освоить большую часть игровых функций, кроме части Canvas.

В настоящее время два png-ов наложены друг на друга, и когда песня воспроизводит весь красный png-оверлей поверх... вместо того, чтобы просто показывать часть... это довольно сложно объяснить, но у меня есть скрипка, чтобы все стало понятнее.

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

Желаемый результат хотел бы этот игрок, он также использует метод двух PNG:

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

Если бы кто-нибудь смог мне немного помочь, я бы с удовольствием... Я маскировал и пытался использовать холст все утро без удачи.

Answer 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>