使用 javascript 淡出 Mp3 歌曲

Question

我正在尝试创建一个 HTML 文件，其中嵌入了一些 javascript 允许我按下按钮并开始淡出歌曲。我设法让它工作，以便播放歌曲（这是一个开始）。但我一直在玩第二个功能，试图让它降低音量并在该功能上设置延迟，有人能帮忙吗？！

<audio id="myAudio"
 <source src="1.mp3"
         type='audio/mp4'>
</audio>
<button type="button" onclick="aud_play()">Play</button>
<button type="button" onclick="aud_fade()">Fade</button>

<script>
var vol = myAudio.volume;
var timer;
function aud_play() {
  var myAudio = document.getElementById("myAudio");
    myAudio.play();

}

function aud_fade(){
 var myAudio = document.getElementById("myAudio");
 if (vol > 0) {
    vol = vol - 0.2 ;
}
timer = setTimeout(aud_fade,2);
}
</script>

Answer 1

试试这个：

function aud_fade() {
    var myAudio = document.getElementById("myAudio");
    if (myAudio.volume > 0) {
        myAudio.volume -= .2;
        timer = setTimeout(aud_fade, 200);
    }
}

Answer 2

有几件事似乎需要解决 ;)

首先，在您提供的示例中，您没有关闭音频标签。

其次，您只设置了一个全局音量变量，而不是音频对象本身的音量。

您可以尝试将事物限制在函数范围内并使用实际的音频对象音量而不是 'global' vol var:

<script>
    function aud_play() {
        var myAudio = document.getElementById("myAudio");
        myAudio.play();
    }

    function aud_fade(){
        var timer,
            myAudio = document.getElementById("myAudio");
        if (myAudio.volume > 0) {
            myAudio.volume -= 0.005;
            timer = setTimeout(aud_fade,5);
        }
    }
</script>

<audio id="myAudio">
    <source src="1.mp3" type='audio/mp4'>
</audio>
<button type="button" onclick="aud_play()">Play</button>
<button type="button" onclick="aud_fade()">Fade</button>

我还调整了超时和减少音量，因为音量从 0 到 1。每 2000 秒减少 0.2（20%）将在 0.1 秒内 'fade out' !

以上是Fiddle.

你可以考虑在淡入淡出或再次点击播放时重新设置音频currentTime和音量（注意：没有stop方法，所以pause和currentTime可以达到同样的效果）：

<script>

    var fadeTimer = false;

    var aud_play = function() {
        clearTimeout(fadeTimer);
        var myAudio = document.getElementById("myAudio");
        myAudio.volume = 1;
        myAudio.currentTime = 0;
        myAudio.play();
    }

    var aud_fade = function() {
        var myAudio = document.getElementById("myAudio");
        if (myAudio.volume > 0.005) {
            myAudio.volume -= 0.005;
            fadeTimer = setTimeout(aud_fade,5);
        } else {
            myAudio.volume = 0;
            myAudio.pause();
            myAudio.currentTime = 0;
        }
    }
</script>

<audio id="myAudio">
    <source src="1.mp3" type='audio/mp4'>
</audio>
<button type="button" onclick="aud_play()">Play</button>
<button type="button" onclick="aud_fade()">Fade</button>

上面的例子在另一个Fiddle.

希望对您有所帮助！

编辑：

关于 Fade In，你可以复制 'aud_fade' 方法，但在小于 1 时增加音量而不是在大于 0 时减小音量，而不是在 start 方法上调用 fade in 方法：

var aud_play = function() {
    clearTimeout(fadeTimer);
    var myAudio = document.getElementById("myAudio");
    myAudio.volume = 0; // 0 not 1, so we can fade in
    myAudio.currentTime = 0; // set mp3 play positon to the begining
    myAudio.play(); // start mp3
    aud_fade_in(); // call fade in method
};

var aud_fade_in = function() {
    clearTimeout(fadeTimer);
    var myAudio = document.getElementById("myAudio");
    if (myAudio.volume < 9.995) {
        myAudio.volume += 0.005;
        fadeTimer = setTimeout(aud_fade_in,10);
    } else {
        myAudio.volume = 1;
    }
};

var aud_fade_out = function() {
    clearTimeout(fadeTimer);
    var myAudio = document.getElementById("myAudio");
    if (myAudio.volume > 0.005) {
        myAudio.volume -= 0.005;
        fadeTimer = setTimeout(aud_fade_out,5);
    } else {
        myAudio.volume = 0;
        myAudio.pause();
        myAudio.currentTime = 0;
    }
};

以上是Fiddle.

使用 javascript 淡出 Mp3 歌曲

Fade out of a Mp3 song using javascript

javascript

html

function

button

mp3