如何通过JavaScript控制浏览器的卷？

Question

I'd like to control volume via JavaScript. 我想通过JavaScript控制音量。

I found how to control Audio object. 我找到了如何控制Audio对象。 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? 你能告诉我如何通过JavaScript或一些好的模块来控制音量吗？

Answer 1

Here 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 这里有一些javascript，它为浏览器提供了一个窗口小部件，可以在渲染音频时更改音量......只需在下面更新并使用一些音频文件（mp3）填充变量audio_url，您可以将其放入相同的dir中，如下所示

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

Answer 2

The following example to control audio volume is from Mozilla's Using HTML5 audio and video guide: 以下控制音量的示例来自Mozilla的使用HTML5音频和视频指南：

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video https://developer.mozilla.org/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. 如果您要访问系统卷，那么答案是JavaScript无法做到这一点。 This was previously discussed here: 这在前面已经讨论过：

Javascript: Can you read the systems volume? Javascript：你能读懂系统卷吗？

如何通过JavaScript控制浏览器的卷？

问题描述

2 个解决方案

解决方案1
3 2015-03-23 15:18:52

解决方案2
1 2015-03-23 07:45:22

如何通过JavaScript控制浏览器的卷？

问题描述

2 个解决方案

解决方案1 3 2015-03-23 15:18:52

解决方案2 1 2015-03-23 07:45:22

解决方案1
3 2015-03-23 15:18:52

解决方案2
1 2015-03-23 07:45:22