どのようにすべてのボリュームをコントロールするために1つのスライダを使用しますか？

CodePen, audio question どのようにすべてのボリュームをコントロールするために1つのスライダを使用しますか？

私は様々なイベントに対応して再生する6つのオーディオファイルを持っているFreeCodeCamp.com で最初の証明書のサイモンゲームに取り組んでいます。ボリュームスライダを追加してこのタブのボリュームを制御しようとしています。 どのようにすべてのボリュームをコントロールするために1つのスライダを使用しますか？

は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>

出典

2017-06-30 TurtleWolf

は確かにあなたは超接近していた同類を探します。オーディオオブジェクトのボリューム属性を設定するだけで済みます。

1）直前に、ユーザーが

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

3それを変更するようpad.addEventListener('click')イベント内）globalVolumeを変え、あなたのsetVolume関数内）

var globalVolume = 1;

2グローバルボリューム変数を追跡しますaudio.play()と呼び出し、オーディオのボリューム属性を設定します。

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

コードネームに上記の変更を加えたもの。 https://codepen.io/joshuaohana/pen/LLQKmd?editors=1011

出典

2017-06-30 17:59:58

私は意図的に自分の作品の古いコピーを使用しました。この最新のバージョンには、さまざまなイベントリスナーの2つのオーディオファイルがありますが、あなたの答えは、私がそれらをどのように追加するかを理解していたほど十分に明確でした。 [リンク]（http：// https：//codepen.io/TurtleWolf/pen/xrWxGg？editors = 0010） – TurtleWolf

どのようにすべてのボリュームをコントロールするために1つのスライダを使用しますか？

答えて

関連する問題