Masque de toile Aide w/lecteur de sons personnalisé scrubber/waveform

Question

J'ai deux png, un blanc et l'autre rouge.

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

Lorsque la chanson qu'il ne joue pas, il devrait être blanc, et quand la chanson va il devrait remplir rouge comme la chanson progresse, et aussi quand frotté vers l'arrière et vers l'avant respectivement.

J'ai été capable d'embrouiller la plupart des fonctionnalités de lecture à l'exception de la partie Canvas.

Actuellement, les deux png sont superposés les uns sur les autres et quand la chanson joue tout le png rouge superpositions sur le dessus, .. au lieu de montrer juste une partie, .. c'est assez difficile à expliquer mais j'ai un violon les choses deviennent plus claires.

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

Le résultat souhaité souhaite que ce joueur, il utilise également une méthode en deux .png:

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

Si quelqu'un pouvait me aider un peu, je l'aimerais .. Je masquage et en essayant d'utiliser la toile toute la matinée sans succès.

Answer 1

Il y a un peu trop de code à parcourir, mais voici une technique que vous pouvez utiliser pour dessiner une version tronquée d'une image. Mettre en œuvre au besoin -

en direct Exemple

A chaque timeupdate:

• Canvas est effacé
• L'image de fond blanc est dessiné en (vous pouvez redimensionner ceux-ci comme vous le souhaitez)
• Progress est calculé (currentTime/duration)
• L'image supérieure rouge est dessinée en utilisant les arguments de découpage:

ie.

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

exemple de code complet (dû remplacer la musique en raison de l'utilisation de l'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>