Question

我希望淡出所有播放的音频。我尝试了 getElementsByTagName ，但似乎无法使用音量。我有几个音频，我将id命名为数字。检查我的HTML和JS代码。

HTML

<input type="text" size="3" value="1" id="numtext" style="font-size:700pt" >

<audio id=1>
    <source src=BGM/a.mp3>
</audio>

<audio id=2>
    <source src=BGM/b.mp3>
</audio>

<audio id=3>
    <source src=BGM/c.mp3>
</audio>

JS

    function fade() {

        var x = document.getElementById('numtext').value;
        var sounds = document.getElementById(x);

        var newVolume = (sounds.volume) - 0.07;

        // Check if the newVolume is greater than zero
        if(newVolume >= 0){
            sounds.volume = newVolume;
        }
        else{
            // Stop fade
        sounds.pause();
        sounds.currentTime = 0;
        sounds.volume = 1;

            clearInterval(interval);
        }

}

欢迎任何提示。

Answer 1

您可以尝试选择所有音频元素：

    var audios = document.getElementsByTagName('audio');

然后，您可以在音频列表中执行任何操作

    for(i=0;i<audios.length;i++){
      //Do your stuff here on audios[i]
    }

希望它有所帮助！

Answer 2

当你想要操纵多个元素时，你应该使用一个类。

示例：

假设我们为所有音频代码提供了一类audio-list ..

<audio class="audio-list" id="1">...</audio>

使用案例

var audioList = document.querySelectorAll('.audio-list');

然后：

document.querySelectorAll() will return an array list of elements

您需要使用此for-loop

循环播放音频元素列表

for(var i = 0; i > audioList.length ; i++){

    //fadeOut your audio    
}

另一个建议是，如果你一次播放多个声音，你会最有可能发现音频api方便其音频缓冲支持和控制多个音频通道文档：https://developer.mozilla.org/en-US/docs/Web/API/AudioBuffer

Javascript所有音频淡出

2 个答案: