Question

我有一个有一些动物图像的页面，当你点击它们时它会播放动物的声音，但是因为它是一个孩子的游戏我有背景音乐，但声音太大了。我想在自动播放背景音乐时，音量变为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>

Answer 1

您需要的活动名为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 ;)
}

Answer 2

尝试在所有感兴趣的音频元素上添加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;
}

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

2 个答案: