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

Question

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

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

Answer 1

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

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

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

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

How to render durations on my audio Playlist

reactjs

audio

duration