如何在我的音频播放列表上呈现持续时间答案

【问题标题】：How to render durations on my audio Playlist如何在我的音频播放列表上呈现持续时间
【发布时间】：2020-12-23 10:03:25
【问题描述】：

这是获取每个音频持续时间的代码。

 useEffect(() => {
        const currentData = data?.map(data => {
            const audio = document.createElement('audio')
            audio.src = data.assets[0].audio
       audio.addEventListener('loadedmetadata', function () {
                const duration = audio.duration
                setFeaturesDuration([duration])   
                console.log(duration)
                // durationArray.push(duration)
             
            })
    })
    }, [])

这是我在 console.log 持续时间时得到的


PlayList.js:59 56.816333
PlayList.js:59 42.658
PlayList.js:59 50.651333
PlayList.js:59 55.928167
PlayList.js:59 57.391
PlayList.js:59 37.955833
PlayList.js:59 64.052167
PlayList.js:59 47.986833
PlayList.js:59 59.4285
PlayList.js:59 46.706833
PlayList.js:59 56.581167

但我想做的是我想在我的播放列表上呈现它，这是显示我的播放列表的代码，在代码的末尾包含一个具有持续时间值的跨度。

     {data?.map((data, index) => {
                 
                // const songDuration =  getDuration(data.assets[0].audio)
                // console.log(songDuration)
                 return(
                  <li 
                  onClick={(e) => {
                    e.preventDefault()
                    setActive(true)
                      store.addSong(data.assets[0].audio)
                      store.addImage(data.photo)
                      store.addName(data.name)
                      store.addSongIndex(index)
                  }}
                  key={data?.id}>
                  <div className="plItem">
                     <span className="trackNumber">{index + 1}</span> 
                     <span className="trackTitle">
                        <WordLimit limit={15}>
                         {data ? data.name : "word"}
                         </WordLimit> 
                      </span> 
                      <span>{Duration}</span>
                   </div>
                   </li>
                 )
             } 
              )}

【问题讨论】：

不能直接给，API应该返回duration值。客户端不是获取持续时间的正确位置。
哦，所以我无法从客户那里得到它？？
我不这么认为，服务器应该是正确的地方，当他们存储视频 URL 时，他们也应该存储持续时间。假设列表中有 100 个 URL，每次渲染都必须计算持续时间和显示。它会降低性能。
哦，好的，非常感谢您的回复..
好的，非常感谢您的回复，意义重大..

标签： reactjs audio duration

【解决方案1】：

我不这么认为这是可能的，即使它是可能的。

我建议 sever 应该是正确的地方，当他们存储视频 URL 时，他们也应该存储持续时间。这样他们就可以在 API 中发送所有相关的（元）信息（标题、持续时间、URL 等）。在服务器上，计算将是一次。

假设您的列表中有 100 个或更多视频 URL在组件的每个渲染中，您必须计算持续时间并显示。这不是正确的做法。它会对性能产生巨大影响。

【讨论】：