javascript - Question sur la pause des balises audio

Question

<audio src="res/bg.mp3" id="m1" controls loop></audio>
    <input type="checkbox" id="bgm"/>:是否播放背景音乐
    <script>

        bgm.onchange=function(){
            if(this.checked){
                m1.volume=0;
                m1.play();
                var timer=setInterval(function(){
                    m1.volume+=0.1;
                    if(m1.volume>0.9){
                        clearInterval(timer);
                    }
                },200);
            }else{
                var timer=setInterval(function(){
                    if(m1.volume>0){
                        m1.volume-=0.1;
                    }else{
                        clearInterval(timer);
                        m1.pause();
                    }
                },200);
            }
        }
    </script>

Le code est comme ci-dessus. Je souhaite créer une petite fonction consistant à cocher la case pour réaliser le fondu d'entrée et de sortie de la musique de fond. Le fondu d'entrée peut être réalisé, mais lors du fondu de sortie, je le souhaite. se met automatiquement en pause lorsque le volume atteint 0. Mais après que mon volume soit passé à 0, la barre de progression fonctionnait toujours et m1.pause() n'a pas pris effet. .

Je ne comprends vraiment pas, je suis nouveau dans le front-end, s'il vous plaît donnez-moi quelques conseils π-π

Answer 1

Cette question est assez intéressante et la logique du code est correcte.

La première chose que vous devez comprendre est : le calcul des nombres à virgule flottante en js n'est pas précis, comme : 0.2 + 0.1结果是0.30000000000000004.

Ensuite, la raison directe est l'erreur : Failed to set the 'volume' property on 'HTMLMediaElement': The volume provided (-1.77636e-16) is outside the range [0, 1].Cela signifie que le volume ne peut se voir attribuer qu'une valeur comprise dans la plage [0, 1].

Lors du fondu entrant, ajoutez 0,1 à chaque fois, et la valeur réelle du volume imprimée est :

Le volume diminue de 0,1 à chaque fois. La diminution réelle produira un très, très petit nombre à la fin, mais il est toujours supérieur à 0 :

Il sera donc toujours exécutém1.volume-=0.1, ce qui entraînera le réglage du volume sur un nombre négatif et l'erreur ci-dessus sera signalée.

La solution a déjà été donnée par un camarade de classe. Vous pouvez également faire attention à ES6 Number.EPSILON, qui est spécialement utilisé pour résoudre les problèmes de précision des calculs.

Answer 2

Le problème réside dans la valeur du volume. Dans la spécification HTML5, la valeur du volume ne peut pas être inférieure à 0, mais le calcul dans votre code rend la valeur du volume inférieure à 0, donc le script ne sera pas exécuté en raison d'un problème. erreur. Il est recommandé de le changer en

if(m1.volume>0.1){
    m1.volume-=0.1;
}else{
    clearInterval(timer);
    m1.pause();
}

Voici l'enregistrement d'erreur :
Échec de la définition de la propriété 'volume' sur 'HTMLMediaElement' : le volume fourni (1.1) est en dehors de la plage [0, 1]
De plus, le code a échoué au test de clic continu et au son n'a pas atteint le maximum. Si vous cochez à nouveau la case, un bug apparaîtra.

Answer 3

Changez-le par ceci :

   var timer = null;
    bgm.onchange=function(){
        if(this.checked){
            m1.volume=0;
            m1.play();
            clearInterval(timer);
            timer=setInterval(function(){
                m1.volume+=0.1;
                if(m1.volume>0.9){
                    clearInterval(timer);
                }
            },200);
        }else{
            clearInterval(timer);
            timer=setInterval(function(){
                console.log(m1.volume)
                if(m1.volume>0){
                    // m1.volume -= 0.1;这里会有精度问题，一直减0.1不是到从1到0
                    m1.volume = m1.volume-0.1<=0?0:m1.volume-0.1;
                }else{
                    m1.pause();
                    clearInterval(timer);
                }
            },200);
        }
    }`