使用javascript淡出Mp3歌曲

我正在尝试创建一个HTML文件，其中嵌入了一些javascript，允许我按下按钮并开始淡出歌曲。我已经设法让它工作，以便它播放歌曲（这是一个开始）。但我一直在玩第二个函数，试图让它减少音量，并设置该函数的延迟，有人能帮忙吗

<audio id="myAudio"
 <source src="1.mp3"
         type='audio/mp4'>
</audio>
<button type="button" onclick="aud_play()">Play</button>
<button type="button" onclick="aud_fade()">Fade</button>

<script>
var vol = myAudio.volume;
var timer;
function aud_play() {
  var myAudio = document.getElementById("myAudio");
    myAudio.play();

}

function aud_fade(){
 var myAudio = document.getElementById("myAudio");
 if (vol > 0) {
    vol = vol - 0.2 ;
}
timer = setTimeout(aud_fade,2);
}
</script>

0）{
vol=vol-0.2；
}
定时器=设置超时（音频衰减，2）；
}

试试这个：

function aud_fade() {
    var myAudio = document.getElementById("myAudio");
    if (myAudio.volume > 0) {
        myAudio.volume -= .2;
        timer = setTimeout(aud_fade, 200);
    }
}

---

有几件事似乎需要解决；）

首先，在您提供的示例中，您没有关闭音频标记

其次，您只设置了一个全局音量变量，而不是音频对象本身的音量

您可以尝试的是将事情的范围限制在函数中，并使用实际的音频对象音量，而不是“全局”音量变量：

<script>
    function aud_play() {
        var myAudio = document.getElementById("myAudio");
        myAudio.play();
    }

    function aud_fade(){
        var timer,
            myAudio = document.getElementById("myAudio");
        if (myAudio.volume > 0) {
            myAudio.volume -= 0.005;
            timer = setTimeout(aud_fade,5);
        }
    }
</script>

<audio id="myAudio">
    <source src="1.mp3" type='audio/mp4'>
</audio>
<button type="button" onclick="aud_play()">Play</button>
<button type="button" onclick="aud_fade()">Fade</button>

函数aud_play（）{
var myAudio=document.getElementById（“myAudio”）；
myAudio.play（）；
}
函数aud_fade（）{
var定时器，
myAudio=document.getElementById（“myAudio”）；
如果（myAudio.volume>0）{
myAudio.volume-=0.005；
定时器=设置超时（音频衰减，5）；
}
}

您可能想考虑在淡入淡出完成或再次单击播放时重置音频当前时间和音量（注意：没有停止方法，因此暂停和当前时间可以实现相同的事情）：

var fadeTimer=false；
var aud_play=函数（）{
clearTimeout（fadeTimer）；
var myAudio=document.getElementById（“myAudio”）；
myAudio.volume=1；
myAudio.currentTime=0；
myAudio.play（）；
}
var aud_fade=函数（）{
var myAudio=document.getElementById（“myAudio”）；
如果（myAudio.volume>0.005）{
myAudio.volume-=0.005；
fadeTimer=设置超时（aud_fade，5）；
}否则{
myAudio.volume=0；
myAudio.pause（）；
myAudio.currentTime=0；
}
}

希望这有帮助

编辑：

关于淡入，您可以复制“aud_Fade”方法，但在小于1时增加音量，而不是在大于0时减少音量，而不是在开始方法上调用淡入方法：

var aud_play = function() {
    clearTimeout(fadeTimer);
    var myAudio = document.getElementById("myAudio");
    myAudio.volume = 0; // 0 not 1, so we can fade in
    myAudio.currentTime = 0; // set mp3 play positon to the begining
    myAudio.play(); // start mp3
    aud_fade_in(); // call fade in method
};

var aud_fade_in = function() {
    clearTimeout(fadeTimer);
    var myAudio = document.getElementById("myAudio");
    if (myAudio.volume < 9.995) {
        myAudio.volume += 0.005;
        fadeTimer = setTimeout(aud_fade_in,10);
    } else {
        myAudio.volume = 1;
    }
};

var aud_fade_out = function() {
    clearTimeout(fadeTimer);
    var myAudio = document.getElementById("myAudio");
    if (myAudio.volume > 0.005) {
        myAudio.volume -= 0.005;
        fadeTimer = setTimeout(aud_fade_out,5);
    } else {
        myAudio.volume = 0;
        myAudio.pause();
        myAudio.currentTime = 0;
    }
};

var aud_play=function（）{
clearTimeout（fadeTimer）；
var myAudio=document.getElementById（“myAudio”）；
myAudio.volume=0；//0不是1，所以我们可以淡入
myAudio.currentTime=0；//将mp3播放位置设置为开始位置
myAudio.play（）；//启动mp3
aud_fade_in（）；//调用淡入方法
};
var aud_fade_in=函数（）{
clearTimeout（fadeTimer）；
var myAudio=document.getElementById（“myAudio”）；
如果（myAudio.volume<9.995）{
myAudio.volume+=0.005；
fadeTimer=设置超时（aud_fade_in，10）；
}否则{
myAudio.volume=1；
}
};
var aud_fade_out=函数（）{
clearTimeout（fadeTimer）；
var myAudio=document.getElementById（“myAudio”）；
如果（myAudio.volume>0.005）{
myAudio.volume-=0.005；
fadeTimer=setTimeout（音频淡出，5）；
}否则{
myAudio.volume=0；
myAudio.pause（）；
myAudio.currentTime=0；
}
};

这是a中的上述内容。
非常感谢，太完美了！我需要更改什么以淡入？您只需在小于1时增大音量，而不是在大于0时减小音量。您可能希望将这些方法重命名为“aud_fade_in”和“aud_fade out”，以避免混淆，从play方法调用aud_fade_in。我已经用一个例子编辑了上面的答案。对于我的案例来说，这已经足够简单了！但是我必须将它修改为
myAudio.volume-=Math.min（myAudio.volume，0.2）
，这样如果剩下的值小于0.2，它就不会崩溃。
var aud_play = function() {
    clearTimeout(fadeTimer);
    var myAudio = document.getElementById("myAudio");
    myAudio.volume = 0; // 0 not 1, so we can fade in
    myAudio.currentTime = 0; // set mp3 play positon to the begining
    myAudio.play(); // start mp3
    aud_fade_in(); // call fade in method
};

var aud_fade_in = function() {
    clearTimeout(fadeTimer);
    var myAudio = document.getElementById("myAudio");
    if (myAudio.volume < 9.995) {
        myAudio.volume += 0.005;
        fadeTimer = setTimeout(aud_fade_in,10);
    } else {
        myAudio.volume = 1;
    }
};

var aud_fade_out = function() {
    clearTimeout(fadeTimer);
    var myAudio = document.getElementById("myAudio");
    if (myAudio.volume > 0.005) {
        myAudio.volume -= 0.005;
        fadeTimer = setTimeout(aud_fade_out,5);
    } else {
        myAudio.volume = 0;
        myAudio.pause();
        myAudio.currentTime = 0;
    }
};