自动播放HTML时降低背景音乐音量

Lower background music volume when autoplay HTML

本文关键字：音乐 乐音 背景 HTML 自动播放      更新时间：2024-03-09

我有一个页面，上面有一些动物图像，当你点击它们时，它会播放动物的声音，但由于这是一个儿童游戏，我有背景音乐，但声音太大了。我希望当背景音乐自动播放时，音量变为0.5。我如何设置一个函数来实现这一点？我不想要基于点击的功能，我希望它隐藏起来并自动更改音量。

的功能（不起作用）

myAudio = document.getElementById("audio1");
function setHalfVolume() { 
    myAudio.volume = 0.4;
}

HTML

<audio id= "audio1" controls="controls"  onload="setHalfVolume()">
    <source src="Audio'Jaunty Gumption.mp3"  type="audio/mp3">
</audio>

您需要的事件称为onloadeddata。

此外，除非您需要从其他函数或全局访问myAudio变量，否则我建议将其移动到setHalfVolume函数中。试试看。

将HTML更改为：

<audio id= "audio1" controls="controls" onloadeddata="setHalfVolume()">
    <source src="Audio'Jaunty Gumption.mp3"  type="audio/mp3">
</audio>

将您的JavaScript更改为：

function setHalfVolume() {
    var myAudio = document.getElementById("audio1");  
    myAudio.volume = 0.5; //Changed this to 0.5 or 50% volume since the function is called Set Half Volume ;)
}

尝试在所有感兴趣的音频元素上为play添加一个事件，并在其中调用setHalfVolume：

document.querySelector('#audio1').addEventListener('play', setHalfVolume);

您可能还想在之后将音量重置为正常

document.querySelector('#audio1').addEventListener('pause', resetVolume);

其中resetVolume和setHalfVolume的声明有点像：

function setHalfVolume() { 
    document.getElementById("audio1").volume /= 2;
}
function resetVolume() { 
    document.getElementById("audio1").volume *= 2;
}
相关文章：