音频循环平滑开始/结束

Question

我有两个按钮。当我单击“开始”时，它会开始循环播放音频，单击“结束”按钮将停止播放。 现在音频按原样开始和结束，但是我希望音频平滑地淡入，并且也平滑地停止而不是突然。我读了很多解决方案，但没有一个像我一样使用相同的嵌入方法，并且不知道如何集成它们。

我的代码：

$(document).ready(function() {

    var audioElement = document.createElement('audio');
    audioElement.loop=true;
    audioElement.volume=0;
    audioElement.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);
    audioElement.addEventListener('ended', function() {
        this.pause();
    }, true);

    $('.button-start').click(function(){
        audioElement.setAttribute('src', 'media/music.mp3');
        audioElement.animate({volume: 1}, 1000);
        audioElement.play();
    });
    $('.button-end').click(function(){
        audioElement.animate({volume: 0}, 1000);
        audioElement.pause();
        audioElement.currentTime = 0;
    });

});

我添加了

audioElement.volume=0

和开始单击功能

audioElement.animate({volume: 1}, 1000);

，以及停止单击功能上的音量：0，但在这种情况下，音频甚至无法启动。

如果有人知道解决方案，请尝试给我一个明确的答案，因为我是出于爱好编写我的个人网站，我不专业。

Answer 1

最好的方法是使用 setInterval 函数进行循环。

$(document).ready(function() {
  var audioElement      = document.createElement('audio');
  audioElement.id       = 'audio-player';
  audioElement.controls = 'controls';
  audioElement.loop     = true;
  audioElement.type     = 'audio/mpeg';
  audioElement.src      = 'https://upnow-prod.ff45e40d1a1c8f7e7de4e976d0c9e555.r2.cloudflarestorage.com/d1ssYtCPdBd5hm6PO3SfNKbf51I2/80b1f91d-045f-4a2d-8dbd-34ebd2bf65f9?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=cdd12e35bbd220303957dc5603a4cc8e%2F20231005%2Fauto%2Fs3%2Faws4_request&X-Amz-Date=20231005T150523Z&X-Amz-Expires=43200&X-Amz-Signature=f6196f97ceed3262d53b4c94876f7947bca5d9dbbe724de5d593a900cbd6ad47&X-Amz-SignedHeaders=host&response-content-disposition=attachment%3B%20filename%3D%22BF3%20-%20Prgressive.mp3%22';
  document.getElementById('song').appendChild(audioElement);

    audioElement.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);
    audioElement.addEventListener('ended', function() {
        this.pause();
    }, true);

    $('.button-start').click(function(){
        audioElement.play();
        fadeInAudio(audioElement, 1500);
    });
    $('.button-stop').click(function(){
        fadeOutAudio(audioElement, 1500);
    });
});

function fadeOutAudio(audio, fadeTime){ 
    audio.volume = 1; // set volume to the maximum 
    var steps = 300;
    var stepTime = fadeTime/steps;
    var audioDecrement = audio.volume / steps;

    var timer = setInterval(function(){
        audio.volume -= audioDecrement;
        console.log(audio.volume);

        if (audio.volume <= 0.03){ //if its already inaudible stop the loop
             audio.volume = 0;
             clearInterval(timer);
        }
    }, stepTime);
}

function fadeInAudio(audio, fadeTime){ 
    audio.volume = 0; // set volume to the minimum 
    var steps = 300;
    var stepTime = fadeTime/steps;
    var audioIncrement = parseFloat(audio.volume + ("0.00" + steps));

    var timer = setInterval(function(){
        audio.volume += audioIncrement;
        console.log(audio.volume);

        if (audio.volume >= 0.99){ //if its already audible stop the loop
             audio.volume = 1;
             clearInterval(timer);
        }
    }, stepTime);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="song"></div>

<button class="button-start">Start</button><br>
<button class="button-stop">Stop</button>