Ползунок диапазона реагирования ввода для объема не работает - PullRequest
Новая
       16

Ползунок диапазона реагирования ввода для объема не работает

0 голосов
/ 28 января 2020

Здравствуйте, коллеги-программисты, я делаю простую драм-машину и пытаюсь реализовать регулировку громкости, все «работает», и я не получаю никаких ошибок, слайдер скользит, но по какой-то причине громкость не меняется , когда я console.log громкости и дисплея, они оба меняются правильно, за исключением того, что громкость на странице не влияет, поэтому, возможно, я спрашиваю, как я могу переопределить регулятор громкости моего компьютера? помогите пожалуйста гении из stackoverflow, вот мой код: 

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

Ответы [ 2 ]

1 голос
/ 28 января 2020

Вы только создаете и отображаете состояние громкости, поэтому оно не должно влиять на фактическую громкость.

как мне отменить регулятор громкости моего компьютера?

На самом деле вы не можете, вы не можете манипулировать громкостью вашего компьютера. Однако вы можете контролировать громкость звука, воспроизводимого вашей веб-страницей.

Здесь есть два способа:

1. Используйте свойство volume <audio>

. Устанавливая громкость элемента DOM перед воспроизведением или используя функцию handleVolume: 

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

Многие браузеры поддерживают этот API. неизвестно, проверьте https://caniuse.com/#feat = mdn-html_elements_audio_volume

2. Используйте Web Audio API для воспроизведения аудио

Это более сложно, но вы получаете больше элементов управления.

Пожалуйста, проверьте: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

И путь. То, как вы получаете доступ к своим элементам, не очень React-i sh. Попробуйте использовать 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} />;
      //...
    );
  }
}
0 голосов
/ 28 января 2020

Внутри объекта состояние вы устанавливаете ключ с именем volumeVal , в котором хранится число в диапазоне от 0 до 1, управляемое с помощью ползунка.

К сожалению, хотя вы это значение не использовалось нигде в вашем коде, кроме ползунка, поэтому вы не слышите изменения громкости.

Объем элемента HTML <audio> - то, что вы используете для ваших отдельных звуков - можно управлять с помощью свойства .volume . Поэтому все, что вам нужно сделать, это присвоить этому свойству значение this.state.volumeVal до воспроизведения.

Например, событие keyCode для hihat должно быть изменено на следующее: 

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