I'd like to control volume via JavaScript.
I found how to control Audio object. But, I can't know how to control settings of volume.
Could you tell me how to control volume via JavaScript or by some good modules?
I'd like to control volume via JavaScript.
I found how to control Audio object. But, I can't know how to control settings of volume.
Could you tell me how to control volume via JavaScript or by some good modules?
Share Improve this question edited Dec 31, 2018 at 14:17 Matthieu Brucher 22k7 gold badges42 silver badges65 bronze badges asked Mar 23, 2015 at 7:41 shinriyoshinriyo 3441 gold badge4 silver badges17 bronze badges 02 Answers
Reset to default 4Here is some javascript which gives browser a widget to change volume while rendering audio ... just update below and populate variable audio_url with some audio file (mp3) which you put into same dir as below code
<html>
<head>
<title>render audio with volume control</title>
</head>
<body>
<p>Volume</p>
<input id="volume" type="range" min="0" max="1" step="0.1" value="0.5"/>
<script>
var audio_context = null;
var gain_node = null;
window.AudioContext = window.AudioContext || window.webkitAudioContext;
audio_context = new AudioContext();
gain_node = audio_context.createGain(); // Declare gain node
gain_node.connect(audio_context.destination); // Connect gain node to speakers
function render_audio() {
var request = new XMLHttpRequest();
var audio_url = "your_music.mp3";
request.open('GET', audio_url, true); // loading local file for now
request.responseType = 'arraybuffer';
// Decode asynchronously
request.onload = function() {
audio_context.decodeAudioData(request.response, function(buffer) {
stored_buffer = buffer; // store buffer for replay later
var source = audio_context.createBufferSource(); // creates a sound source
source.buffer = buffer; // tell the source which sound to play
source.connect(gain_node); // connect source to speakers
source.start(0); // play the source now
});
};
request.send();
}
// --- enable volume control for output speakers
document.getElementById('volume').addEventListener('change', function() {
var curr_volume = this.value;
gain_node.gain.value = curr_volume;
console.log("curr_volume ", curr_volume);
});
// init
render_audio();
</script>
<body onkeypress="render_audio()">
<button onclick="render_audio()">play_again</button>
</body>
</html>
The following example to control audio volume is from Mozilla's Using HTML5 audio and video guide:
https://developer.mozilla/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video
<audio id="demo" src="audio.mp3"></audio>
<div>
<button onclick="document.getElementById('demo').play()">Play the Audio</button>
<button onclick="document.getElementById('demo').pause()">Pause the Audio</button>
<button onclick="document.getElementById('demo').volume+=0.1">Increase Volume</button>
<button onclick="document.getElementById('demo').volume-=0.1">Decrease Volume</button>
</div>
If you are looking to access the system volume, then the answer is that JavaScript cannot do that. This was previously discussed here:
Javascript: Can you read the systems volume?