音量的反应输入范围滑块不起作用

Question

各位程序员大家好，我正在制作一个简单的鼓机，并且正在尝试实现音量控制，一切都 "works" 我没有收到任何错误，滑块滑动，但由于某种原因音量没有改变，当我 console.log volumeVal 和显示时，它们都正确改变，除了页面上的音量不受影响，所以也许我问我如何覆盖我的计算机的音量控制？请Whosebug的天才帮忙，这是我的代码：

class DrumMachine extends React.Component {
  constructor(props) {
    super(props)
        this.state = {
            power: false,
            volumeVal: 0.5,
            display: String.fromCharCode(160)
        }
        this.onKeyPress = this.onKeyPress.bind(this);
        this.powerButton = this.powerButton.bind(this);
        this.handleVolume = this.handleVolume.bind(this);
  };    
      componentDidMount() {
            document.addEventListener('keydown', this.onKeyPress)       
  }
      componentWillUnmount() {
            document.removeEventListener('keydown', this.onKeyPress)
  }

    onKeyPress(e) {
    if (e.keyCode === 86) { 
       document.getElementById('bassdrum').play();
             document.getElementById('bassdrum').currentTime = 0;
        }; 
        if (e.keyCode === 71) { 
       document.getElementById('hihat').play();
             document.getElementById('hihat').currentTime = 0;
        }; 
        if (e.keyCode === 88) { 
       document.getElementById('snaredrum').play();
             document.getElementById('snaredrum').currentTime = 0;
      }; 
        if (e.keyCode === 89) { 
       document.getElementById('tom1').play();
             document.getElementById('tom1').currentTime = 0;
        }; 
        if (e.keyCode === 85) { 
       document.getElementById('tom2').play();
             document.getElementById('tom2').currentTime = 0;
        };
        if (e.keyCode === 56) { 
       document.getElementById('crashcymbal').play();
             document.getElementById('crashcymbal').currentTime = 0; 
        };
    }

    powerButton() {
        if (this.state.power) {
            this.setState({ power: false })
        } else {
            this.setState({ power: true })
        }
    };

    handleVolume(e) {
        if (this.state.power) {
            this.setState({
                volumeVal: e.target.value,
                display: "Volume: " + Math.round(e.target.value * 100)
            });
      setTimeout(() => this.clearDisplay(), 1000);          
        }
    }

  clearDisplay() {
    this.setState({
      display: String.fromCharCode(160)
    });
  }

  render() {
        var buttonClass = ['power'];

        if (this.state.power) {
      buttonClass.push('On');
    } else {
            buttonClass.push('Off')
        }    

    return (
      <div id='container' className='container'>
                <div id='drumkeycontainer'>
                    <div className='row'>
                        <h6>ReactJS Drum Machine</h6>
                        <button className={buttonClass.join(' ')} onClick={this.powerButton}>Power</button>
                    </div>
                    <div className='row'>
            <div keyCode='86' className='key' onClick={() => {document.getElementById('bassdrum').play(); document.getElementById('bassdrum').currentTime = 0;}}>
                            <kbd><b>V</b></kbd>
                            <br />
                <span className='sound'>Bass Drum</span>
                </div>
                        <div keyCode='71' className='key' onClick={() => {document.getElementById('hihat').play(); document.getElementById('hihat').currentTime = 0;}}>
                            <kbd><b>G</b></kbd>
                            <br />
                            <span className='sound'>Hi-Hat</span>
                        </div>
                        <div keyCode='88' className='key' onClick={() => {document.getElementById('snaredrum').play(); document.getElementById('snaredrum').currentTime = 0;}}>
                            <kbd><b>X</b></kbd>
                            <br />
                            <span className='sound'>Snare</span>
                        </div>
                    </div>
                    <div className='row'>
                        <div keyCode='89' className='key' onClick={() => {document.getElementById('tom1').play(); document.getElementById('tom1').currentTime = 0;}}>
                            <kbd><b>Y</b></kbd>
                            <br />
                            <span className='sound'>Tom 1</span>
                        </div>
                        <div keyCode='85' className='key' onClick={() => {document.getElementById('tom2').play(); document.getElementById('tom2').currentTime = 0;}}>
                            <kbd><b>U</b></kbd>
                            <br />
                            <span className='sound'>Tom 2</span>
                        </div>
                        <div keyCode='56' className='key' onClick={() => {document.getElementById('crashcymbal').play(); document.getElementById('crashcymbal').currentTime = 0;}}>
                            <kbd><b>8</b></kbd>
                            <br />
                            <span className='sound'>Crash</span>
                        </div>                      
                    </div>
                    <div className='row'>
                        <div className='slider-wrapper'>
                            <label>Volume
                            <input type="range" min='0' max='1' value={this.state.volumeVal} onChange={this.handleVolume} step='0.01' />
                            </label>
                        </div>  
                    </div>
                </div>
                {/*links for audio elements obtained from www.findsounds.com */}
                {this.state.power && <div id='audiocontainer'>
                    <audio id='bassdrum' keyCode='86' src='https://www.myinstants.com/media/sounds/bass-drum.mp3'></audio>
                    <audio id='hihat' keyCode='71' src='http://dight310.byu.edu/media/audio/FreeLoops.com/1/1/Alchemist%20HiHat%203-1788-Free-Loops.com.mp3'></audio>
                    <audio id='snaredrum' keyCode='88' src='https://www.myinstants.com/media/sounds/snare.mp3'></audio>
                    <audio id='tom1' keyCode='89' src='http://www.denhaku.com/r_box/sr16/sr16tom/loelectm.wav'></audio>
                    <audio id='tom2' keyCode='85' src='http://dight310.byu.edu/media/audio/FreeLoops.com/1/1/909%20Tom%20Low%2001-5859-Free-Loops.com.mp3'></audio>
                    <audio id='crashcymbal' keyCode='56' src='http://dight310.byu.edu/media/audio/FreeLoops.com/1/1/AT%20B%20Crash-1026-Free-Loops.com.mp3'></audio>
                </div>}
      </div>
    );
  };
}

ReactDOM.render(<DrumMachine />, document.getElementById('app'))

Answer 1

在 state 对象中，您设置了一个名为 volumeVal 的键，它存储一个从 0 到 1 的浮点数，可使用滑块控制.

不幸的是，除了滑块之外，您没有在代码中的任何地方使用该值，因此您听不到音量变化。

HTML <audio> 元素的音量 - 这是您用于个人声音的元素 - 可以通过它的 .volume 来控制属性。所以你所要做的就是分配这个属性播放前 this.state.volumeVal 的值。

例如，踩镲的 keyCode 事件需要更改为：

if (e.keyCode === 71) {
     document.getElementById('hihat').volume=this.state.volumeVal;   
     document.getElementById('hihat').currentTime = 0;
     document.getElementById('hihat').play();
};

Answer 2

您只是创建和显示一个卷状态，因此它应该不会影响您的实际卷。

how do I override my computer's volume control?

实际上你不能，你不能操纵你电脑的音量。但是，您可以控制网页播放的音量。

这里有两种方法：

1。使用量属性共 `<audio>`

通过在播放前或在 handleVolume 函数中设置 DOM 元素的音量：

document.getElementById('audio-element-id').volume = this.state.volumeVal;

此API的许多浏览器兼容性未知，请检查https://caniuse.com/#feat=mdn-html_elements_audio_volume

2。使用网络音频 API 播放音频

这更复杂，但您可以获得更多控制权。

请检查： https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

顺便说一句。您访问元素的方式不是很像 React。考虑使用 ref 访问您的实际元素：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.audioRef1 = React.createRef();
  }

  //...

  playAudio1() {
    this.audioRef1.current.play();
  }

  //...

  render() {
    return (
      //...
      <audio ref={this.audioRef1} />;
      //...
    );
  }
}

音量的反应输入范围滑块不起作用

React input range slider for volume isn't working

javascript

html

reactjs

range

volume

1。使用量属性共 `<audio>`

2。使用网络音频 API 播放音频

音量的反应输入范围滑块不起作用

React input range slider for volume isn't working

javascript

html

reactjs

range

volume

1。使用量 属性 共 <audio>

2。使用网络音频 API 播放音频

1。使用量属性共 `<audio>`