关于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>

代码如上，想要做一个点击checkbox实现背景音乐淡入淡出的小功能，淡入可以实现，但是淡出时，我想要音量变为0时，自动暂停。但是我这个音量变为0之后，进度条仍然在走，m1.pause()没有生效。。

实在搞不明白，前端小白，求指导π-π