Buenos días. Tengo una lista de música que, entre las funciones disponibles, solo quiero permitir que el usuario reproduzca y pause la música, pero encontré un problema. onClick Tengo que escribir una función basada en el error que obtuve anteriormente y no puedo escribir item.url.play() directamente, pero si escribo con la función, no reconocerá el elemento. ¿Cuál es la solución ahora? Tu dices.
Para entender mejor los códigos
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> </> );en lugar de x intentar
() => sufunc(elemento)
Tiene acceso al elemento sin llamarlo directamente
Primero, debe usar un elemento de audio , luego en su onClick , debe cambiar la fuente de audio según la URL de la canción.
primero pon esto en tu DOM:
<audio id="audio" controls="controls"> <source id="audioSource" src=""></source> Your browser does not support the audio format. </audio>luego en tu 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>y declara tu método de juego así:
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 }