为什么音频剪辑没有在 document.getElementById().play() 上播放答案

【问题标题】：Why is audo clip not playing on document.getElementById().play()为什么音频剪辑没有在 document.getElementById().play() 上播放
【发布时间】：2022-01-08 10:39:13
【问题描述】：

我正在尝试在 React 中构建鼓机。当我单击一个按钮时，我希望播放孩子的音频剪辑。为此，我在单击时将按钮和音频的 id 传递给方法，然后使用 document.getElementById(Id).play()。但是，这不起作用。我在这里是正确的还是完全错误的？

import * as React from "https://cdn.skypack.dev/react@17.0.1";
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.playClip = this.playClip.bind(this);
  }
  
  playClip = (e) => {
    const id = event.target.id;
    document.getElementById(id).play();
  }
  
  render() {
    return(
      <div className="container" id="drum-machine">
        <h3>My drum-machine</h3>
        
        <div class="grid" id="display">
          <button className="drum-pad" id="Q" onClick={this.playClip}>Q<audio className="clip" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js" id="Q" /></button>
          <button className="drum-pad" id="W" onClick={this.playClip}>W<audio className="clip" src="" id="W" /></button>
          <button className="drum-pad" id="E" onClick={this.playClip}>E<audio className="clip" src="" id="E" /></button>
          <button className="drum-pad" id="A" onClick={this.playClip}>A<audio className="clip" src="" id="A" /></button>
          <button className="drum-pad" id="S" onClick={this.playClip}>S<audio className="clip" src="" id="S" /></button>
          <button className="drum-pad" id="D" onClick={this.playClip}>D<audio className="clip" src="" id="D" /></button>
          <button className="drum-pad" id="Z" onClick={this.playClip}>Z<audio className="clip" src="" id="Z" /></button>
          <button className="drum-pad" id="X" onClick={this.playClip}>X<audio className="clip" src="" id="X" /></button>
          <button className="drum-pad" id="C" onClick={this.playClip}>C<audio className="clip" src="" id="C" /></button>
        </div>
      
      </div>
    )
  }
  
}


ReactDOM.render(<App />, document.getElementById("drum-machine"));

【问题讨论】：

标签： html reactjs

【解决方案1】：

您在按钮而不是audio元素上调用play方法。

（当您的 HTML 无效且 id 重复时，getElementById 将找到第一个匹配项。

你可以用document.getElementById(id).querySelector('audio').play();破解这个

但是将按钮及其中的所有内容都作为组件并使用引用会更简洁。

const AudioButton = ({letter, src}) => {
    const audioElement = useRef(null);
    const onButtonClick = () => {
        audioElement.current.play();
    }
    return (
        <button className="drum-pad" onClick={onButtonClick}>
            {letter}
            <audio className="clip" src={src} />
        </button>
    );
}

然后：

<div class="grid" id="display">
    <AudioButton letter="Q" src="q.mp3" />
    <AudioButton letter="W" src="w.mp3" />
    etc
</div>

【讨论】：

感谢您的回复。我尝试了“hacking”方法，虽然我的程序现在针对的是
@JoelPearce — 见the documentation。你必须导入它。 import React, { useRef } from 'react';

【解决方案2】：

您的 ID 应该是唯一的。您正在按钮元素上调用播放，而不是子音频元素，因为它们都具有相同的 id。此外，由于您在点击事件之后已经获得了目标，因此您无需再次按 ID 搜索它。该事件会将目标元素传递给您，您可以获取其子音频元素。

playClip = (e) => {
    const id = event.target.id;
    document.getElementById(id).play();
  }

此方法不起作用，因为您正在传递 e 但随后使用范围内不存在的 event 变量。它应该是 e 或 event。我的版本是：

playClip = (e) => {
    e.target.querySelector("audio").play();
  }

那么，只要每个按钮都有一个子音频元素，您就根本不需要音频元素上的 ID。

【讨论】：