Как вы конвертируете штриховой код аудио, чтобы в нем был градиент?

Question

Когда я это сделал, сам градиент просто отображал, как я начал уменьшать его, он просто сглаживался и не работал так, как я хотел, и я хотел постепенно увеличивать прогресс бара, этот градиент радуги, а не лягушка была полностью сплющена. Заранее благодарю за помощь

Скриншот индикатора выполнения:

HTML

<div class="video-progress hide" style="height: 3px;">
   <canvas class="progressbar-value" style="width: 0%;"></canvas>
   <div class="progressbar-load" style="width: 0%;"></div>
</div>

Javascript с (JQuery 3.4.0)

var music = $('#music')[0];
var audio = $('#music');
var playButton = $('.button-play');
var pauseButton = $('.button-play play');
var timer = $('.time-container');
var progressBar = $('.progressbar-value');
var progressContent = $('.video-progress');
var nowPlaying =  $('.description');
var visualizer = $('.visualizer');
var overlay = $('.content-overlay');
audio.bind('timeupdate', function(){
  var track_length = music.duration;
  var secs = music.currentTime;
  var progress = (secs/track_length) * 100;
  var tcMins = parseInt(secs/60);
  var tcSecs = parseInt(secs - (tcMins * 60));
  var canvas = $('.progressbar-value');  
  if(canvas.getContext){  
    var ctx = canvas.getContext('2d');         
    var rainbow = ctx.createLinearGradient(10, 0, 2000, 0);
    rainbow.addColorStop(0, 'rgba(26,  188, 156, .9)'); //blue
    rainbow.addColorStop(1/5, 'rgba(52,  152, 219, .9)'); //green
    rainbow.addColorStop(2/5, 'rgba(241, 196, 15,  .9)'); //yellow
    rainbow.addColorStop(3/5, 'rgba(230, 126, 34,  .9)'); //orange
    rainbow.addColorStop(1, 'rgba(211, 84,  0,   .9'); //red
    ctx.fillStyle = rainbow;
    ctx.fillRect(0, 0, 2000, 75);
  }
  progressBar.css({'width' : progress + ".'"%"'."});
  if(tcSecs < 10){tcSecs = '0' + tcSecs;}
  timer.html(tcMins + ':' + tcSecs);
});

Answer 1

Ваш код не является полным примером, и неясно, какую анимацию вы хотите использовать на индикаторе выполнения, но прямоугольник, который вы рисуете с fillRect, имеет фиксированный размер:

ctx.fillRect(0, 0, 2000, 75);

Поскольку ширина прямоугольника всегда равна 2000, анимации прогресса не будет ...

Начнем с простого фрагмента, который анимирует индикатор выполнения.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var rainbow = ctx.createLinearGradient(10, 0, canvas.width, 0);
rainbow.addColorStop(0,     'rgba(26,  188, 156, .9)'); //blue
rainbow.addColorStop(1 / 5, 'rgba(52,  152, 219, .9)'); //green
rainbow.addColorStop(2 / 5, 'rgba(241, 196, 15,  .9)'); //yellow
rainbow.addColorStop(3 / 5, 'rgba(230, 126, 34,  .9)'); //orange
rainbow.addColorStop(4 / 5, 'rgba(211,  84,  0,  .9)'); //redish
rainbow.addColorStop(1,     'rgba(250,   0,  0,  .9)'); //red


var size = 50

function animate() {
  if (size < canvas.width) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = rainbow;
    ctx.fillRect(0, 10, size++, 25);
  }
}

setInterval(animate, 20);

<canvas id="canvas" width=600></canvas>

В этом примере градиент радуги является статическим, и я увеличиваю размер прямоугольника.