Question

我正在使用Simon游戏获得FreeCodeCamp.com上的第一个证书我有6个不同的音频文件，可以响应不同的事件。我正在尝试添加音量滑块来控制此标签的音量。 如何使用一个滑块控制所有卷？

的JavaScript

window.SetVolume = function(val)
{

  var player = document.getElementsByTagName("audio");
    console.log('Before: ' + player.volume);
    player.volume = val / 100;
    console.log('After: ' + player.volume);
}
const playerInput = document.getElementById('player_sInput')
const pads = document.querySelectorAll('.pad')
var player_sInput = []

// Convert the pad list to an array so that 
// we can iterate over it using .forEach()
Array.from(pads).forEach((pad, index) => {

  // Get the associated audio element nested
  // in the pad-div
  const audio = pad.querySelector('audio')

  // Add a click listener to each pad which
  // will play the audio, push the index to 
  // the user input array, and update the span
  pad.addEventListener('click', () => {
    audio.play()
    player_sInput.push(index)
    playerInput.textContent = "Player's reply " +player_sInput
  })
})

var simon_sSequence = [];

function audioBlack() {
  //clear player's input for this turn
 player_sInput = [];
  //generate a random number
  //push random number to simon_sSequence
  simon_sSequence.push(Math.floor(Math.random() * 3));
  console.log(simon_sSequence);
  $("#simon_sSequence").text("Simon says " +simon_sSequence);
//  $("#player_sInput").text("Player's reply " +player_sInput);
  //for each in the array set time interval(300ms);
  //dipslay hover effect
  //play pad sound
  var audio = document.getElementById("audioBlue");
  audio.play();
}

HTML

<body>
<input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
  <div id="container">
    <div id="green" class="pad" onclick="audioPad['green'].play()">
      <audio preload="auto" id="audioGreen" <source src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg" />
      </audio>
    </div>
    <!-- upper left -->

    <div id="red" class="pad" onclick="audioPad['red'].play()">
      <audio preload="auto" id="audioRed" <source src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3" type="audio/mpeg" />
      </audio>
    </div>
    <!-- upper right -->

    <div id="yellow" class="pad" onclick="audioPad['yellow'].play()">
      <audio preload="auto" id="audioYellow" <source src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3" type="audio/mpeg" />
      </audio>
    </div>
    <!-- lower left -->

    <div id="blue" class="pad" onclick="audioPad['blue'].play()">
      <audio preload="auto" id="audioBlue" <source src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3" type="audio/mpeg" />
      </audio>
    </div>
    <!-- lower right -->

    <div id="startTapper" class="pad" onclick="audioBlack()">
      <div>
        <span id="simon_sSequence">Shall we</span>
        <span id="player_sInput">play a game?</span>
      </div>
      <!-- end of "display" -->
    </div>
    <!-- end of "startTapper" -->
  </div>
  <!-- end of "container" -->
</body>

Answer 1

当然看起来你很亲密。只需要在音频对象上设置音量属性。

1）跟踪全局卷变量

var globalVolume = 1;

2）在你的setVolume函数中，当用户更改它时更改globalVolume

player.volume = val / 100;
globalVolume = player.volume;

3）在pad.addEventListener('click')事件内，就在您致电audio.play()之前，设置音频的音量属性

audio.volume = globalVolume;
audio.play();

您的codepen具有上述修改; https://codepen.io/joshuaohana/pen/LLQKmd?editors=1011

如何使用一个滑块控制所有卷？

1 个答案: