音乐播放：从Array中输入音乐地址，在onClick中输入

Question

美好的一天。我有一个音乐列表，在可用功能中，我只想允许用户播放和暂停音乐，但我遇到了一个问题。 onClick我要根据之前的错误写一个function，不能直接写item.url.play()，但是如果用function写，它会认不出item。现在有什么解决办法？你说。

为了更好地理解代码

 const Musics = [
        {
            name: "это ли счастье",
            img: этолисчастьеImg,
            singer: "Rauf & Faik",
            url: этолисчастьеMusic
        },
        
        //code...
    ];

return (
        <>
            <Box className="list-box">
                {Musics.map((item) =>
                    <Grid container className="box-music">
                        <Grid item lg={3}>
                            <img src={item.img} width="80px" height="80px" className="img-box" />
                        </Grid>
                        <Grid item lg={7} className="text">
                            <Typography>
                                <h5 className="name"> {item.name} </h5>
                            </Typography>
                            <p style={{ color: "#6f009b" }}>{item.singer}</p>
                        </Grid>
                        <Grid item lg={1}>
                            <i className="fa fa-play fa-1x pley" aria-hidden="true" onClick={x}></i>
                        </Grid>
                    </Grid>
                )}
            </Box>
        </>
    );

Answer 1

尝试用 x 代替

() => yourfunc(item)

您可以访问项目而无需直接调用它

Answer 2

首先，您需要使用 音频元素，然后在您的 onClick 上，您应该根据 URL 更改音频源歌曲。

首先把这个放在你的 DOM:

<audio id="audio" controls="controls">
  <source id="audioSource" src=""></source>
  Your browser does not support the audio format.
</audio>

然后在你的 html:

    <Grid item lg={1}>
       <i className="fa fa-play fa-1x pley" aria-hidden="true" onClick={(e) => {e.preventDefault(); this.play(item.url);}}></i>
    </Grid>

并像这样声明你的游戏方法：

play(songUrl) {
  const audio = document.getElementById('audio');
  var source = document.getElementById('audioSource');
  source.src = songUrl;
  audio.load(); //call this to just preload the audio without playing
  audio.play(); //call this to play the song right away
}

音乐播放：从Array中输入音乐地址，在onClick中输入

Music playback: Enter the music address from the Array and type in onClick

javascript

function

onclick

reactjs