問題描述

<audio src='http://www.cgvv.com.cn/wenda/res/bg.mp3' controls loop></audio> <input type='checkbox' />:是否播放背景音樂 <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>

代碼如上，想要做一個點擊checkbox實現背景音樂淡入淡出的小功能，淡入可以實現，但是淡出時，我想要音量變為0時，自動暫停。但是我這個音量變為0之后，進度條仍然在走，m1.pause()沒有生效。。

實在搞不明白，前端小白，求指導π-π

問題解答

這個問題比較好玩，代碼的邏輯是沒問題的。

首先需要了解的是：js中浮點數的計算不精確的，比如：0.2 + 0.1結果是0.30000000000000004。

然后直接原因是報錯：Failed to set the ’volume’ property on ’HTMLMediaElement’: The volume provided (-1.77636e-16) is outside the range [0, 1].這是在說volume只能在[0, 1]的區間內賦值。

漸入時，每次加 0.1，實際volume的值打印出來是：

volume每次減 0.1，實際減到最后會產生一個非常非常小的數，但仍大于 0：

所以仍會執行m1.volume-=0.1導致volume被設置為負數報上面的錯。

解決方案已經有同學給出了。另外可以關注下 ES6 Number.EPSILON，專門用于解決計算精度問題。

問題出在volume的值，在HTML5規范中，volume的值是不能小于0的，但你代碼中的計算使volume的值小于0了，故腳本出錯了不再執行。建議改成

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

這是錯誤記錄：Failed to set the ’volume’ property on ’HTMLMediaElement’: The volume provided (1.1) is outside the range [0, 1]另外，代碼沒有通過連續點擊測試，聲音沒達到最大時再點checkbox，會出現bug.

改成這樣:

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);} }`