Question

我希望在用户点击图片时减少<audio>的音量。

HTML：

<div id="cloud">
<img name="jsVolumeButton"  src="images/cloud.png" width = "140px"/> </div>
<audio id="player" src="sounds/rain.MP3" autoplay loop></audio>

JS：

var myimgobj = document.images.jsVolumeButton.onclick();
var mysoundobj = document.sounds.player;
function onclick() {
 if(document.getElementById('player').volume === 0){
     document.getElementById('player').volume = 1;
 }else
    document.getElementById('player').volume -= 0.1; 
    return true;
}

如您所见，我对HTML / JS的了解非常有限。到目前为止我只做了C ++，并且只是做了一些学习，但是我正在寻找一个我需要问的墙。

我想点击图片并将音量降低0.1。如果它达到0，我希望它再次以满音量播放。我认为这应该是可能的。

Answer 1

好的，我明白了： HTML：

<img name="jsVolumeButton"  src="images/cloud.png" width = "140px" onClick="onClickImage()"/> </div>

JS：

function onClickImage() {
  document.getElementById('player').volume -= 0.2; 
    if(document.getElementById('player').volume <= 0.1){
     document.getElementById('player').volume += 1;
 }
    return true;
}

Answer 2

我认为有一种比你想做的更简单，更有效的解决方案。

只需使用这样的html属性controls：

<audio src="Your/src.mp3" controls></audio>

请注意上述代码中的controls。干杯！

在javascript中降低html音频的音量

2 个答案: