单击“暂停”按钮时，fadeOut（）会发出声音

Question

单击暂停按钮时如何使声音淡出？

<script>
var sounds = [
    "sounds/royksopp.mp3",
    "sounds/9thwonder.mp3",
    "sounds/thisbeat.mp3",
    "sounds/mosdef.mp3",
    "sounds/bewater.mp3",
    "sounds/boutdre.mp3",
    "sounds/masterflash.mp3",
    "sounds/2ep.mp3",
    "sounds/drewestcoast.mp3",
    "sounds/poetry.mp3",
    "sounds/mfdoom.mp3",
    "sounds/oizo.mp3",
];

function StartOrStop(audioFile) {
    srcAudio = sounds[Math.floor(Math.random() * sounds.length)];
    var audie = document.getElementById("myAudio");
    audie.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);

    if (audie.paused == false) {
        audie.pause();
    } else {
        audie.src = srcAudio;
        audie.play();
    }
}
</script> 

然后，我将其称为：

<audio id="myAudio"></audio>

<button id="idj-play-button" onclick="StartOrStop()" class="btn btn-lg"><i class="glyphicon glyphicon-play"></i>
</button>

<button id="idj-pause-button" onclick="StartOrStop()" class="btn btn-lg hide"><i class="glyphicon glyphicon-refresh"></i>
</button>

我是否需要在If / Else语句audie.pause()上进行某些更改？ 我已经试过audie.animate({volume: 0}, 1000); 但这没用。

谢谢。

Answer 1

audie.animate({volume: 0}, 1000); 仅当您使用jQuery时才能工作。

您可以进行如下更改：

if (audie.paused == false) {
    let interval = setInterval(() => {
        if (audie.volume == 0) {
             audie.pause();
             clearInterval(interval);
        }
        audie.volume -= 0.05; 
    }, 800);
}

Answer 2

尝试这个：

   <script>
    var sounds = [
        "sounds/royksopp.mp3",
        "sounds/9thwonder.mp3",
        "sounds/thisbeat.mp3",
        "sounds/mosdef.mp3",
            "sounds/bewater.mp3",
            "sounds/boutdre.mp3",
            "sounds/masterflash.mp3",
            "sounds/2ep.mp3",
        "sounds/drewestcoast.mp3",
            "sounds/poetry.mp3",
            "sounds/mfdoom.mp3",
        "sounds/dreams.mp3",
        "sounds/oizo.mp3", ];

    function Start(audioFile) {
        srcAudio = sounds[Math.floor(Math.random()*sounds.length)];
        var audie = document.getElementById("myAudio");
        audie.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
        }, false);

                $(audie).animate({volume: 0.9}, 0);
                audie.src = srcAudio;
                audie.play();

          }

    function Stop(audioFile) {
        var audie = document.getElementById("myAudio");

                $(audie).animate({volume: 0}, 400);

          }
</script> 

HTML：

<audio id="myAudio"></audio>

<button id="idj-play-button" onclick="Start()" class="btn btn-lg"><i class="glyphicon glyphicon-play"></i>
</button>

<button id="idj-pause-button" onclick="Stop()" class="btn btn-lg hide"><i class="glyphicon glyphicon-refresh"></i>
</button>