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

在我的代码中，每次单击“播放”都会从“myData”数组中提取一个id的url（假设id=1），该id的url会被复制到另一个名为cloneUrl的状态/属性中，也会通过单击播放音频函数运行（实际上首先复制url）来播放音频。但是，即使在获取url之后，呈现函数也不会播放音频。为什么?

链接到我的沙盒这里

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

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;

import React，{Component}来自“React”；
类应用程序扩展组件{
状态={
cloneUrl:“，
我的数据：[
{
id:1，
信：“Q”，
url:“https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
},
{
id:2，
信：“W”，
url:“https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3"
},
{id:3，字母：“E”，url:“无”}，
{id:4，字母：“A”，url:“无”}，
{id:5，字母：“S”，url:“无”}，
{id:6，字母：“D”，url:“无”}，
{id:7，字母：“Z”，url:“无”}，
{id:8，字母：“X”，url:“无”}，
{id:9，字母：“C”，url:“无”}
]
};
播放音频=（数据）=>{
this.setState（{cloneUrl:data}）；
const audioEl=document.getElementsByClassName（“音频元素”）[0]；
audioEl.play（）；
};
render（）{
console.log（this.state.cloneUrl）；
返回(
{this.state.myData.map（（项）=>(

{item.letter}
this.playAudio（item.url）}>play


))}
);
}
}
导出默认应用程序；

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

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