問(wèn)題描述

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

代碼如上，想要做一個(gè)點(diǎn)擊checkbox實(shí)現(xiàn)背景音樂(lè)淡入淡出的小功能，淡入可以實(shí)現(xiàn)，但是淡出時(shí)，我想要音量變?yōu)?時(shí)，自動(dòng)暫停。但是我這個(gè)音量變?yōu)?之后，進(jìn)度條仍然在走，m1.pause()沒(méi)有生效。。

實(shí)在搞不明白，前端小白，求指導(dǎo)π-π

問(wèn)題解答

這個(gè)問(wèn)題比較好玩，代碼的邏輯是沒(méi)問(wèn)題的。

首先需要了解的是：js中浮點(diǎn)數(shù)的計(jì)算不精確的，比如：0.2 + 0.1結(jié)果是0.30000000000000004。

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

漸入時(shí)，每次加 0.1，實(shí)際volume的值打印出來(lái)是：

volume每次減 0.1，實(shí)際減到最后會(huì)產(chǎn)生一個(gè)非常非常小的數(shù)，但仍大于 0：

所以仍會(huì)執(zhí)行m1.volume-=0.1導(dǎo)致volume被設(shè)置為負(fù)數(shù)報(bào)上面的錯(cuò)。

解決方案已經(jīng)有同學(xué)給出了。另外可以關(guān)注下 ES6 Number.EPSILON，專門(mén)用于解決計(jì)算精度問(wèn)題。

問(wèn)題出在volume的值，在HTML5規(guī)范中，volume的值是不能小于0的，但你代碼中的計(jì)算使volume的值小于0了，故腳本出錯(cuò)了不再執(zhí)行。建議改成

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

這是錯(cuò)誤記錄：Failed to set the ’volume’ property on ’HTMLMediaElement’: The volume provided (1.1) is outside the range [0, 1]另外，代碼沒(méi)有通過(guò)連續(xù)點(diǎn)擊測(cè)試，聲音沒(méi)達(dá)到最大時(shí)再點(diǎn)checkbox，會(huì)出現(xiàn)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;這里會(huì)有精度問(wèn)題，一直減0.1不是到從1到0 m1.volume = m1.volume-0.1<=0?0:m1.volume-0.1;}else{ m1.pause(); clearInterval(timer);} },200);} }`