Question

我正在使用Reactjs创建鼓机。它工作正常，但是我遇到了一些性能问题，我还想添加一个音频更改界面。当前，应用程序必须在用户每次单击鼓垫时都初始化一个Audio对象（太糟糕了！！！），我试图添加另一个更改音频的功能，但是我做不到。.我是Reactjs的新手，所以对您有所帮助将不胜感激。

这是我的代码：

const App = () => {
  return (
    <div className="main">
      <div className="drumBox">
        <h2 className="drumHeader">Drum Machine</h2>
        <input type="button" value="Q" onClick={() => play(Q)} />
        <input type="button" value="W" onClick={() => play(W)} />
        <input type="button" value="E" onClick={() => play(E)} />
        <input type="button" value="A" onClick={() => play(A)} />
        <br />
        <input type="button" value="S" onClick={() => play(S)} />
        <input type="button" value="D" onClick={() => play(D)} />
        <input type="button" value="Z" onClick={() => play(Z)} />
        <input type="button" value="X" onClick={() => play(X)} />
      </div>
    </div>
  );
};
const play = e => {
  var snd = new Audio(e);
  return snd.play();
};

export default App;

我在点击每个鼓垫时会调用播放功能。如您所见，每次单击都会初始化音频对象 snd 。我该如何解决这个问题并能够更改音量？

Answer 1

不确定您使用的是哪个JavaScript音频库，因此无法完全测试此功能。另外，我不确定您是否尝试在Angular中进行操作。

但是，假设音频可用，我可以向您展示如何使用jQuery。

将HTML更改为：

$(".drum").on('click', function(){
      let note = $(this).val();
      try{
              new Audio(note);
      }catch(e){
          console.log("Couldn't play note: ".concat(note));	
      }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div className="main">
    <div className="drumBox">
      <h2 className="drumHeader">Drum Machine</h2>
      <input class="drum" type="button" value="Q" />
      <input class="drum" type="button" value="W" />
      <input class="drum" type="button" value="E" />
      <input class="drum" type="button" value="A" />
      <input class="drum" type="button" value="S" />
      <input class="drum" type="button" value="D" />
      <input class="drum" type="button" value="Z" />
      <input class="drum" type="button" value="X" />
    </div>
</div>

Answer 2

也许通过使每个小键盘输入具有音频的组件来实现：

@media print {
    
    .button-wrapper {
        display: none;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }

    @page {
        @footnote {
          display: none;
        }
    }        
    footer {
        display: none;
    }

    .confirmation {page-break-after: always;}
}

并像这样使用它：

const PadInput = ({value})=>{

  const a = new Audio(value)
  const play = ()=>{
    a.play();
  }

  return (
    <input type="button" value={value} onClick={play} />
  )
}

或仅对一种音频有效：

<PadInput value="A"/>

我应该如何实施我的鼓机应用程序？

2 个答案: