如何在React中使用音频文件

Question

在我的代码中，每次点击"；播放"；id的url(假设id＝1(从"；myData"；数组中，此id的url正被复制到另一个名为cloneUrl的状态/属性，同时单击playAudio函数(实际上是在第一位置复制url(来播放音频。但是，即使在获得url之后，render函数也不会播放音频。为什么？

链接到我的沙箱在这里，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();
};