javascript 音频淡出

Question

当我按下键盘上的 'Arrow Up' 按钮时，我希望我的音频淡出并停止。好像淡出，却又出现，永不停息。

music.html:48 未捕获的 IndexSizeError：无法在 'HTMLMediaElement' 上设置 'volume' 属性：提供的音量 (-0.1) 在外部范围 [0, 1].

我是Javascript的初学者。

这是我的代码。

HTML

    <body>

<input type="text" size="3" value="1" id="numtext" style="font-size:500px" >

<audio id=1>
    <source src=BGM/a.mp3>
</audio>

<audio id=2>
    <source src=BGM/b.mp3>
</audio>

<audio id=3>
    <source src=BGM/c.mp3>
</audio>

</body>

Javascript

    <script language="JavaScript">

var interval
var timeout

document.onkeydown = function() {

if(event.keyCode == 38){
        var x = document.getElementById('numtext').value;
            var sounds = document.getElementById(x);

        interval = setInterval(fade, 200);

        return;

        }
}

function fade() {

        var x = document.getElementById('numtext').value;
            var sounds = document.getElementById(x);
        sounds.volume = sounds.volume - 0.1;

        var timer = setTimeout(function() {

        window.clearInterval(interval);
        for(i=0; i<sounds.length; i++) sounds[i].pause(); 
        for(i=0; i<sounds.length; i++) sounds[i].currentTime = 0;

        }, 2000);

        timeout = setTimeout(stopFade, 2000);

}

function stopFade() {
        var x = document.getElementById('numtext').value;
            var sounds = document.getElementById(x);

        for(i=0; i<sounds.length; i++) sounds[i].pause(); 
        for(i=0; i<sounds.length; i++) sounds[i].currentTime = 0;
        sounds.volume = 1;

}

</script>

有什么建议吗？

Answer 1

您的淡入淡出功能需要检查其分配的音量是否在 0 和 1 之间。由于您只是将音量调低，因此您可以检查它是否大于 0。

var interval
var timeout

document.onkeydown = function() {

    if(event.keyCode == 38){
        interval = setInterval(fade, 200);
    }

}

function fade() {

        var x = document.getElementById('numtext').value;
        var sounds = document.getElementById(x);

        var newVolume = sounds.volume - 0.1;

        // Check if the newVolume is greater than zero
        if(newVolume >= 0){
            sounds.volume = newVolume;
        }
        else{
            // Stop fade
            clearInterval(interval);
            sounds.volume = 0;
            sounds.pause();
            sounds.currentTIme = 0;
        }

}

我已经删除了这里不需要的代码。

javascript 音频淡出

javascript audio fade out

html

javascript

audio

fadeout