如何获取每个 mp3 文件的持续时间并同时显示所有文件

问题描述

getDuration 函数获取 mp3 文件的持续时间，但我希望能够像普通 mp3 播放器一样在不播放歌曲的情况下显示其持续时间。 我尝试通过获取歌曲持续时间并循环遍历它来实现它，但它使我的代码崩溃，但是当它没有崩溃时，它只显示一个循环值，我的意思是所有列表项中只显示一个值。

 function getDuration (currentSong) {
        const audio = document.createElement('audio')
        audio.src= currentSong
        const loaded = audio.addEventListener('loadedMetadata',function () {
            const duration = audio.duration
           
        })
        
    }


    <div className={displaySongs ? "Playlist Playlist_show" : "Playlist"}>
         <ul className="Paylist-list">    
         {series?.map((series,index) => (
              
    
             {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 className="trackTDuration">
                       {songDuration}
                     </span>    
                   </div>
                   </li>
                 )

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）