jquery 音频循环平滑开始/结束

643ylb08 于 2023-10-17 发布在 jQuery

关注(0)|答案(1)|浏览(102)

我有两个按钮。当我点击开始，它开始播放音频循环，并与结束按钮点击它停止播放。现在音频开始和结束，因为它是，但我想淡出音频顺利，也停止顺利，而不是突然。我读了很多解决方案，但没有一个像我一样使用相同的嵌入方法，也不知道如何集成它们。
我的代码：

$(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停止点击功能，但在这种情况下，音频甚至不启动。
如果有人知道解决方案，请尽量给我一个明确的答案，因为我编码我的个人网站的爱好，我不是专业的给予。

jquery

来源：https://stackoverflow.com/questions/77238279/audio-loop-smooth-start-end

1条答案

按热度按时间

wnvonmuf1#

最好的方法是使用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, 1000);
  });
  $('.button-stop').click(function(){
      fadeOutAudio(audioElement, 1000);
  });
});

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

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

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

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

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

    if (audio.volume <= 0.03){ //if its already inaudible stop the loop
       console.clear();
       console.log("0");
       audio.volume = 0;
       audio.pause(); 
       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>
<button class="button-stop">Stop</button>

赞(0）回复(0）举报 2023-10-17

我来回答

jquery 音频循环平滑开始/结束

1条答案

相关问题

热门标签

最新问答