如何在 React 中使用音频文件？

Question

在我的代码中，每次单击“播放”时，都会从“myData”数组中提取一个 id（假设 id = 1）的 url，这个 id 的 url 被复制到另一个名为 cloneUrl 的状态/属性中，同时单击playAudio 函数运行（它实际上首先复制 url）以播放音频。 但是，即使在获取 url 之后，渲染功能也不会播放音频。 为什么 ？

在此处链接到我的沙箱， https://codesandbox.io/s/sound-app-to-be-continuee-wm3xq

或者你可以看到下面的代码，

import React, { Component } from "react";

class App extends Component {
  state = {
    cloneUrl: "",
    myData: [
      {
        id: 1,
        letter: "Q",
        url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
      },
      {
        id: 2,
        letter: "W",
        url: "https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3"
      },
      { id: 3, letter: "E", url: "none" },
      { id: 4, letter: "A", url: "none" },
      { id: 5, letter: "S", url: "none" },
      { id: 6, letter: "D", url: "none" },
      { id: 7, letter: "Z", url: "none" },
      { id: 8, letter: "X", url: "none" },
      { id: 9, letter: "C", url: "none" }
    ]
  };

  playAudio = (data) => {
    this.setState({ cloneUrl: data });
    const audioEl = document.getElementsByClassName("audio-element")[0];
    audioEl.play();
  };

  render() {
    console.log(this.state.cloneUrl);
    return (
      <div>
        {this.state.myData.map((item) => (
          <li key={item.id}>
            {item.letter}
            <audio className="audio-element">
              <source src={this.state.cloneUrl}></source>
            </audio>
            <button onClick={() => this.playAudio(item.url)}>play</button>
            <hr />
          </li>
        ))}
      </div>
    );
  }
}

export default App;

Answer 1

您已经通过 playAudio 传递了 url。 你可以这样玩。

  playAudio = (data) => {
   
    let audio = new Audio(data)
    audio.play();
  };