Javascript 音量的React输入范围滑块不工作
各位程序员，大家好，我正在制作一个简单的鼓式机器，并试图实现音量控制，一切正常，我没有收到任何错误，滑块滑动，但由于某种原因，音量没有改变，当我控制台记录volumeVal和显示时，它们都正确地改变了，只是页面上的音量没有受到影响，所以也许我在问我怎么控制电脑的音量？请帮助stackoverflow的天才们，这是我的代码：Javascript 音量的React输入范围滑块不工作,javascript,html,reactjs,range,volume,Javascript,Html,Reactjs,Range,Volume,各位程序员，大家好，我正在制作一个简单的鼓式机器，并试图实现音量控制，一切正常，我没有收到任何错误，滑块滑动，但由于某种原因，音量没有改变，当我控制台记录volumeVal和显示时，它们都正确地改变了，只是页面上的音量没有受到影响，所以也许我在问我怎么控制电脑的音量？请帮助stackoverflow的天才们，这是我的代码： class DrumMachine extends React.Component { constructor(props) { super(props)
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'))
if (e.keyCode === 71) {
document.getElementById('hihat').volume=this.state.volumeVal;
document.getElementById('hihat').currentTime = 0;
document.getElementById('hihat').play();
};
if (e.keyCode === 71) {
document.getElementById('hihat').volume=this.state.volumeVal;
document.getElementById('hihat').currentTime = 0;
document.getElementById('hihat').play();
};
您只创建和显示卷状态，因此它不应影响实际卷 如何覆盖计算机的音量控制 实际上你不能，你不能操纵你的电脑的音量。但是，您可以控制网页播放的音量 这里有两种方法： 1.使用的卷属性 2.使用Web音频API播放音频 这更复杂，但您可以获得更多的控件 请检查： 顺便说一下。访问元素的方式不是很简单。考虑使用以访问您的实际元素： 类MyComponent扩展了React.Component{ 构造器{ 超级作物； this.audioRef1=React.createRef； } //... 播放音频1{ this.audioRef1.current.play； } //... 渲染{ 回来 //... ; //... ; } }
您只创建和显示卷状态，因此它不应影响实际卷 如何覆盖计算机的音量控制 实际上你不能，你不能操纵你的电脑的音量。但是，您可以控制网页播放的音量 这里有两种方法： 1.使用的卷属性 2.使用Web音频API播放音频 这更复杂，但您可以获得更多的控件 请检查： 顺便说一下。访问元素的方式不是很简单。考虑使用以访问您的实际元素： 类MyComponent扩展了React.Component{ 构造器{ 超级作物； this.audioRef1=React.createRef； } //... 播放音频1{ this.audioRef1.current.play； } //... 渲染{ 回来 //... ; //... ; } }