Question

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

<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

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

首先，在您提供的示例中，您尚未关闭音频标记。

其次，您只是设置全局vol var而不是音频对象本身的音量。

你可以尝试的是保持功能范围并使用实际的音频对象音量而不是全局音频对象音量。 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.每2千秒减少0.2（20％）会淡出＆＃39;在0.1秒内！

以上是Fiddle。

您可能需要考虑在淡入淡出完成时或再次单击播放时重置音频currentTime和音量（注意：没有停止方法，因此暂停和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中的上述示例。

希望这有帮助！

修改

关于淡入淡出，您可以复制＆＃39; aud_fade＆＃39;方法但小于1时增加音量而不是大于0时减小音量比调用启动方法中的淡入方法：

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。

Answer 2

试试这个：

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

使用javascript淡出Mp3歌曲

2 个答案: