Question

我试图播放来自外部源（在本例中为NASA）的音频。我知道地址是正确的，因为如果我硬编码我的代码工作。但是，通过州注入URL不会做任何事情。有什么建议吗？

render() {
    return (
        <div className="music">
            <h1>Audio</h1>
            <br />
            <p>Sound source = {this.state.source}</p>
            <audio controls>
                <source src={this.state.source} />
            </audio>
        </div>
    )
}

Answer 1

好吧，看起来您的代码正常运行。您可能会在某处丢失组件的state。这是一个只运行代码的React代码段。

class AudioTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      source: props.url
    };
  }

  render() {
    return (
      <div className="music">
        <h1>Audio</h1>
        <br />
        <p>Sound source = {this.state.source}</p>
        <audio controls>
            <source src={this.state.source} />
        </audio>
      </div>
    );
  }
}

ReactDOM.render(
  <AudioTest url="https://p.scdn.co/mp3-preview/a3fd5f178b7eb68b9dba4da9711f05a714efc966?cid=ed36a056ee504173a3889b2e55cbd461" />,
  document.body
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

希望这可以帮助您解决问题！

反应html5音频没有拿起外部文件

1 个答案: