Question

我想在随机位置开始和停止HTML5播放，淡入和淡出时段以平滑聆听体验。

这有什么样的机制？使用setTimeout（）？

手动提升音量

Answer 1

jQuery方式......

$audio.animate({volume: newVolume}, 1000);

编辑：其中$ audio是jQuery包装的音频元素，newVolume是0到1之间的双倍。

编辑：元素的有效媒体音量是音量，相对于0.0到1.0的范围进行解释，其中0.0表示静音，1.0表示最响亮的设置，其值介于响度增加之间。范围不必是线性的。 http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#effective-media-volume

编辑：人们正在发布vanilla JavaScript实现，因此我将发布一个保留jQuery swing动画的vanilla TypeScript（如果你想在JavaScript中运行它，则删除类型信息）。 免责声明，这是完全未经测试的：

export async function adjustVolume(
    element: HTMLMediaElement,
    newVolume: number,
    {
        duration = 1000,
        easing = swing,
        interval = 13,
    }: {
        duration?: number,
        easing?: typeof swing,
        interval?: number,
    } = {},
) {
    const originalVolume = element.volume;
    const delta = newVolume - originalVolume;
    if (!delta || !duration || !easing || !interval) {
        element.volume = newVolume;
        return Promise.resolve();
    }
    const ticks = Math.floor(duration / interval);
    let tick = 1;
    return new Promise<void>((resolve) => {
        const timer = setInterval(() => {
            element.volume = originalVolume + (
                easing(tick / ticks) * delta
            );
            if (++tick === ticks) {
                clearInterval(timer);
                resolve();
            }
        }, interval);
    });
}

export function swing(p: number) {
    return 0.5 - Math.cos(p * Math.PI) / 2;
}

Answer 2

老问题但是如果有人正在寻找一种香草JS的方式来做这件事，我只是为项目写了一些内容并且认为我在这里发布它因为我寻找解决方案是徒劳的。如果您已经在使用视频或音频元素，那么您很可能无需使用jQuery来控制对象。

function getSoundAndFadeAudio (audiosnippetId) {

    var sound = document.getElementById(audiosnippetId);

    // Set the point in playback that fadeout begins. This is for a 2 second fade out.
    var fadePoint = sound.duration - 2; 

    var fadeAudio = setInterval(function () {

        // Only fade if past the fade out point or not at zero already
        if ((sound.currentTime >= fadePoint) && (sound.volume != 0.0)) {
            sound.volume -= 0.1;
        }
        // When volume at zero stop all the intervalling
        if (sound.volume === 0.0) {
            clearInterval(fadeAudio);
        }
    }, 200);

}

此版本不允许编辑淡出时间（设置为2秒），但您可以轻松地对其进行论证。为了充分发挥这一作用，还需要额外的逻辑来首先检查音量设置的内容，以便知道将其淡出的因素。在我们的情况下，我们已经将音量预设为1，并且浏览器音量控制不在用户手中，因为它是幻灯片显示的东西，因此不需要。

要获取音频的特定部分，您需要检查可搜索的时间范围，并根据可用的内容随机设置当前时间。

Answer 3

我使用setTimeout（）创建了一个简单的库。

源代码可在此处获取：

https://github.com/miohtama/Krusovice/blob/master/src/tools/fade.js

Answer 4

这里有几个淡出当前歌曲和淡入新歌的功能。

<强> HTML：

<audio loop autoplay="1" onPlay="audioVolumeIn(this);"><br>
    <source src="/test/new/imgs/audio_bg.ogg" type="audio/ogg; codecs=vorbis"><br>
    <source src="/test/new/imgs/audio_bg.wav" type="audio/wav"><br>
<source src="/test/new/imgs/audio_bg.mp3" type="audio/mpeg"><br>

Javascript：

    function audioVolumeIn(q){
       if(q.volume){
          var InT = 0;
          var setVolume = 0.2; // Target volume level for new song
          var speed = 0.005; // Rate of increase
          q.volume = InT;
          var eAudio = setInterval(function(){
              InT += speed;
              q.volume = InT.toFixed(1);
              if(InT.toFixed(1) >= setVolume){
                 clearInterval(eAudio);
                 //alert('clearInterval eAudio'+ InT.toFixed(1));
              };
          },50);
       };
   };

   function audioVolumeOut(q){
       if(q.volume){
          var InT = 0.4;
          var setVolume = 0;  // Target volume level for old song 
          var speed = 0.005;  // Rate of volume decrease
          q.volume = InT;
          var fAudio = setInterval(function(){
              InT -= speed;
              q.volume = InT.toFixed(1);
              if(InT.toFixed(1) <= setVolume){
                 clearInterval(fAudio);
                 //alert('clearInterval fAudio'+ InT.toFixed(1));
              };
          },50);
       };
   };

Answer 5

这是用于淡化音频的简单超时功能（在这种情况下从0到100）。它使用全局变量。尽管如此，仍然在努力解决整个方案。我绝对会查看sfjedi的jQuery方式。

function FadeIn() {

    var sound = document.getElementById('audiosnippet');

    var vol = $.global.volume;

    if ( vol < 100 )
        {
            sound.volume = (vol / 100);
            $.global.volume = $.global.volume + 10;
            setInterval(function() { FadeIn() }, 1200);
        }

    }
}

HTML5 <audio>播放淡入淡出</audio>

5 个答案: