Lista de reproducción de radio Uso del módulo plyr-react
Datos de un archivo API json, obtenga los datos como una lista de reproducción y cárguelos en el reproductor de audio Plyr.
Tratando de averiguar cómo se puede pasar la URL a la ruta de origen de Plyr. No se puede cargar la URL de origen en el reproductor de audio. A continuación se muestra el código
import React, { useEffect, useState } from 'react'; import Radioplyr from 'plyr-react'; const tracks = { type: "audio", sources: [ { src: "https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3", }, { src: "http://172.105.50.82/radio/8000/radio.mp3", }, ] }; const audioSrc = { type: "audio", sources: [ { src: {playlist}, }, ] }; return ( <div> <Radioplyr source={audioSrc} /> {playlist} <ul className="playlist"> {tracks.sources.map((item, i) => { return <li key={i}><a onClick={() => setPlaylist(item.src)}>{item.src}</a></li> })} </ul> </div> ); }Use useState para la fuente de pista actual
const [currentTrackSrc, setCurrentTrackSrc] = useState(tracks.sources[0]) const [audioSrc, setAudioSrc]= useState({ type: "audio", sources: [ { title: currentTrackSrc.title, src: currentTrackSrc.src, }, ] }); const changeOnDemandSong = (newSong, newSongTitle) => { setCurrentTrackSrc(newSong); setAudioSrc({ type: "audio", sources: [ { title: newSongTitle, src: newSong, }, ] }); }Onclick event changeOnDemandsong
<div className="">{audioSrc.sources[0].title}</div> <ul className="ondemand-plList"> {tracks.sources.map((item, i) => { return <li key={i} className="plItem"><a href="#!" onClick={() => { changeOnDemandSong(item.src, item.title); } }>{item.title}</a></li> })} </ul>