Comment dessiner des lignes verticales en tant que piste musicale progressbar en utilisant Canvas en Javascript

Question

Comment dessiner des lignes verticales en tant que piste musicale progressbar en utilisant Canvas en Javascript

J'essaie de créer un lecteur audio personnalisé. J'utilise HtmlAudioElement pour cela. J'ai réussi à jouer, mettre en pause, afficher la durée et tout, mais je suis resté là où je dois afficher une barre de progression lors de la lecture d'une piste. J'ai une valeur en pourcentage (combien de chanson déjà jouée) qui se met à jour toutes les millisecondes. Je me demandais en utilisant cette valeur de pourcentages puis-je utiliser canvas et dessiner des lignes verticales à mesure que le pourcentage augmente?

Voici donc comment la barre de progression doit changer de couleur à mesure que le pourcentage augmente. Je n'ai aucune idée par où commencer. Je suis très nouveau à la toile. Toute Aide ?

J'ai essayé cela jusqu'à présent. ( Ce n'est pas ce que je veux) .

const canvas = document.getElementById('progress');
canvas.width = 1920;
canvas.height = 100;
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'grey';

for(let i = 0; i < 1000; i+=10){
    console.log(i);
    ctx.fillRect(i,0,5,100);
}

let count = 0;
let percent = 0;
ctx.fillStyle = 'orange';

function draw(){
    console.log('Hello')
    ctx.fillRect(count,0,5,100);
    count+=10;
    if(count > 100/1){
        return;
    }
    window.requestAnimationFrame(draw);
}

draw();

Donc c'est ce qu'il ressemble en ce moment.

Je veux en jouant des changements de pourcentage, j'ai besoin d'accrocher cette valeur quelque part dans le Canevas afin que je puisse dessiner ces lignes.

Merci d'avance :)

1

French javascript canvas html5-canvas html2canvas

Author: Vishwas R, 2020-02-14

Source

1 answers

score 1 · Accepted Answer

Vous pouvez lire la valeur (% done) directement à partir de l'objet média qui la contient.

Je ne peux pas entraîner ce que c'est que vous avez des problèmes avec. vous mentionnez la couleur ce qui suit est une simple barre de changement de couleur.

Barre de progression de base

Quelques constantes pour définir la barre de progression

const width = 500;
const height = 20;
const startColor = {r: 255, g: 128, b: 0}; // unsigned byte values 0 - 255
const endColor = {r: 255, g: 128, b: 0};

Pour interpoler la couleur

function progressColor(start, end, progress) {
    const r = (end.r - start.r) * progress + start.r;
    const g = (end.g - start.g) * progress + start.g;
    const b = (end.b - start.b) * progress + start.b;
    return `rgb(${r | 0},${g |0 }, ${b | 0})`;
}

Pour dessiner la barre

function progressBar(progress) {
    ctx.fillStyle =  progressColor(startColor, endColor, progress);
    // whatever design you want the example is just a simple bar

    ctx.fillRect(0,0, width * progress, height);
}

La boucle principale

La boucle principale toutes les 60 secondes.
Si l'audio est en pause, il s'arrête.
Lors du démarrage de la boucle d'animation, il faut veiller à ne pas la démarrer plus d'une fois
Notez que l'audio se sera arrêté jusqu'à ~1/60e de seconde avant le rendu de la dernière image d'animation.

La boucle d'animation principale...

var progressAnimating = false;  // this is to avoid more that one mainLoop playing
function mainLoop() {
    ctx.clearRect(0,0,width,height);

    // draw backing bar here

    const fractionDone = audio.time / audio.duration;
    progressBar(fractionDone);

    // only while not paused
    if (!audio.paused) {
        requestAnimationFrame(mainLoop);
    } else {
        progressAnimating = false;  // flag that the animation has stopped
    }
}

Utilisez les événements audio pour démarrer l'animation

Utilisez l'événement de lecture audio pour démarrer l'animation.
Vérifiez pour vous assurer que l'animation ne joue pas avant que vous ne demandiez la première image.
Si l'animation est toujours active, alors il continuera par son auto -

.

audio.addEventListener("play",() => {
    if (!progressAnimating) {
        requestAnimationFrame(mainLoop);
        progressAnimating = true;
    }
});

Styliser la barre de progression

La fonction suivante remplace la barre solide par le haut. Il utilise la zone du clip pour limiter la largeur afin que vous n'ayez pas besoin de jouer avec des barres fractionnaires.

const barWidth = 4; // in px
const barSpacing = 8; // distance from left edge to next left edge in px

function progressBar(progress) {
    ctx.save(); // save the unclipped state

    ctx.beginPath(); // create the clip path
    ctx.rect(0,0, width * progress, height);
    ctx.clip();

    ctx.fillStyle =  progressColor(startColor, endColor, progress);

    ctx.beginPath(); // draw all bars as one
    var x = 0;
    while (x < width * progress) {
        ctx.rect(x, 0, barWidth, height);
        x += barSpacing;
    }
    ctx.fill(); // draw that bars

    ctx.restore(); // restore unclipped state
}