在 React 中播放播放列表中的音频答案

【问题标题】：Playing audio from a playlist in React在 React 中播放播放列表中的音频
【发布时间】：2021-10-17 07:26:42
【问题描述】：

使用 plyr-react 模块的广播播放列表
来自 API json 文件的数据，以播放列表的形式获取数据并将其加载到 Plyr 音频播放器中。

试图弄清楚如何将 url 传递到 Plyr 源路径。无法将源 URL 加载到音频播放器中。以下是代码

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>
);
}

【问题讨论】：

标签： javascript reactjs plyr

【解决方案1】：

对当前的Track Source使用useState

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 事件 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>

【讨论】：