Wie verwende ich einen Schieberegler, um alle Volumes zu steuern?

CodePen, audio question Wie verwende ich einen Schieberegler, um alle Volumes zu steuern?

ich FreeCodeCamp.com auf dem Simon-Spiel für das erste Zertifikat gerade arbeite Ich habe 6 verschiedene Audiodateien, die auf verschiedene Ereignisse als Antwort spielen. Ich versuche, einen Lautstärkeregler hinzuzufügen, um die Lautstärke dieser Registerkarte zu steuern. Wie verwende ich einen Schieberegler, um alle Volumes zu steuern?

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>

Quelle

2017-06-30 TurtleWolf

Sicher sieht Gleichen Sie ganz nah waren. Sie müssen nur das Lautstärke-Attribut für Ihr Audio-Objekt festlegen.

1) Verfolgen Sie die globalen Volumen variable

var globalVolume = 1;

2) In Ihrer setVolume Funktion ändern globalVolume wie der Benutzer es ändert

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

3) Innerhalb der pad.addEventListener('click') Veranstaltung, kurz vor Sie rufen audio.play(), stellen Sie die Lautstärke-Attribut des Audio-

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

Ihr Codepen mit der obigen Modifikation; https://codepen.io/joshuaohana/pen/LLQKmd?editors=1011

Quelle

2017-06-30 17:59:58

Ich habe absichtlich eine ältere Kopie meiner Arbeit verwendet. Diese neuere Version hat zwei andere Audiodateien von verschiedenen Event-Listenern, aber Ihre Antwort war klar genug, dass ich verstanden habe, wie ich sie auch hinzufügen kann. [link] (http: // https: //codepen.io/TurtleWolf/pen/xrWxGg? Editoren = 0010) – TurtleWolf

Wie verwende ich einen Schieberegler, um alle Volumes zu steuern?

Antwort

Verwandte Themen